Operators and Comparisons

Learn how to compute values with arithmetic operators and why you should always use triple equals (===) for comparison.

May 1, 20263 min read2 / 3

The Essentials

  1. Arithmetic Operators: +, -, *, and / behave exactly as you expect from math class. Parentheses () can group operations to change the order of execution.
  2. Special Math Operators: Use ** for exponents and % for the remainder of a division (modulo).
  3. Comparison Operators: Used to ask yes or no questions. > (greater than), < (less than), >= (greater or equal).
  4. Equality: Always use triple equals (===) for comparison. Double equals (==) does loose type coercion and can lead to unexpected bugs.

Once you have values (numbers, strings, booleans), you need to actually do something with them. You cannot just write strings all day; you need actions. That is where operators come in.

I have already been using operators without explicitly naming them. When I type typeof 42, typeof is an operator. When I type "ALOHA" + "!", the + is an operator. Operators are symbols or keywords that tell JavaScript to perform a specific action on one or more values.

Arithmetic Operators

The most common operators in JavaScript act exactly like a calculator. They operate on numbers to compute new values.

  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)

If you combine multiple operators, JavaScript follows the standard mathematical order of operations. Multiplication and division happen before addition and subtraction.

JavaScript
4 + 1 * 2 // Returns 6

If I want the addition to happen first, I can use parentheses to group the operations, just like in math class:

JavaScript
(4 + 1) * 2 // Returns 10

There are also a couple of specialized math operators that come in handy:

  • ** (Exponentiation): Raises the first number to the power of the second number (e.g., 2 ** 3 is 8).
  • % (Modulo): Returns the remainder of a division operation (e.g., 10 % 3 is 1).

Comparison Operators

Arithmetic operators return new numbers or strings. Comparison operators are different: they ask JavaScript a question and return a Boolean (true or false).

JavaScript
5 > 4 // true 5 < 4 // false 5 >= 5 // true

These operators are the foundation of making decisions in your code. Eventually, you will use them to write logic like, "If the user is older than 18, let them into the site."

The Equality Trap: === vs ==

JavaScript has operators to check if two things are equal, but confusingly, there are two versions: the strict version (===) and the loose version (==).

If I ask JavaScript if the number 1 is strictly equal to the number 1, it says yes:

JavaScript
1 === 1 // true

But what happens if I compare the number 1 to the string "1"?

JavaScript
1 === "1" // false

This makes perfect sense. One is a number, the other is text. They are fundamentally different types of data, so they are not strictly equal.

But what happens if I use the loose equality operator (==)?

JavaScript
1 == "1" // true

Why does this return true? Because the == operator does something called type coercion. Before it compares the two values, it tries to force them to be the same type. In this case, it converts the number 1 into a string "1" behind the scenes, and then concludes they are equal.

While this might seem helpful, it is actually the source of countless bugs. In almost every situation in JavaScript, you care about the type of your data. You do not want a bug to slip by because JavaScript decided to secretly convert a number to a string.

Always use strict equality (===) and strict inequality (!==). Forget that the loose versions (== and !=) exist.

Further Reading

Keep reading

What Is JavaScript, Really?

3 min read

The Document Object Model

3 min read

Finding and Changing Elements

3 min read
PreviousPrimitives and StringsNext Expressions