Introduction
There are a few extremely common types of data that you will encounter in JavaScript, and these lessons on the fundamentals will give you a really strong foundation in all of them. However, before we start digging deep, read through this overview of the most common data types in JavaScript.
Lesson overview
This section contains a general overview of topics that you will learn in this lesson.
- Name the eight data types in JavaScript.
- Understand the difference between single, double, and backtick quotes.
- Embed a variable/expression in a string.
- Understand what a method is.
- Name the three logical operators.
- Understand what the comparison operators are.
- Understand what conditionals are.
- Understand what nesting is.
- Understand what truthy and falsy values are.
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 a piece of text… and is a fundamental building block of the language.
- Read and code along with this MDN tutorial on strings in JavaScript. Skip the
Concatenation in contextsection, as it covers concepts we will cover in a later lesson on DOM Manipulation. - Go through the W3Schools lesson on string methods to learn a bit more about what you can do with strings. Also, be sure to take a peek at the String Reference page near the bottom, and do the exercises in the assignment section below!
- Vocabulary time: a method is a bit of functionality built into the language or specific data types. In the W3Schools lesson on string methods, you’ve learned about a few methods that can be used on strings, such as
replaceandslice. There are still many more built-in string methods which the MDN documentation for strings provides an exhaustive reference. You are not expected to memorize these but the documentation will be a very useful reference to revisit, so bookmark it!
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 basic math skills. Sure, we’ve told our computer how to do the math, which makes it quicker, but the essence of programming is teaching the computer how to make decisions to do more involved things. Conditionals are how we do that.
- Step one in learning about conditionals is making sure you have a good grasp on comparisons.
- W3Schools also has a lesson on conditionals in JavaScript.
- JavaScript.info has a good tutorial on logical operators. A little heads up regarding this reading’s tasks: there will be questions where you see
alert()with a number or string inside the parenthesis. What’s happening here will be discussed later in the curriculum. Some of the answers may not make sense now, but they are accurate, and you will understand them as you progress in the curriculum. Don’t worry too much about it now! - The MDN article on conditionals reinforces the concept and provides several interesting examples of how you could use it building websites.
- JavaScript.info’s lesson on
if/elsecovers the same basic concept (read through it as a review!) and - more importantly - offers the usual ‘tasks’ at the bottom of the page! - Learn about the
switchstatement, which is handy when you have multiple conditions.
Assignment
To give you a good bit of practice, we have created replit.com exercises for you to play with. We believe 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 the 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.
To get started, you will need to create a free Replit account. After you have done that, you can do the exercises down below by opening their link and clicking “Fork” or “Remix” in their Replit page. Note: Feel free to browse the files on the left column to gain familiarity with it.
Replit fork limit
Replit now limits free accounts to having 3 repls at a time. If you reach the limit of 3 repls, you can delete one or more of the previous forks to create a room for the new one. To do so, go to your repls and delete what you no longer need.
Replit and AI
Replit recently introduced an AI assistant, which is on by default. Before trying any of the exercises, you should first disable it, in order to prevent it from spoiling the exercise. You can do so by clicking on the button labeled AI in the bottom left corner of the code view and then unchecking the “Enable” checkbox.
- Exercise 1
- In this exercise, you will be working out of the file called
troubleshooting.js.
- In this exercise, you will be working out of the file called
- Exercise 2
- You will be working out of
script.js, and you will use the console in the ‘webview’ pane to check your work. To access the console, click the wrench icon, which is located on the right side of the address bar within the ‘webview’ pane.
- You will be working out of
- Exercise 3
- You will be working out of
math.js.
- You will be working out of
- Exercise 4
- You will be working out of
follow.js.
- You will be working out of
Knowledge check
The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
- What are the eight data types in JavaScript?
- Which data type is NOT primitive?
- What is the relationship between null and undefined?
- What is the difference between single, double, and backtick quotes for strings?
- What is the term for joining strings together?
- Which type of quote lets you embed variables/expressions in a string?
- How do you embed variables/expressions in a string?
- How do you use escape characters in a string?
- What is the difference between the slice/substring string methods?
- What are the three logical operators, and what do they stand for?
- What are the comparison operators?
- What are truthy and falsy values?
- What are the falsy values in JavaScript?
- What are conditionals?
- 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 nesting?
Additional resources
This section contains helpful links to related content. It isn’t required, so consider it supplemental.
- Regular expressions, commonly known as regex, is a tool that matches or locates patterns in strings for string validation. However, it’s important to know when you shouldn’t use regular expressions. There are other various methods to process strings, and regex can be slower in comparison.
- Web Dev Simplified’s Regular Expressions In 20 Minutes