Javascript Data Types & Comparison Operators

Lesson Content

Data Types & Conditionals

Introduction

In the last lesson, you learned about variables and arithmetic. In this lesson, we‘ll be exploring the various data types available in Javascript and how to use conditional statements to control the flow of your program. We will discuss the different data types and the different ways you can use conditional statements to create efficient code. By the end of this lesson, you‘ll have a better understanding of how data types and conditional statements work together. Let‘s get started!

Overview

By the end of this lesson, you should be able to:

- Understand what Strings are
- Understand what Integers are
- Understand Booleans and their purposes
- Learn the different conditional operators and their uses

Strings

In JavaScript, a string is a sequence of characters that stores text and can be declared with single or double quotes. They are used to process and store text and are among the most common data types.

We can declare numbers, values, basically anything in a string, as long as it is surrounded by either a single or double quotes.

let randomstring = " "
let string1 = "I am a string"
let string2 = 'I am also a string'
let string3 = "5"

As you can see in the first line, our strings can just be empty as shown in the first line. We are giving the value of " " in the variable randomString.

In the second line, a string is demonstrated by enclosing it with double quotes. However, in the third line, the string is enclosed with single quotes instead. Unlike other languages like Java, in JavaScript, it is possible to use either single or double quotes to declare a string without any issues. Just remember that a string must always be enclosed in quotations.

The final line showcases that any value can be added to strings in JavaScript, including numbers, decimals, and other types, as long as they are enclosed in some form of quotation marks.

Integers

When we store some sort of quantitative value in a variable, we call those values Integers. In JavaScript, an integer is any sort of numerical value. They are used to store numerical values and are a basic and commonly used data type. They can be manipulated with various mathematical operations. Here are some examples of integers in Javascript:

let integer1 = 0
let integer2 = 8952
let integer3 = 371.271
let integer4 = (6 * 3) / 4

With strings, we declared an empty value with empty quotation marks. With integers, we can do a similar thing but with a 0. The second line just shows us that we can store fairly large numbers in integer variables. Our integers can be as large or as small as we want them to be.

Our third line shows us storing a decimal value. Other programming languages have a specialized type for this called doubles. However in Javascript, we store them the same way we store integers: with a simple declaration and a value.

The last line in our code shows us giving integer4 the value of a mathematical operation which is something we can do in Javascript. Our variable values don’t always have to be solid numbers, we can store operations and things like formulas in them too. As you do more practice with Javascript, you will start understand how to store specific operations in Variables.

Incrementing Integers

Let’s imagine we have a variable called number and we have the value set to 4 and we want to add 10 to it. How would we do that? We could set it equal to itself plus 10 like this:

let number = 4
number = number + 10
console.log(number) // Logs 14

This is one valid way of adding 10 to our number variable, but not only is this inefficient, there is actually a faster way to do this in Javascript. Here is how:

number += 10 // This is saying number is EQUAL to number + 10

The little += operator that you see is called a compound assignment operator. The += operator adds the value on the right to the variable on the left, and then assigns the result to the variable on the left. For example, x += 2 is equivalent to x = x + 2. This operator does not apply only to addition, it can be used in any of the four main operations like this:

let x = 5
x += 2 // x is now 7
x -= 3 // x is now 2
x *= 2 // x is now 10
x /= 4 // x is now 2

Boolean values

The next datatype are booleans. Booleans are a primitive data type in JavaScript that can have only two values: true or false. They are often used in conditional statements to test whether a certain condition is true or false. For example, you might use a boolean to test whether a user is logged in or not, or whether a form has been filled out correctly. Here are how booleans are defined:

let boolean1 = true
let boolean2 = false

Booleans can hold either true or false values. Whenever you are using true and false values, make sure you are not putting quotes around them accidently! That will completely change the type of the variable.

// These are booleans
let variable1 = true
let variable2 = false

// These are strings, NOT booleans
let variable3 = "true"
let variable4 = "false"

Booleans are most commonly associated with comparisons and conditionals in Javascript. Let’s take a look at what those are and how they work!

Comparison operators & Boolean expressions

Comparison operators are essential when programming in JavaScript. They are used to compare two values and determine whether they are equal, greater than, or less than each other. This allows us to set conditions and loop through data which may not be important as of the moment, but as you venture further into your JavaScript journey, knowing what the different comparison operators are and how to use them become very imprortant.

Here are all of the Comparison Operators used in Javascript.

// Comparison Operators in Javascript

> - Greater Than
< - Less Than

>== - Greater than or equal to
<== - Less than or equal to

== - Equal to
!== - Not equal to

Those 6 operators are the most common operators that we use here in Javascript. Let’s take a look at how these comparison operators work by using the following examples below:

// Greater than
console.log(6 > 2) // Logs true
console.log(3 > 11) // Logs false
console.log(7.14 > 7) // Logs true

