JavaScript CoreLesson
Operators are the verbs of JavaScript, they perform actions on values. Whether you're calculating prices, comparing user input, or combining conditions, operators are what make your code do things.
Arithmetic operators
The basics you already know, plus a few special ones:
const a = 10;
const b = 3;
console.log(a + b); // 13 (addition)
console.log(a - b); // 7 (subtraction)
console.log(a * b); // 30 (multiplication)
console.log(a / b); // 3.333... (division)
console.log(a % b); // 1 (remainder/modulo)
console.log(a ** b); // 1000 (exponentiation: 10³)The modulo operator (%)
Modulo gives you the remainder after division. It's surprisingly useful:
// Check if a number is even or odd
const num = 7;
const isEven = num % 2 === 0; // false
const isOdd = num % 2 === 1; // true
// Cycle through array indices
const colors = ["red", "green", "blue"];
const index = 5;
const color = colors[index % colors.length]; // "blue"String concatenation with +
The + operator does double duty, it adds numbers and concatenates strings:
console.log("Hello" + " " + "World"); // "Hello World"
console.log("5" + 3); // "53" (coercion!)
console.log(5 + 3); // 8This is a common source of bugs. When in doubt, use template literals instead.
02
Comparison operators
Comparisons return true or false. This is where JavaScript's quirks really show:
// Strict equality (ALWAYS USE THIS)
console.log(5 === 5); // true
console.log("5" === 5); // false (different types)
console.log(true === 1); // false
// Strict inequality
console.log(5 !== 10); // true
console.log("5" !== 5); // true (different types)
// Relational operators
console.log(10 > 5); // true
console.log(10 >= 10); // true
console.log(5 < 10); // true
console.log(5 <= 5); // trueThe difference between == and ===
// Loose equality (==) with type coercion
console.log("5" == 5); // true (!!!)
console.log(true == 1); // true (!!!)
console.log(null == undefined); // true (!!!)
console.log("" == false); // true (!!!)
// Strict equality (===) without coercion
console.log("5" === 5); // false ✓
console.log(true === 1); // false ✓
console.log(null === undefined); // false ✓Rule of thumb
Pretend
== doesn't exist. Always use === and !==. Your future self will thank you when debugging doesn't involve wondering why "0" == false is true.AI pitfall
AI tools frequently get operator precedence wrong in complex expressions. They'll write
a && b || c when they mean a && (b || c), or generate conditions like !isLoading && data.length > 0 || showEmpty without parentheses. They also confuse &&/|| (short-circuit, return values) with ?? (nullish coalescing, only checks null/undefined). Always add explicit parentheses to AI-generated conditions and verify ?? vs || usage, 0 || "default" gives "default", but 0 ?? "default" gives 0.Comparing objects
Here's a gotcha that trips up everyone:
const a = { name: "Alice" };
const b = { name: "Alice" };
const c = a;
console.log(a === b); // false (different objects)
console.log(a === c); // true (same reference)Objects are compared by reference, not by value. Even if two objects look identical, they're different objects in memory.
03
Logical operators
Logical operators combine boolean conditions:
| Operator | Name | True when... |
|---|---|---|
&& | AND | Both conditions are true |
|| | OR | At least one condition is true |
! | NOT | The condition is false |
?? | Nullish coalescing | Left side is null or undefined |
const age = 25;
const hasLicense = true;
// AND - both must be true
const canRentCar = age >= 25 && hasLicense;
console.log(canRentCar); // true
// OR - at least one must be true
const hasAccess = age >= 18 || age <= 12;
console.log(hasAccess); // true
// NOT - invert the boolean
const isRestricted = !hasLicense;
console.log(isRestricted); // false
// Nullish coalescing - only null/undefined trigger fallback
const count = 0;
console.log(count || 10); // 10 (0 is falsy!)
console.log(count ?? 10); // 0 (0 is not null/undefined)Short-circuit evaluation
Logical operators don't just return booleans, they return the value that determined the result:
// AND (&&) returns the first falsy value or the last value
console.log("hello" && "world"); // "world"
console.log(null && "world"); // null
console.log(0 && "world"); // 0
// OR (||) returns the first truthy value or the last value
console.log("hello" || "world"); // "hello"
console.log(null || "world"); // "world"
console.log("" || 0 || "fallback"); // "fallback"This is incredibly useful for default values:
function greet(name) {
// If name is falsy (undefined, null, "", etc.), use "Guest"
const userName = name || "Guest";
return `Hello, ${userName}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet()); // "Hello, Guest!"
console.log(greet("")); // "Hello, Guest!"04
Assignment operators
Beyond simple assignment, JavaScript has compound assignment operators:
let x = 10;
x += 5; // x = x + 5; → 15
x -= 3; // x = x - 3; → 12
x *= 2; // x = x * 2; → 24
x /= 4; // x = x / 4; → 6
x %= 4; // x = x % 4; → 2
x **= 3; // x = x ** 3; → 8Increment and decrement
let count = 0;
count++; // Returns count, then increments (postfix)
++count; // Increments, then returns count (prefix)
count--; // Returns count, then decrements
--count; // Decrements, then returns countThe difference matters when you use the result:
let a = 5;
console.log(a++); // 5 (returns old value, then increments)
console.log(a); // 6
let b = 5;
console.log(++b); // 6 (increments, then returns new value)
console.log(b); // 605
Quick reference
| Operator category | Operators | Key rule |
|---|---|---|
| Arithmetic | +, -, *, /, %, ** | + concatenates strings, use template literals to be safe |
| Comparison | ===, !==, >, <, >=, <= | Always use ===, never == |
| Logical | &&, ||, !, ?? | || checks falsy; ?? checks only null/undefined |
| Assignment | =, +=, -=, *=, /= | Compound operators modify in place |
| Increment | ++, -- | Prefix returns new value; postfix returns old value |
javascript
// Arithmetic
const price = 100;
const taxRate = 0.08;
const quantity = 3;
const subtotal = price * quantity;
const tax = subtotal * taxRate;
const total = subtotal + tax;
console.log(`Total: $${total.toFixed(2)}`); // "Total: $324.00"
// Comparison
const age = 25;
const hasID = true;
const canEnter = age >= 18 && hasID;
console.log(canEnter); // true
// Strict equality
console.log(5 === "5"); // false
console.log(5 === 5); // true
// Logical operators
const isWeekend = true;
const isHoliday = false;
const isOpen = isWeekend || isHoliday;
console.log(isOpen); // true
// Short-circuit for defaults
const username = null;
const displayName = username || "Anonymous";
console.log(displayName); // "Anonymous"