Fundamentals: Part 2 (v1)

Introduction

There are a few extremely common types of data that you will encounter in Javascript, and these fundamentals lessons will give us a really strong foundation in all of them. Before we start digging deep, however, this article JavaScript Data Types will give you a quick overview of the most common ones.

Estimated reading and practice time: approx. 1 hour


Some notes regarding the undefined and null values

undefined: Can be thought of as a value used for unintentionally missing values, for example declared variables with no values assigned to them:

let myEmptyVariable;

console.log( myEmptyVariable ); // We are accessing a variable, but forgot to assign a value to it

// undefined

Remember, that the language specification states that:

undefined is used when a variable has not been assigned a value

You will also find undefined when trying to access Object properties that have not been created (more on this on the next lessons) and on Function parameters that have not been assigned a value (also, more on this later).

null: Can be used for intentionally missing values.

Here’s how the language specification describes null:

null represents the intentional absence of any object value

Unfortunately, JavaScript (still) thinks that the typeof null is object, so be careful when you are trying to detect the type of a value.

Live Sessions

Watch the following 3 videos of the recorded live sessions (29/10/2020) that introduce various JS concepts such as Primitive data types, conditionals, arrays and more.

Don’t forget to pause the video and practice on the concepts presented.

Part 1/3 – Duration: 88 minutes

Part 2/3 – Duration: 96 minutes

Part 3/3 – Duration: 64 minutes

Do you have any questions regarding the concepts and code presented in the videos? Leave your questions and comments on the comments section at the bottom of the page.

Learning Objectives

Look through these now and then use them to test yourself after doing the assignment:

  • What are the eight data types of javascript?
  • Which data type is NOT primitive?
  • What is the difference between single, double, and backtick quotes for strings?
  • Which type of quote lets you embed variables/expressions into a string?
  • How do you embed variables/expressions into a string?
  • How do you escape characters in a string?
  • What is the difference between slice/substring/substr?
  • What are methods?
  • What are the three logical operators and what do they stand for?
  • What are the comparison operators?
  • What is nesting?
  • What are truthy and falsy values?
  • What are the falsy values in Javascript?
  • What is the syntax for an if/else conditional?
  • What is the syntax for a switch statement?
  • What is the syntax for a ternary operator?
  • What is the relationship between null and undefined?
  • What are conditionals?

Strings

Depending on what kind of work you’re doing, you might end up working more with pieces of text rather than numbers. A string is simply a piece of text… and is a fundamental building block of the language.

  1. Read and code along with yet another MDN tutorial on the topic: Handling text — strings in JavaScript. (Dedicate at least 90 minutes on this material)

  2. Go through this lesson: JavaScript String Methods to learn a bit more about what you can do with strings… be sure to do the exercises at the end! Suggested reading and coding time for this material: 90 minutes After reading this post, you must ensure that you have a firm understanding of the following String properties and methods:

  • The .length property
  • The following String methods:
    • indexOf()
    • lastIndexOf()
    • search()
    • slice()
    • substring()
    • substr()
    • replace()
    • RegEx
    • toLowerCase()
    • toUpperCase()
    • concat()
    • trim()
    • charAt()
    • charCodeAt()
    • split()
  1. Vocabulary time: a method is a bit of functionality that is built into the language or into specific data types. In the previous W3Schools exercise, you learned a few methods that can be used on strings, such as indexOf and search. An exhaustive list of methods that can be used on strings can be found here: String methods.

Conditionals

Now it’s time for the fun stuff… So far we haven’t done much with our programming that you couldn’t do with simple math skills. Sure, we’ve told our computer how to do the math, so that makes it quicker, but the essence of programming is teaching the computer how to make decisions in order to do more involved things. Conditionals are how we do that.

  1. Step one in learning about conditionals is making sure you have a good grasp on comparisons: JavaScript.info – Comparisons. (Estimated reading and coding time for this material: approx. 1 to 2 hours

  2. This tutorial: JavaScript if, else and else if is a great first glance at conditionals in JavaScript. (Dedicate at least 1 hour on this material)

  3. This tutorial: Logical Operators will teach you about logical operators. (Dedicate at least 1 hour on this material)

  4. This article: Making decisions in your code — conditionals reinforces the concept and provides several interesting examples of how you could use it building websites. (Estimated reading, practice time and completion of exercises: approx. 10 hours)

Supplementary Material:

  1. This article: Conditional branching: if, ‘?’ covers the same basic concept (read through it as a review!) And more importantly offers the usual ‘tasks’ at the bottom of the page!

  2. This tutorial: How To Use the Switch Statement in JavaScript teaches you about the switch statement, which comes in handy when you have multiple conditions.

BOOKMARK THIS: This last resource has been created by Tania Rascia. Tania is one of the best online educators when it comes to Frontend and web technologies, so make sure to follow here on twitter, join her newsletter and definitely bookmark her website which contains a lot of amazing tutorials and posts. Whenever you find yourself troubled or tangled up in a difficult concept, search Tania’s posts and tutorials for it. Chances are, you will find yourself a clear explanation.

Practice

To give you a good bit of practice, we have created some repl.it exercises for you to play with. We believe that it’s best to practice programming on your own computer, rather than in an online environment, but we’ll get to that soon enough.

Be sure to do the lessons in order presented here. Pressing “run” at the top will run the code. Read all directions, watch the terminal, and read all the errors. Don’t forget to use ‘console.log’ extensively.

Make sure that you save your solutions as you will be asked to work on them later on in the course. Also, you will need to create an account at repl.it and fork the exercises in order to complete them.

Additional Resources

This section contains helpful links to other content.

  • Take a 10 to 15 minutes break and watch The Net Ninja’s Regular Expressions Tutorial. Don’t worry if you feel overwhelmed by the concept of Regular Expressions as it’s one of the most difficult and awkward computer languages. All that we want at this point, is for you to gain some basic understanding of how this pattern matching language works and become familiar with this undeniably powerful feature of most programming languages.

  • If you feel comfortable, continue to this site and practice yourself with some easy to medium pattern matching tasks.

Estimated viewing and coding practice time: approx. 3 to hours

References

Assignment

Follow the instructions at the GitHub Repository and submit your Pull Request URLs.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 02.02.2021

Contributors