// Less than
console.log(3 < 5) // Logs true
console.log(8 < 2) // Logs false
console.log(1.5 < 1.6) // Logs true

// Greater than or equal to
console.log(6 >= 4) // Logs true
console.log(11 >= 11) // Logs true
console.log(1.1 >= 1.2) // Logs false

// Less than or equal to
console.log(3 <= 5) // Logs true
console.log(8 <= 2) // Logs false
console.log(1.5 <= 1.6) // Logs true

Hopefully, you are able to understand how all the greater than and less than operators work. It’s very straightforward and we use them the same way in math.

// Equal to
console.log(2 === 2) // Logs true
console.log("2" === 2) // Logs false
console.log(true === true) // Logs true

// Not equal to
console.log(2 !== 3) // Logs true
console.log(2 !== "2") // Logs true
console.log(false !== true) // Logs true

The “equal to” and “not equal to” operators in JavaScript work in a similar way to the comparison operators mentioned earlier, but with a small difference. As demonstrated in the examples, we can compare booleans, strings, and numbers. Sometimes this might be helpful, but there are other times when we don’t want to compare data types.

In the next section, we will explore the different types of equal signs in JavaScript. Although it may seem strange, there are different purposes for using one, two, or three equal signs.

= vs. == vs. ===

In JavaScript, there are three different comparison operators that involve the equal sign: =, ==, and ===. Here’s a simple explanation of each starting with =.

= is the assignment operator. It is used to assign a value to a variable. For example, x = 5 assigns the value 5 to the variable x. Here is an example of us defining some variables:

let number = 7
number = 9

The == operator in JavaScript compares the values of two operands to see if they are equal. However, if the operands have different types, the == operator will try to convert them to the same type before making the comparison. Basically, the == operator does not take the type of variable into account when seeing if they are equal. Here is an example:

console.log(7 == 7) // Logs true
console.log(7 == "7") // Logs true

=== is the strict equality operator. It is used to compare the values of two operands for equality, but it does not change types. It only returns true if the values are of the same type and have the same value. For example, 5 === "5" would return false because the operands have different types. Here are examples using the same ones as above:

console.log(7 === 7) // Logs true
console.log(7 === "7") // Logs false

Lists

The last data type we need to learn about in Javascript are lists. Lists are very simple to understand when you really think about it. Take a look at the visual down below:

You can see that there is a box with smaller boxes within it! That is what a list is! The big box is the actual list, while the smaller boxes are the list items. Each of the smaller boxes (list items) can contain different types of data such as integers, strings, booleans, and even other lists within it! Let’s understand how a list works with a simple list called kidNames.

We can see in the picture above that we are declaring a list with the name kidNames and each of the smaller boxes inside (or list items) are the names of the actual kids. They are the values inside of our list. Let’s take a look at this, but in actual code now:

// Defining a list
let kids = [bob, "Jim", "Lena"]

// We can also declare, THEN define a list
let foods = []
foods = ["cookies", "cake", "pizza"]

To create a list (also called an array) in JavaScript, you start by using a declaration keyword such as let or const, and then give the list a name. The most important part of creating a list is defining its elements.

To define the elements of the list, you enclose them in square brackets [], and separate them using commas. For example, to create a list of numbers, you would write let numbers = [1, 2, 3, 4, 5];.

You can also declare an empty list by simply using square brackets with nothing in between, like this: let emptyList = [];. In later lessons, we will learn about list methods which allow us to add, remove, and even reorder lists.

One last thing to understand is that our list can contain different types. Other languages like Java require that all items in a list be the same type, but those same rules don’t apply in JavaScript. We can put any types we want into a list like Strings, Integers, Booleans, even other lists! Here’s a good example:

let uniqueList = [true, "water bottle", 781, [18,19, "Jim"]]

As you can see, we can add strings, booleans, integers, and even other lists within our lists!

Final Comments

Those were the 4 main data types. In Javascript, we have a lot more data types like null and undefined. We won’t get the chance to talk about those in this lesson, but if you are curious, some resources will be linked down below!

Practice

Here are some resources concerning Javascript Data Types
1. This w3schools lesson going over a lot more data types than we covered
2. The MDN Web Docs have some nice examples of the different data types as well!
This lesson was mainly just to introduce you to the different types here in Javascript! before you move onto the next lessons about the methods for different data types, let’s practice what you’ve learned today. Make sure to open up your code editor, set up your files, and make sure you’re able to view the console!
1. 1. Create a string of your name and print it to the console.
  2. Create a list of your favorite colors and print it to the console.
  3. Create a variable containing an integer and print it to the console.
  4. Create a variable containing a boolean and print it to the console.
  5. Compare two integers and print the result to the console

That’s all for this lesson! The practice was rather short since we this lesson was more of an introduction. Next lesson, we’ll go deeper into strings and their methods!

Find an issue/typo/error with our content? Please report it here