Comparison Operators

Welcome to the lesson on comparison operators. In programming, we often need to make decisions based on whether certain conditions are met.

For example, you might need to check if a user's entered password is correct or if they are old enough to view a specific website. To do this, we compare values.

What comparison operators do

Comparison operators are special symbols used to compare two values.

Whenever you use a comparison operator, JavaScript checks the statement and returns a boolean value: true when the comparison matches the values, or false when it does not.

= vs ===

A common trap for beginners is confusing a single equals sign (=) with triple equals signs (===).

• The single = is the assignment operator. It assigns a value to a variable, for example: const age = 18;.
• The triple === is the strict equality operator. It compares two values to see if they are exactly the same in both value and data type.

Quick warning: You might sometimes see double equals (==) or not equal (!=) in older code. These can be confusing because JavaScript may try to convert data types behind the scenes before comparing them.

As a beginner, it is better to use === and !== for safer and more predictable results.

First code example

Let's check if a password entered by a user matches the saved password.

const savedPassword = "secretPassword123";
const enteredPassword = "secretPassword123";

console.log(savedPassword === enteredPassword);

const wrongPassword = "Password123";
console.log(savedPassword === wrongPassword);
console.log(savedPassword !== wrongPassword);

Code walkthrough

When you click Run, you will see the results in the Output section.

• The first console.log() outputs true because savedPassword and enteredPassword contain the exact same text.
• The second console.log() compares savedPassword with wrongPassword. Since the text is different, JavaScript outputs false.
• The third console.log() uses !== and outputs true because the two passwords are different.

We also have the strict not equal to operator (!==). It checks if two values are different.

Comparing numbers

We can also compare numbers to find out which one is larger or smaller.

Here are the common number comparison operators:

• > means greater than.
• < means less than.
• >= means greater than or equal to.
• <= means less than or equal to.

Let's look at a practical example with prices and ages.

const itemPrice = 50;
const userBalance = 30;

// Can the user afford the item?
console.log(userBalance >= itemPrice);

const age = 16;
const requiredAge = 18;

// Is the user younger than the required age?
console.log(age < requiredAge);

Mini task

Try editing the code block above.

Change userBalance to 50 and click Run.

Does the first output change to true? Since 50 is greater than or equal to 50, the condition becomes correct.

Short quiz

Question: What will console.log(10 !== 10) output?

Answer: It will output false.

The !== operator checks if two values are strictly not equal. Since 10 is exactly equal to 10, the statement 10 !== 10 is false.

Small challenge

Imagine you are creating a game where a player needs to beat a high score of 100 to win.

Create a variable for the player's score and use a comparison operator to check if their score is strictly greater than the high score.

// put your code below

console.log()

Summary

• Comparison operators compare two values and always return either true or false.
• = assigns a value, while === checks if two values are exactly equal.
• !== checks if two values are not exactly equal.
• Use >, <, >=, and <= to compare numbers, such as ages, balances, or game scores.