Lesson 27 min read

Operators & Expressions

The math and logic superpowers that make your code actually do things

Arithmetic Operators — Math Class, But Fun

JavaScript can do all the math you'd expect, plus a few bonus tricks. Think of operators as action words — they tell JavaScript to do something with values.

  • + — addition (also concatenates strings!)
  • - — subtraction
  • * — multiplication
  • / — division
  • % — modulo (the remainder after division — super useful for checking even/odd)
  • ** — exponentiation (power of). 2 ** 3 means 2×2×2 = 8

The + operator is sneaky — when you use it with a string, it glues things together instead of adding them. This catches a lot of beginners off guard!

Arithmetic in Action

console.log(10 + 3);    // 13
console.log(10 - 3);    // 7
console.log(10 * 3);    // 30
console.log(10 / 3);    // 3.3333...
console.log(10 % 3);    // 1 (remainder of 10 ÷ 3)
console.log(2 ** 10);   // 1024


// The sneaky + with strings
console.log("5" + 3);   // "53" (string concatenation, NOT 8!)
console.log("5" - 3);   // 2 (subtraction converts the string to a number)
console.log("5" * 2);   // 10 (multiplication also converts)
Output
13
7
30
3.3333333333333335
1
1024
53
2
10

=== vs == — The Battle of Equality

This is one of the most important things to understand in JavaScript. There are two ways to check equality, and they behave very differently:

  • === (strict equality) — checks if the value AND the type are the same. No funny business. This is what you should use 99% of the time.
  • == (loose equality) — tries to convert values to the same type before comparing. This leads to some truly weird results.

Same goes for !== (strict not-equal) vs != (loose not-equal). Always prefer the strict versions.

Strict vs Loose Equality — The Weirdness

// Strict equality (===) — safe and predictable
console.log(5 === 5);        // true
console.log(5 === "5");      // false (number vs string)
console.log(null === undefined); // false


// Loose equality (==) — spooky type coercion
console.log(5 == "5");       // true 😬
console.log(0 == false);     // true 😬
console.log("" == false);    // true 😬
console.log(null == undefined); // true 😬
console.log(0 == "");        // true 😬😬


// Not-equal works the same way
console.log(5 !== "5");      // true (strict)
console.log(5 != "5");       // false (loose, because it converts first)
Output
true
false
false
true
true
true
true
true
true
false

Logical Operators & Modern Shortcuts

Logical operators let you combine conditions — they're the glue of if statements.

  • && (AND) — both sides must be true
  • || (OR) — at least one side must be true
  • ! (NOT) — flips true to false and vice versa

JavaScript also has two modern operators that experienced devs love:

  • ?? (nullish coalescing) — returns the right side ONLY if the left side is null or undefined. Unlike ||, it doesn't treat 0, "", or false as "missing."
  • ?. (optional chaining) — safely access deeply nested properties without crashing if something in the chain is null or undefined.

Logical Ops, Ternary, ??, and ?.

// Logical operators
let age = 15;
let hasTicket = true;
console.log(age >= 12 && hasTicket); // true (both conditions met)
console.log(age >= 18 || hasTicket); // true (one condition met)
console.log(!hasTicket);              // false


// Ternary — the one-line if/else
let greeting = age >= 18 ? "Welcome, adult!" : "Hey, kid!";
console.log(greeting); // "Hey, kid!"


// ?? (nullish coalescing)
let username = null;
console.log(username ?? "Anonymous");  // "Anonymous"
let score = 0;
console.log(score ?? 100);   // 0 ✅ (?? keeps 0, because 0 isn't null/undefined)
console.log(score || 100);   // 100 😬 (|| treats 0 as falsy!)


// ?. (optional chaining)
let user = { profile: { name: "Zara" } };
console.log(user.profile?.name);     // "Zara"
console.log(user.address?.city);     // undefined (no crash!)
// Without ?. this would throw: user.address.city → TypeError!
Output
true
true
false
Hey, kid!
Anonymous
0
100
Zara
undefined
Note: Here's a mental shortcut: === asks "Are you the EXACT same thing?" while == asks "Could you maybe, possibly, if I squint hard enough, be the same thing?" Just always use === and you'll avoid an entire category of bugs.
Challenge

Quick check

What does "5" + 3 evaluate to in JavaScript?
← Variables & Data TypesStrings & Template Literals →