Intermediate JavaScript

Back to Lesson Index

🎯 Learning Goals

• User comparison operators to compare variables, strings, and numbers
• Write and understand conditional logic

📗 Technical Vocabulary

• Boolean
• Condition
• Conditionals
• Evaluate
• Expression
• Operators
• Statement

🗂 Warm Up

Write down one thing you’ve already learned about JavaScript. If it helps, you can think about this in two categories: data types and concepts. Be ready to share out!

🌎 Conditionals

Every programming language has conditionals. If you’ve worked in Python or Java, you’ve probably seen something similar to what we’ll be working on today!

Conditionals let us instruct our program to do something if a specific condition is met. In one web application, there are hundreds if not thousands of conditionals written into the code. Without conditions, web applications would not be able to do much customization for each user.

Comparison Operators

JavaScript gives us a way to compare values. Each expression below will be evaluated to a boolean, true or false.

3 < 5
//=> true

4 >= 9
//=> false

7 === 7
//=> true

"karlie" === "karlie"
//-> true

"karlie" === "Karlie"
//-> false

Notice the ===. This checks if two pieces of data are equal to each other. The assignment operator (=), assigns the value of a variable. These two are very different!

3 !== 4
//=> true

5 !== 5
//=> false

4 !== 9
//=> true

11 % 2
//=> 1

32 % 6
//=> 2

16 % 3
//=> 1

15 % 3
//=> 0

The not equal operator - !== - checks that two values are not equal. It is the opposite of our === operator. Notice how an ! replaces the first =.

The modulo operator - % - finds the remainder of the two numbers. It is a helpful tool to determine if numbers are even or odd. Learn more here!

Comparing Variables

We can use our comparison operators on variables as well! Let’s look at this example:

var language = "JavaScript";

language === "Javascript"
//=> false

language === "JavaScript"
//=> true

"javascript" === language
//=> false

var year = 2020;
var nextYear = 2021;

year > 2000
//=> true

year != 2019
//=> true

year < nextYear
//=> true

Conditionals

Just like in real life, programming is full of decisions. We usually make decisions based on our current state or mood.

A real-life example:

Am I hungry?

Yes ➡ I’ll eat

No ➡ I won’t eat

A programming example:

Do you have an account?

Yes ➡ Please log in

No ➡ Please create an account

JavaScript gives us a way to ask those questions and provide different outcomes based on the answer. They are called conditionals. Here’s an example:

var queen = "Beyoncé";

if (queen === "Beyoncé") {
  alert("You are correct!")
} else {
  alert("Beyoncé is the only queen.")
}

For the example above, an alert will display the text, “You are correct!”. Let’s break this down line-by-line.

var queen = "Beyoncé";          // new variable created

if (queen === "Beyoncé") {       // program checks for this condition
                                // if it evaluates to true, it will execute this block
  alert("You are correct!")
} else {                        // if it evaluates to false, it will execute this block
  alert("Beyoncé is the only queen.")
}

We call this entire piece of code an if statement.

Inside the parenthesis after the keyword if, we have to give JavaScript an expression that can evaluate to true or false. That expression is called a condition.

• If the condition evaluates to true, the code in the block below it will execute or run. It will then ignore the rest of the options.
• If it evaluates to false, it will check the condition in the next block.

Sometimes we may want to provide more than two options. Look at the use of else if:

var queen = "Beyoncé";

if (queen === "Beyoncé") {
  console.log("You are correct!")
} else if (queen === "Elizabeth II") {
  console.log("I guess you are technically right...")
} else {
  console.log("Beyoncé is the only queen.")
}

Takeaways:

• We can use any comparison operator in a condition
• We can use strings or numbers in a condition
• If a condition evaluates to true, the code below (block) it will run
• Only one block of code will run for each if statement

JavaScript

JavaScript is pretty different from HTML and CSS. It feels like a really different way of thinking for some people! If it’s new and a little uncomfortable for you, that’s ok! Keep asking questions and working together.

Back to Lesson Index