Comparisons

A comparison asks a yes-or-no question

A comparison checks two values and answers true or false. These two answers are called booleans. Your code uses a comparison whenever it must make a choice. For example:

• Is the password long enough?
• Did the score reach 100?
• Is a value missing?
• Should this item come before that one?

You met these values in earlier lessons: Data types, Numbers & math, Strings, and Booleans, null & undefined. This lesson is about the operators that compare them. An operator is a symbol that does a job, like + or ===.

In this lesson you will:

• compare values in a live playground,
• step through how text is put in order,
• sort out null and undefined,
• learn why NaN is the one value that equality can't find.

JavaScript has two operators that check if two values are equal. The one you want most of the time is strict equality, written === (three equals signs). It gives true only when both sides have the same type and the same value.

1const score = 5;2 3console.log(score === 5);4console.log("5" === score);5console.log(false === 0);

Line 1 stores the number 5 in score. Line 3 prints true: both sides are the number 5. Line 4 prints false: the left side is the text "5", and the right side is a number. Line 5 also prints false: false is a boolean, and 0 is a number.

Loose equality is written == (two equals signs). It may change one side into another type before it compares. This change is called conversion. You saw it in the Type conversion lesson. Here, remember one thing: == can make two different-looking values count as equal.

1const ageText = "18";2const age = Number(ageText);3 4console.log(age === 18);5console.log(Number.isNaN(age));

When a person types into a form on a web page, the browser gives you text, even if they typed a number. Line 1 holds that text, "18". Line 2 turns the text into a number once, with Number(). Line 4 prints true, because age is now the number 18.

Line 5 prints false. Number.isNaN() asks "is this NaN?" NaN is the value you get when turning something into a number fails. Here the change worked, so age is not NaN. NaN has its own section near the end.

1const left = "0";2const right = 0;3 4console.log(left == right);5console.log(left === right);6console.log(Object.is(left, right));

Try these pairs in the playground:

• "0" and 0
• "" and false
• null and undefined

The answers come from JavaScript itself. The third answer uses Object.is(), another way to check if two values are the same. You met it in Numbers & math. The later "Equality & sameness" lesson covers it in full.

The table below shows what == gives for seven common values. Find the left value in the first column. Then find the right value along the top. The cell where they meet is the answer to left == right.

Numbers, strings, booleans, null, and undefined are primitive values. They are simple, single values. For them, 3 === 3 just checks that the values match.

Objects and arrays work differently. For them, === asks: "Do both names point to the very same object?"

1const firstCart = { total: 3 };2const sameCart = firstCart;3const otherCart = { total: 3 };4 5console.log(firstCart === sameCart);6console.log(firstCart === otherCart);

Line 1 makes a cart with a total of 3 and calls it firstCart. Line 2 does not make a new cart. It gives the same cart a second name, sameCart. So line 5 prints true.

Line 3 makes a second, separate cart. It also starts with a total of 3. But it is a different cart, so line 6 prints false.

The table puts simple values and objects side by side. Each row is one comparison, its answer, and the reason.

A reference is the link from a name to an object. When two names share one reference, they share one object. So a change made through one name shows up through the other name too. This matters when you pass a cart, a user, or a settings object to another part of an app.

1const cart = { total: 3 };2const savedCart = cart;3 4cart.total = 4;5console.log(savedCart.total);

Line 2 makes savedCart point to the same object as cart. Line 4 changes that object's total to 4. Line 5 reads the total through the other name, savedCart, and prints 4. This is not a reason to avoid objects. It is a reason to know which one you need: the same object, or a new one.

Four more operators also give true or false:

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

They are called relational operators, because they ask how two values relate: which one comes first? With two numbers, they work like in math class.

With two strings, JavaScript compares the text one character at a time, from the left. Every character has a number, called its character code. For example, "A" is 65 and "a" is 97. The character with the smaller code comes first.

1console.log("tea" < "water");2console.log("10" < "9");3console.log(Number("10") < Number("9"));

Line 1 prints true, because "t" comes before "w". Line 2 also prints true. Both sides are text, so JavaScript compares the first characters: "1" comes before "9". Line 3 turns both texts into numbers first. Then it asks the number question, "is 10 less than 9?", and prints false.

Step through the examples below. Pick one of three modes:

• Strings only: both sides are text. "10" < "9" is true, because "1" comes before "9".
• Numbers only: both sides are numbers. 10 < 9 is false.
• String-number pairs: one side is text and one is a number. JavaScript turns the text into a number first, then compares.

1console.log("apple" < "banana");Run2console.log("Apple" < "apple");3console.log("10" < "9");4console.log("a".charCodeAt(0));

null means "empty on purpose". undefined means "no value was given or found". They are two different values. But == has one special rule for them: null == undefined is true.

