Operators perform operations on values. JavaScript has a rich set of operators for math, comparison, logic, and more. Mastering them is essential for writing any meaningful code.
1let a = 10, b = 3;23console.log(a + b); // 13 (addition)4console.log(a - b); // 7 (subtraction)5console.log(a * b); // 30 (multiplication)6console.log(a / b); // 3.333... (division)7console.log(a % b); // 1 (modulus - remainder)8console.log(a ** b); // 1000 (exponentiation - 10³)910// Increment / Decrement11let x = 5;12console.log(x++); // 5 (returns, THEN increments)13console.log(x); // 614console.log(++x); // 7 (increments, THEN returns)15console.log(x--); // 7 (returns, THEN decrements)16console.log(x); // 6
| Operator | Name | Example | Result |
|---|---|---|---|
+ | Addition | 5 + 3 | 8 |
- | Subtraction | 5 - 3 | 2 |
* | Multiplication | 5 * 3 | 15 |
/ | Division | 10 / 3 | 3.33... |
% | Modulus | 10 % 3 | 1 |
** | Exponentiation | 2 ** 3 | 8 |
Modulus Use Cases
The % operator is great for checking even/odd (n % 2 === 0), wrapping values (index % array.length), and cycling through options.
1let x = 10;23x += 5; // x = x + 5 → 154x -= 3; // x = x - 3 → 125x *= 2; // x = x * 2 → 246x /= 4; // x = x / 4 → 67x %= 4; // x = x % 4 → 28x **= 3; // x = x ** 3 → 8910console.log(x); // 8
1console.log(5 > 3); // true2console.log(5 < 3); // false3console.log(5 >= 5); // true4console.log(5 <= 4); // false56// Equality7console.log(5 == "5"); // true (loose - coerces types)8console.log(5 === "5"); // false (strict - no coercion)9console.log(5 != "5"); // false (loose not-equal)10console.log(5 !== "5"); // true (strict not-equal)
Always Use === and !==
Strict equality prevents type coercion bugs. Use === and !== by default.
1// AND (&&) - both must be true2console.log(true && true); // true3console.log(true && false); // false45// OR (||) - at least one must be true6console.log(false || true); // true7console.log(false || false); // false89// NOT (!) - inverts the value10console.log(!true); // false11console.log(!false); // true12console.log(!0); // true (0 is falsy)13console.log(!""); // true ("" is falsy)1415// Double NOT (!!) converts to boolean16console.log(!!"hello"); // true17console.log(!!0); // false
Logical operators don't always evaluate both sides:
1// && returns the first falsy value, or the last value2console.log("hello" && 42); // 42 (both truthy, returns last)3console.log(0 && "hello"); // 0 (first is falsy, returns it)4console.log("a" && "b" && "c"); // "c"56// || returns the first truthy value, or the last value7console.log("" || "default"); // "default"8console.log(null || undefined || 0); // 0 (all falsy, returns last)910// Practical: default values11const username = userInput || "Guest";1213// ?? (Nullish coalescing) - only checks null/undefined14const count = 0;15console.log(count || 10); // 10 (0 is falsy)16console.log(count ?? 10); // 0 (0 is NOT null/undefined)
|| vs ??
Use ?? instead of || when 0, "", or false are valid values. || treats all falsy values as "missing", while ?? only treats null and undefined as "missing".
A shorthand for if/else:
1const age = 20;2const status = age >= 18 ? "Adult" : "Minor";3console.log(status); // "Adult"45// Nested (avoid for readability)6const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
1// Concatenation with +2const first = "Hello";3const second = "World";4console.log(first + " " + second); // "Hello World"56// Template literal (preferred)7console.log(`${first} ${second}`); // "Hello World"89// += for appending10let message = "Hello";11message += " World";12console.log(message); // "Hello World"
Safely access nested properties without crashing:
1const user = {2name: "Alice",3address: { city: "NYC" }4};56console.log(user.address.city); // "NYC"7console.log(user.phone?.number); // undefined (no error!)8// Without ?.: user.phone.number → TypeError!910// Works with methods too11console.log(user.greet?.()); // undefined12console.log([1,2,3]?.[5]); // undefined
1// Spread (...) - expands arrays/objects2const nums = [1, 2, 3];3const more = [...nums, 4, 5]; // [1, 2, 3, 4, 5]45const obj = { a: 1, b: 2 };6const extended = { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 }78// Rest (...) - collects remaining arguments9function sum(...numbers) {10return numbers.reduce((total, n) => total + n, 0);11}12console.log(sum(1, 2, 3, 4)); // 10
1function calculatePrice(price, discount = 0, taxRate = 0.08) {2const discountAmount = price * (discount / 100);3const subtotal = price - discountAmount;4const tax = subtotal * taxRate;5const total = subtotal + tax;67return {8original: price,9discount: discountAmount,10tax: tax.toFixed(2),11total: total.toFixed(2),12saved: discountAmount > 0 ? `You saved $${discountAmount.toFixed(2)}!` : null,13};14}1516const result = calculatePrice(100, 20);17console.log(result);18// { original: 100, discount: 20, tax: "6.40", total: "86.40", saved: "You saved $20.00!" }
With operators mastered, let's dive deep into strings and string methods - one of the most commonly used data types in any application.