|$ curl https://forge-ai.dev/api/markdown?path=docs/js/operators
$cat docs/javascript-—-operators-&-expressions.md
updated This week·30 min read·published
JavaScript — Operators & Expressions
Introduction
Operators are symbols that perform operations on operands — values, variables, or expressions. JavaScript provides a comprehensive set of operators spanning arithmetic, comparison, logical, bitwise, assignment, and special-purpose operators. Understanding how each operator works and its precedence in the evaluation order is essential for writing correct expressions.
JavaScript operators can be classified by their arity (unary, binary, ternary) and by their function (arithmetic, comparison, logical, etc.). While most operators are straightforward, JavaScript has several unique behaviors — loose equality coercion, short-circuit evaluation, and the distinction between the nullish coalescing and logical OR operators — that require careful attention.
This page covers every major operator category, the operator precedence table, and the modern operators introduced in ES2020+.
expressions-intro.js
JavaScript
| 1 | // An expression produces a value |
| 2 | 42; // number literal expression |
| 3 | 2 + 3; // arithmetic expression |
| 4 | a > b ? a : b; // ternary expression |
| 5 | x && y; // logical expression |
| 6 | |
| 7 | // Operators combine expressions |
| 8 | const result = (5 + 3) * 2 ** 3 / 4 - 1; |
| 9 | console.log(result); // 15 |
Arithmetic Operators
Arithmetic operators perform mathematical calculations. JavaScript follows standard math rules with some unique behaviors around type coercion and special numeric values.
| Operator | Name | Example | Result |
|---|---|---|---|
| + | Addition | 5 + 3 | 8 |
| - | Subtraction | 5 - 3 | 2 |
| * | Multiplication | 5 * 3 | 15 |
| / | Division | 5 / 3 | 1.666... |
| % | Remainder (Modulo) | 5 % 3 | 2 |
| ** | Exponentiation | 2 ** 4 | 16 |
| ++ | Increment | let x=1; x++ | 1 (returns), 2 (after) |
| -- | Decrement | let x=1; x-- | 1 (returns), 0 (after) |
| + (unary) | Unary Plus | +"42" | 42 |
| - (unary) | Unary Negation | -"5" | -5 |
arithmetic.js
JavaScript
| 1 | // Basic arithmetic |
| 2 | console.log(10 + 5); // 15 |
| 3 | console.log(10 - 5); // 5 |
| 4 | console.log(10 * 5); // 50 |
| 5 | console.log(10 / 3); // 3.3333333333333335 |
| 6 | console.log(10 % 3); // 1 (remainder) |
| 7 | console.log(2 ** 10); // 1024 (exponentiation) |
| 8 | |
| 9 | // Remainder % with negatives — result takes sign of dividend |
| 10 | console.log(-5 % 3); // -2 |
| 11 | console.log(5 % -3); // 2 |
| 12 | |
| 13 | // Increment/decrement — prefix vs postfix |
| 14 | let a = 0; |
| 15 | console.log(a++); // 0 (post-increment: returns old value) |
| 16 | console.log(a); // 1 |
| 17 | |
| 18 | let b = 0; |
| 19 | console.log(++b); // 1 (pre-increment: returns new value) |
| 20 | console.log(b); // 1 |
| 21 | |
| 22 | // Unary plus — converts to number |
| 23 | console.log(+"42"); // 42 |
| 24 | console.log(+true); // 1 |
| 25 | console.log(+null); // 0 |
| 26 | console.log(+"hello"); // NaN |
| 27 | |
| 28 | // The + operator is overloaded — addition OR concatenation |
| 29 | console.log(1 + 2); // 3 (addition) |
| 30 | console.log("1" + 2); // "12" (string concatenation) |
| 31 | console.log(1 + "2"); // "12" |
| 32 | console.log(1 + 2 + "3"); // "33" (1+2=3, then 3+"3"="33") |
| 33 | console.log("1" + 2 + 3); // "123" (left to right) |
| 34 | |
| 35 | // Other arithmetic operators always coerce to numbers |
| 36 | console.log("10" - 2); // 8 |
| 37 | console.log("10" * "2"); // 20 |
| 38 | console.log("10" / 2); // 5 |
ℹ
info
The + operator is the only arithmetic operator that does string concatenation. All other arithmetic operators (-, *, /, %, **) coerce both operands to numbers. Use unary + for explicit numeric conversion.
Comparison Operators
Comparison operators compare values and return a boolean. The choice between strict (===, !==) and loose (==, !=) equality is one of the most important decisions in JavaScript programming.
| Operator | Name | Example | Result |
|---|---|---|---|
| === | Strict equality | 5 === "5" | false |
| == | Loose equality | 5 == "5" | true (coerces) |
| !== | Strict inequality | 5 !== "5" | true |
| != | Loose inequality | 5 != "5" | false (coerces) |
| > | Greater than | 5 > 3 | true |
| >= | Greater than or equal | 5 >= 5 | true |
| < | Less than | 3 < 5 | true |
| <= | Less than or equal | 4 <= 5 | true |
comparison.js
JavaScript
| 1 | // Strict equality — compares value AND type (RECOMMENDED) |
| 2 | console.log(5 === 5); // true |
| 3 | console.log(5 === "5"); // false — different types |
| 4 | console.log(0 === false); // false |
| 5 | console.log("" === false); // false |
| 6 | console.log(null === undefined); // false |
| 7 | console.log(5 !== "5"); // true |
| 8 | |
| 9 | // Loose equality — coerces types before comparing (AVOID) |
| 10 | console.log(5 == "5"); // true |
| 11 | console.log(0 == false); // true |
| 12 | console.log("" == false); // true |
| 13 | console.log(null == undefined); // true (special case) |
| 14 | |
| 15 | // Loose equality quirks — reasons to use === |
| 16 | console.log([] == false); // true ([] → "" → 0 → false) |
| 17 | console.log([1] == 1); // true ([1] → "1" → 1) |
| 18 | console.log([1,2] == "1,2"); // true |
| 19 | console.log("\t" == 0); // true (whitespace string → 0) |
| 20 | console.log("\n" == 0); // true |
| 21 | |
| 22 | // Object comparison — references compared, not values |
| 23 | console.log({} === {}); // false |
| 24 | console.log([] === []); // false |
| 25 | console.log([1,2] === [1,2]); // false |
| 26 | |
| 27 | // Relational operators — coerce to numbers or strings |
| 28 | console.log("apple" < "banana"); // true — lexicographic string comparison |
| 29 | console.log("2" > 10); // false — "2" coerces to 2 |
| 30 | console.log("abc" > 0); // false — NaN comparison fails |
| 31 | console.log(NaN > 0); // false |
| 32 | console.log(NaN < 0); // false |
| 33 | console.log(NaN == NaN); // false (I) |
| 34 | |
| 35 | // SameValueZero (used by Array.includes, Map, Set) |
| 36 | console.log(Object.is(NaN, NaN)); // true (SameValue) |
| 37 | console.log([1, NaN].includes(NaN)); // true (SameValueZero) |
| 38 | console.log([1, -0].includes(0)); // true (SameValueZero) |
⚠
warning
The rule is simple: always use === and !==. The only exception is checking for null and undefined simultaneously — value == null is true for both. But even then, being explicit with value === null || value === undefined is clearer.
Logical Operators & Short-Circuit Evaluation
Logical operators work with boolean values but return the actual value of one of the operands, not necessarily a boolean. They use short-circuit evaluation — the right operand is evaluated only if necessary. This behavior is commonly used for conditional execution and default values.
| Operator | Name | Short-Circuits When | Returns |
|---|---|---|---|
| && | Logical AND | Left is falsy | First falsy value, or last truthy value |
| || | Logical OR | Left is truthy | First truthy value, or last falsy value |
| ?? | Nullish Coalescing | Left is not null/undefined | Left if not null/undefined, else right |
| ! | Logical NOT | N/A (unary) | Always boolean (inverts truthiness) |
| !! | Double NOT | N/A (unary) | Coerces to boolean (no inversion) |
logical.js
JavaScript
| 1 | // Logical AND (&&) — returns first falsy OR last truthy |
| 2 | console.log(true && "hello"); // "hello" (both truthy → last value) |
| 3 | console.log(1 && 2 && 3); // 3 (all truthy → last) |
| 4 | console.log(0 && "hello"); // 0 (first falsy) |
| 5 | console.log(null && "world"); // null (first falsy) |
| 6 | |
| 7 | // Common pattern: guard operator |
| 8 | const user = { name: "Alice" }; |
| 9 | user && console.log(user.name); // "Alice" (only runs if user exists) |
| 10 | |
| 11 | // Logical OR (||) — returns first truthy OR last falsy |
| 12 | console.log(null || "default"); // "default" (null is falsy) |
| 13 | console.log(0 || 42); // 42 (0 is falsy) |
| 14 | console.log("" || "fallback"); // "fallback" |
| 15 | console.log("hello" || "world"); // "hello" (first truthy — short-circuits) |
| 16 | |
| 17 | // Common pattern: default values (but watch out for falsy!) |
| 18 | const count = 0; |
| 19 | console.log(count || 10); // 10 — 0 is falsy, so gets default! |
| 20 | console.log(count ?? 10); // 0 — only null/undefined trigger default |
| 21 | |
| 22 | // Short-circuit evaluation in action |
| 23 | function expensive() { |
| 24 | console.log("expensive called"); |
| 25 | return true; |
| 26 | } |
| 27 | |
| 28 | false && expensive(); // expensive() NEVER called — short-circuits |
| 29 | true || expensive(); // expensive() NEVER called — short-circuits |
| 30 | |
| 31 | // Chaining logical operators |
| 32 | const name = user && user.profile && user.profile.name || "Anonymous"; |
| 33 | // Better with optional chaining: |
| 34 | const name2 = user?.profile?.name ?? "Anonymous"; |
| 35 | |
| 36 | // Logical NOT (!) — always returns boolean |
| 37 | console.log(!true); // false |
| 38 | console.log(!0); // true |
| 39 | console.log(!""); // true |
| 40 | console.log(!{}); // false (object is truthy) |
| 41 | |
| 42 | // Double NOT (!!) — coerces to boolean |
| 43 | console.log(!!1); // true |
| 44 | console.log(!!0); // false |
| 45 | console.log(!!""); // false |
| 46 | console.log(!!"hello"); // true |
Logical Assignment Operators (ES2021)
logical-assignment.js
JavaScript
| 1 | // Logical assignment — combine logical operators with assignment |
| 2 | // ES2021 — supported in all modern environments |
| 3 | |
| 4 | let a = 0; |
| 5 | a ||= 10; // a = a || 10 — assigns if a is falsy |
| 6 | console.log(a); // 10 |
| 7 | |
| 8 | let b = 1; |
| 9 | b &&= 10; // b = b && 10 — assigns if a is truthy |
| 10 | console.log(b); // 10 |
| 11 | |
| 12 | let c = null; |
| 13 | c ??= 10; // c = c ?? 10 — assigns if a is null/undefined |
| 14 | console.log(c); // 10 |
| 15 | |
| 16 | // Practical examples |
| 17 | let config = {}; |
| 18 | config.timeout ??= 3000; // only set if missing |
| 19 | config.retries ??= 3; |
| 20 | |
| 21 | let userSettings = {}; |
| 22 | userSettings.theme ||= "light"; // set default |
| 23 | |
| 24 | let isValid = true; |
| 25 | isValid &&= validateForm(); // only validate if already valid |
✓
best practice
Understand the difference between || and ??. The || operator treats all falsy values (0, "", false, null, undefined, NaN) as false. The ?? operator only treats null and undefined as false. Use ?? for default values when 0 or "" are valid inputs.
Nullish Coalescing & Optional Chaining
Introduced in ES2020, the nullish coalescing operator (??) and optional chaining operator (?.) together eliminate an entire category of null-checking boilerplate. They are among the most impactful modern JavaScript features.
nullish-optional.js
JavaScript
| 1 | // Nullish coalescing (??) — default only for null/undefined |
| 2 | const value = 0; |
| 3 | console.log(value || 10); // 10 (0 is falsy — unexpected default) |
| 4 | console.log(value ?? 10); // 0 (0 is not null/undefined — correct) |
| 5 | |
| 6 | const empty = ""; |
| 7 | console.log(empty || "fallback"); // "fallback" |
| 8 | console.log(empty ?? "fallback"); // "" |
| 9 | |
| 10 | const isFalse = false; |
| 11 | console.log(isFalse || true); // true |
| 12 | console.log(isFalse ?? true); // false |
| 13 | |
| 14 | // ?? cannot be chained with && or || without parentheses |
| 15 | // console.log(null || undefined ?? "default"); // SyntaxError |
| 16 | console.log((null || undefined) ?? "default"); // "default" |
| 17 | console.log(null || (undefined ?? "default")); // "default" |
| 18 | |
| 19 | // Optional chaining (?.) — safe property access |
| 20 | const data = { |
| 21 | user: { |
| 22 | // address is missing |
| 23 | }, |
| 24 | }; |
| 25 | |
| 26 | // Without optional chaining — verbose |
| 27 | const city = data && data.user && data.user.address && data.user.address.city; |
| 28 | |
| 29 | // With optional chaining — clean |
| 30 | const city2 = data?.user?.address?.city; |
| 31 | console.log(city2); // undefined — no error |
| 32 | |
| 33 | // Optional method call |
| 34 | const result = obj?.method?.(); |
| 35 | console.log(data?.nonexistent?.()); // undefined |
| 36 | |
| 37 | // Optional dynamic property access |
| 38 | const key = "address"; |
| 39 | console.log(data?.user?.[key]?.city); |
| 40 | |
| 41 | // Optional chaining with delete |
| 42 | delete data?.user?.address; |
| 43 | |
| 44 | // Short-circuiting — stops at first null/undefined |
| 45 | data?.user?.profile?.name?.toUpperCase(); |
| 46 | // If data, user, profile, or name is null/undefined → undefined |
🔥
pro tip
Optional chaining and nullish coalescing work together perfectly: data?.user?.name ?? "Anonymous". The first part safely accesses deeply nested properties, and the second provides a fallback if the result is null or undefined. This pattern replaces the vast majority of manual null checks.
Bitwise Operators
Bitwise operators treat operands as 32-bit signed integers and perform operations at the binary level. They are rarely used in everyday JavaScript but are essential for low-level programming, flags/enums, performance-critical binary operations, and certain algorithms.
| Operator | Name | Example | Binary Result |
|---|---|---|---|
| & | AND | 5 & 3 | 1 (0101 & 0011 = 0001) |
| | | OR | 5 | 3 | 7 (0101 | 0011 = 0111) |
| ^ | XOR | 5 ^ 3 | 6 (0101 ^ 0011 = 0110) |
| ~ | NOT | ~5 | -6 (inverts all bits) |
| << | Left shift | 5 << 1 | 10 (0101 → 1010) |
| >> | Sign-propagating right shift | -5 >> 1 | -3 (preserves sign) |
| >>> | Zero-fill right shift | -5 >>> 1 | 2147483645 (unsigned) |
bitwise.js
JavaScript
| 1 | // Bitwise AND, OR, XOR |
| 2 | console.log(5 & 3); // 1 (0101 & 0011 = 0001) |
| 3 | console.log(5 | 3); // 7 (0101 | 0011 = 0111) |
| 4 | console.log(5 ^ 3); // 6 (0101 ^ 0011 = 0110) |
| 5 | console.log(~5); // -6 (inverts all bits) |
| 6 | |
| 7 | // Bitwise shifts |
| 8 | console.log(5 << 1); // 10 (multiply by 2) |
| 9 | console.log(5 << 2); // 20 (multiply by 4) |
| 10 | console.log(16 >> 1); // 8 (divide by 2) |
| 11 | console.log(16 >> 2); // 4 (divide by 4) |
| 12 | console.log(-16 >> 1); // -8 (sign-preserving) |
| 13 | |
| 14 | // Practical: flag/enum pattern |
| 15 | const PERMISSION_READ = 1; // 001 |
| 16 | const PERMISSION_WRITE = 2; // 010 |
| 17 | const PERMISSION_EXEC = 4; // 100 |
| 18 | |
| 19 | let permissions = PERMISSION_READ | PERMISSION_WRITE; // 011 |
| 20 | console.log(permissions & PERMISSION_READ); // 1 (has read) |
| 21 | console.log(permissions & PERMISSION_EXEC); // 0 (no exec) |
| 22 | |
| 23 | // Toggle a flag |
| 24 | permissions ^= PERMISSION_WRITE; // remove write |
| 25 | console.log(permissions & PERMISSION_WRITE); // 0 |
| 26 | |
| 27 | // Practical: double bitwise NOT for fast floor |
| 28 | console.log(~~3.14); // 3 (faster than Math.floor for positives) |
| 29 | console.log(~~-3.14); // -3 (Math.floor would give -4!) |
| 30 | console.log(Math.floor(-3.14)); // -4 |
| 31 | |
| 32 | // Practical: check if number is odd/even |
| 33 | console.log(5 & 1); // 1 (odd) |
| 34 | console.log(4 & 1); // 0 (even) |
| 35 | |
| 36 | // Note: bitwise operators work on 32-bit signed integers |
| 37 | // Numbers are converted to 32-bit, operated on, then converted back |
| 38 | console.log(~0); // -1 |
| 39 | console.log(~-1); // 0 |
Special Operators
typeof, void, delete, instanceof, in
special-operators.js
JavaScript
| 1 | // typeof — returns type as string |
| 2 | console.log(typeof 42); // "number" |
| 3 | console.log(typeof "hello"); // "string" |
| 4 | console.log(typeof true); // "boolean" |
| 5 | console.log(typeof undefined); // "undefined" |
| 6 | console.log(typeof null); // "object" (legacy bug) |
| 7 | console.log(typeof Symbol()); // "symbol" |
| 8 | console.log(typeof 42n); // "bigint" |
| 9 | console.log(typeof function(){}); // "function" |
| 10 | |
| 11 | // void — evaluates expression and returns undefined |
| 12 | console.log(void 0); // undefined |
| 13 | console.log(void(42)); // undefined |
| 14 | // Used to prevent default actions in HTML: |
| 15 | // <a href="javascript:void(0)">Click</a> |
| 16 | // In frameworks: prevents navigation for click handlers |
| 17 | |
| 18 | // delete — removes property from object |
| 19 | const obj = { a: 1, b: 2, c: 3 }; |
| 20 | delete obj.b; |
| 21 | console.log(obj); // { a: 1, c: 3 } |
| 22 | |
| 23 | delete obj.a; |
| 24 | console.log(obj); // { c: 3 } |
| 25 | |
| 26 | // delete returns true if successful |
| 27 | console.log(delete obj.c); // true |
| 28 | console.log(delete obj.nonexistent); // true |
| 29 | |
| 30 | // Cannot delete local variables, functions, or built-in objects |
| 31 | let x = 5; |
| 32 | console.log(delete x); // false (in strict mode: TypeError) |
| 33 | |
| 34 | // delete only works on object properties |
| 35 | delete obj.__proto__; // cannot delete inherited properties |
| 36 | |
| 37 | // instanceof — checks prototype chain |
| 38 | console.log([] instanceof Array); // true |
| 39 | console.log({} instanceof Object); // true |
| 40 | console.log(new Date() instanceof Date); // true |
| 41 | class Animal {} |
| 42 | const dog = new Animal(); |
| 43 | console.log(dog instanceof Animal); // true |
| 44 | console.log(dog instanceof Object); // true |
| 45 | |
| 46 | // in — checks if property exists in object (including prototype) |
| 47 | console.log("toString" in {}); // true (inherited) |
| 48 | console.log("a" in {a:1}); // true |
| 49 | console.log("b" in {a:1}); // false |
| 50 | |
| 51 | // in with arrays — checks index, not value |
| 52 | const arr = [10, 20, 30]; |
| 53 | console.log(0 in arr); // true (index 0 exists) |
| 54 | console.log(3 in arr); // false (index 3 doesn't exist) |
| 55 | console.log("length" in arr); // true |
Comma Operator
The comma operator evaluates each of its operands left to right and returns the value of the last operand. It is rarely necessary but occasionally useful in specific patterns.
comma-operator.js
JavaScript
| 1 | // Comma operator — evaluates both, returns last |
| 2 | const result = (1, 2, 3); |
| 3 | console.log(result); // 3 |
| 4 | |
| 5 | // Side effects with comma |
| 6 | let a = 0, b = 0; |
| 7 | const val = (a++, b++, a + b); |
| 8 | console.log(val); // 2 (a=1, b=1, 1+1=2) |
| 9 | |
| 10 | // Practical: for loop with multiple counters |
| 11 | for (let i = 0, j = 10; i < j; i++, j--) { |
| 12 | console.log(i, j); |
| 13 | } |
| 14 | |
| 15 | // Practical: arrow function with side effects |
| 16 | const getNextId = (() => { |
| 17 | let id = 0; |
| 18 | return () => (id++, id); |
| 19 | })(); |
| 20 | console.log(getNextId()); // 1 |
| 21 | console.log(getNextId()); // 2 |
| 22 | |
| 23 | // Comma in ternary (use sparingly — often hurts readability) |
| 24 | const x = condition |
| 25 | ? (doThis(), doThat(), "done") |
| 26 | : (fallbackThis(), "fallback"); |
Grouping Operator
grouping.js
JavaScript
| 1 | // Parentheses — control evaluation order |
| 2 | console.log(2 + 3 * 4); // 14 (multiplication first) |
| 3 | console.log((2 + 3) * 4); // 20 (addition first) |
| 4 | |
| 5 | // Overriding precedence |
| 6 | const average = (a + b + c) / 3; |
| 7 | |
| 8 | // IIFE — parentheses around function expression |
| 9 | (function() { |
| 10 | console.log("IIFE"); |
| 11 | })(); |
| 12 | |
| 13 | // Readability — clarify complex expressions |
| 14 | const isValid = (age >= 18) && (hasLicense || isStudent); |
| 15 | // Without parens: same result but harder to parse |
Operator Precedence
Operator precedence determines the order in which operators are evaluated in expressions. Operators with higher precedence are evaluated first. When operators have the same precedence, associativity (left-to-right or right-to-left) determines the evaluation order.
| Precedence | Operator | Associativity |
|---|---|---|
| 19 | () Grouping | n/a |
| 18 | . [] ?.() | left-to-right |
| 17 | new (with args) . | n/a |
| 16 | ! ~ + - typeof void delete | right-to-left |
| 15 | ** | right-to-left |
| 14 | * / % | left-to-right |
| 13 | + - | left-to-right |
| 12 | << >> >>> | left-to-right |
| 11 | < <= > >= in instanceof | left-to-right |
| 10 | == != === !== | left-to-right |
| 9 | & | left-to-right |
| 8 | ^ | left-to-right |
| 7 | | | left-to-right |
| 6 | && | left-to-right |
| 5 | || | left-to-right |
| 4 | ?? | right-to-left |
| 3 | ? : (ternary) | right-to-left |
| 2 | = += -= **= ||= ??= etc. | right-to-left |
| 1 | , (comma) | left-to-right |
precedence.js
JavaScript
| 1 | // Understanding precedence with real examples |
| 2 | console.log(2 + 3 * 4); // 14 (* has higher precedence than +) |
| 3 | console.log((2 + 3) * 4); // 20 (() overrides precedence) |
| 4 | |
| 5 | // Chaining with same precedence (left-to-right) |
| 6 | console.log(16 / 4 / 2); // 2 (left-to-right: (16/4)/2 = 2) |
| 7 | console.log(16 / (4 / 2)); // 8 (parentheses change it) |
| 8 | |
| 9 | // Assignment is right-to-left |
| 10 | let a, b, c; |
| 11 | a = b = c = 5; |
| 12 | // Evaluated as: a = (b = (c = 5)) |
| 13 | console.log(a, b, c); // 5, 5, 5 |
| 14 | |
| 15 | // Exponentiation is right-to-left |
| 16 | console.log(2 ** 3 ** 2); // 512 (2^(3^2) = 2^9 = 512) |
| 17 | console.log((2 ** 3) ** 2); // 64 ((2^3)^2 = 8^2 = 64) |
| 18 | |
| 19 | // Logical operators — && before || |
| 20 | console.log(true || false && false); |
| 21 | // Evaluated as: true || (false && false) → true || false → true |
| 22 | |
| 23 | // ?? cannot directly mix with && or || |
| 24 | // console.log(null && undefined ?? "default"); // SyntaxError |
| 25 | console.log(null && (undefined ?? "default")); // null (&& short-circuits) |
| 26 | |
| 27 | // Ternary is right-to-left (nested ternary — avoid for readability) |
| 28 | const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C"; |
| 29 | // Evaluated as: score >= 90 ? "A" : (score >= 80 ? "B" : "C") |
| 30 | |
| 31 | // Best practice: use parentheses for clarity |
| 32 | const result = (a + b) * (c - d) / (e || 1); |
✓
best practice
You do not need to memorize the precedence table. When in doubt, use parentheses (). They cost nothing in readability and ensure your intent is clear. Complex expressions without parentheses are a maintenance burden — your future self and colleagues will thank you.
Assignment Operators
assignment.js
JavaScript
| 1 | // Basic assignment |
| 2 | let x = 10; |
| 3 | |
| 4 | // Compound assignment — applies operator then assigns |
| 5 | x += 5; // x = x + 5 → 15 |
| 6 | x -= 3; // x = x - 3 → 12 |
| 7 | x *= 2; // x = x * 2 → 24 |
| 8 | x /= 4; // x = x / 4 → 6 |
| 9 | x %= 2; // x = x % 2 → 0 |
| 10 | x **= 3; // x = x ** 3 → 0 (0**3 = 0) |
| 11 | x = 5; |
| 12 | x <<= 1; // x = x << 1 → 10 |
| 13 | x >>= 1; // x = x >> 1 → 5 |
| 14 | x >>>= 1; // x = x >>> 1 → 2 |
| 15 | x &= 3; // x = x & 3 → 1 |
| 16 | x |= 2; // x = x | 2 → 3 |
| 17 | x ^= 1; // x = x ^ 1 → 2 |
| 18 | |
| 19 | // Logical assignment (ES2021) |
| 20 | let a = null; |
| 21 | a ??= "default"; // assigns only if null/undefined |
| 22 | |
| 23 | let b = 0; |
| 24 | b ||= 10; // assigns only if falsy |
| 25 | |
| 26 | let c = true; |
| 27 | c &&= "set"; // assigns only if truthy |
| 28 | |
| 29 | // Destructuring assignment |
| 30 | const [first, second] = [10, 20]; |
| 31 | const { name, age } = { name: "Alice", age: 30 }; |
Operator Best Practices
◆Always use === and !== — never use == or != which coerce types silently
◆Use ?? for default values instead of || when 0 or empty string are valid values
◆Use optional chaining ?. for safe deep property access — replace nested && checks
◆Use parentheses to clarify complex expressions — readability over cleverness
◆Avoid nested ternaries — they are hard to read. Use if/else or switch instead
◆Use unary + for explicit numeric conversion — it's concise and clear
◆Understand short-circuit evaluation — && runs the right side only if left is truthy
◆Prefer logical assignment (||=, &&=, ??=) for cleaner conditional assignment
◆Avoid the comma operator in most code — it usually hurts readability
◆Use ~~ only when you specifically need 32-bit integer truncation, not Math.floor()
🔥
pro tip
The most common operator mistake in JavaScript: using = instead of === in conditions (e.g., if (x = 5) instead of if (x === 5)). Use a linter (ESLint with no-cond-assign) to catch this automatically. This one rule prevents more bugs than almost any other.
$Blueprint — Engineering Documentation·Section ID: JS-OPS·Revision: 1.0
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.