Here is the tricky part. == and the relational operators (<, >, <=, >=) follow different rules for these two values. You'll step through these three below, so watch them closely:

• null == 0
• null >= 0
• undefined >= 0

1function isMissing(value) {2  return value == null;3}4 5console.log(isMissing(null));6console.log(isMissing(undefined));7console.log(isMissing(""));

This is the one place where == is used on purpose. The function isMissing gives back the answer from line 2. That line is true only for null or undefined. Lines 5 to 7 print true, true, and false. So an empty string, "", does not count as missing.

1console.log(null == undefined);Run2console.log(null === undefined);3console.log(null == 0);4console.log(null >= 0);5console.log(null > 0);6console.log(undefined == 0);7console.log(undefined >= 0);

NaN stands for "Not a Number". It is a special number value. You get it when a number calculation fails, like Number("tea"). The Numbers & math lesson showed Number.isNaN(). Here is why you need it: equality can't find NaN.

1const failedPrice = Number("tea");2 3console.log(Number.isNaN(failedPrice));4console.log(Number.isNaN("tea"));5console.log(isNaN("tea"));

Line 1 tries to turn "tea" into a number. That fails, so failedPrice is NaN. Line 3 prints true. Line 4 prints false: "tea" is text, not the value NaN.

Line 5 uses the older isNaN(), without Number. in front. It turns the text into a number first, gets NaN, and prints true. That answer is about the changed value, not about "tea". So use Number.isNaN() instead.

1console.log(NaN === NaN);Run2console.log(NaN == NaN);3console.log(Number.isNaN(NaN));4console.log(Object.is(NaN, NaN));5console.log([NaN].includes(NaN));6console.log([NaN].indexOf(NaN));

The last two lines use arrays, which have their own lesson later. For now, remember one habit: to ask "is this NaN?", write Number.isNaN(value).

Where you’ll use this

Comparisons appear wherever your program picks a path. In front-end code, values often start as text. Text can come from:

• form fields,
• parts of a web address (a URL),
• saved settings,
• data sent by a server.

Safe code turns that text into the right type where everyone can see it. Then it compares.

1const ageText = "18";2const age = Number(ageText);3 4if (Number.isNaN(age)) {5  console.log("Please enter a number.");6} else if (age >= 18) {7  console.log("Adult ticket");8} else {9  console.log("Child ticket");10}

Line 2 turns the text into a number. Line 4 checks if that failed, and asks for a number if so. Only then does line 6 compare the age with >=. Here the age is 18, so it prints Adult ticket.

Use this table when you are not sure which comparison to write. Find what you want to do in the first column. The next columns show what to write and why.

This is also why linters often warn about ==. A linter is a tool that checks your code for common mistakes. It doesn't mean == is useless. It means changes you can't see cause many bugs.

1const savedCart = { total: 3 };2const currentCart = { total: 3 };3 4console.log(savedCart === currentCart);5console.log(savedCart.total === currentCart.total);

These are two separate carts, so line 4 prints false. Their totals match, so line 5 prints true. In a real app, compare only the totals if matching totals is really the rule. An order number, the items, or the delivery address might matter too.

Common misconceptions

Try each one before you open the hints. Every output was checked by running real JavaScript.

console.log("0" == 0);
console.log("0" === 0);
console.log(null == undefined);
console.log(NaN === NaN);

const entered = "5";

if (entered == 5) {
  console.log("Level 5 unlocked");
}

const entered = "5";
const level = Number(entered);

if (level === 5) {
  console.log("Level 5 unlocked");
}

console.log("item10" < "item9");
console.log("10" < "9");
console.log(10 < 9);

function isMissing(value) {
  return value == null;
}
console.log(isMissing(null));
console.log(isMissing(undefined));
console.log(isMissing(0));

function isMissing(value) {
  return value == null;
}
console.log(isMissing(null));
console.log(isMissing(undefined));
console.log(isMissing(0));

const value = Number("nope");
console.log(Number.isNaN(value));

const value = Number("nope");
console.log(Number.isNaN(value));

const savedCart = { total: 3 };
const currentCart = { total: 3 };

if (savedCart.total === currentCart.total) {
  console.log("Same total");
}

const savedCart = { total: 3 };
const currentCart = { total: 3 };

if (savedCart.total === currentCart.total) {
  console.log("Same total");
}

Your score counts first tries. Read every explanation. The wrong choices are common comparison bugs.

Key takeaways

• Use === to check if two values are equal. It checks the type and the value.
• == may change a value before it compares. Use it only on purpose, mostly as value == null.
• For objects, === asks if both names point to the same object. To check the contents, compare the parts you need.
• Text is compared by character codes. So capital letters, and text like "10", can surprise you.
• Check if a value is missing before you use <, >, <=, or >=.
• NaN never equals itself. Use Number.isNaN(value).

Coming next: Logical operators.