Operators & Expressions
Master the tools of logic and computation. From basic arithmetic to advanced bitwise flags and logical assignments, understand how to manipulate data with precision.
Arithmetic & Assignment
Arithmetic operators perform mathematical calculations, while assignment operators store the results. Modern JavaScript includes the Exponentiationoperator and Logical Assignment.
// Arithmetic & Modern Assignments
let score = 10;
score += 5; // 15
score **= 2; // 225 (Exponentiation)
// Modulus: Critical for cycling and parity
const isEven = (n) => n % 2 === 0;
console.log(10 % 3); // 1 (Remainder)Comparison: The Strictness Standard
Comparing values is fundamental to logic. In professional environments,Strict Equality (===) is the non-negotiable standard to avoid the "Silent Coercion" bugs associated with ==.
// Strict vs Loose Comparison
console.log(5 === '5'); // false (Strict - checks type)
console.log(5 == '5'); // true (Loose - triggers coercion)
// Relational operators with strings (Lexicographical)
console.log('apple' < 'banana'); // true
console.log('2' < '10'); // false (String '2' is greater than '1')'2' > '10' is true; '2' has a higher Unicode value than '1'.Logical Operators & Short-Circuiting
JavaScript engines use Short-Circuit evaluation. This means they stop evaluating a boolean expression as soon as the result is determined. This is widely used for safety checks and default values.
// Short-Circuit Evaluation
// && returns first falsy or last truthy
const user = { name: 'Alice' };
const displayName = user && user.name; // 'Alice'
// || returns first truthy or last falsy (Useful for defaults)
const theme = userTheme || 'dark';
// Logical Assignment (ES2021)
let x = 0;
x ||= 10; // 10 (because 0 is falsy)
x &&= 20; // 20 (because 10 is truthy)
x ??= 30; // 20 (because 20 is not null/undefined)The Nullish Coalescing Operator (??)
Released in ES2020, ?? specifically checks for null orundefined. It is superior to || when dealing with valid "falsy" values like 0 or empty strings "".
// Nullish Coalescing (??) vs Logical OR (||)
const count = 0;
const val1 = count || 10; // 10 (Problem: 0 is falsy)
const val2 = count ?? 10; // 0 (Correct: 0 is not null/undefined)
// Use ?? for settings where 0 or "" are valid entries.High-Performance Bitwise Logic
Bitwise operators treat their operands as a set of 32 bits (zeros and ones). While less common in UI development, they are critical for Game Engines,Cryptography, and Binary Protocol Parsing.
// Bitwise for Performance & Flags
// Read (4: 100), Write (2: 010), Execute (1: 001)
const READ = 4, WRITE = 2, EXEC = 1;
let myPerms = READ | WRITE; // 6 (110)
const canWrite = (myPerms & WRITE) === WRITE; // true
// Fast Floor (Bitwise double NOT)
console.log(~~4.9); // 4 (Faster than Math.floor for positive numbers)Operator Precedence
Precedence determines the order in which operators are parsed. Use the "Associativity" rule to understand which operations happen first if precedence is equal.
// The Precedence Table in Action
console.log(2 + 3 * 4); // 14 (* higher than +)
console.log((2 + 3) * 4); // 20 (Group highest)
// Right-to-Left Associativity for Exponentiation
console.log(2 ** 3 ** 2); // 512 (evaluates 3^2 first, then 2^9)| Level | Operator Category | Associativity |
|---|---|---|
| 1 (Highest) | Grouping () | N/A |
| 12 | Multiplication * / % | Left-to-right |
| 13 | Addition + - | Left-to-right |
| 16 | Logical AND && | Left-to-right |
Best Practices:
- ✅ Prefer
===: Eliminate coercion side-effects. - ✅ Use
??for Settings: Don't let 0 or "" trigger defaults incorrectly. - ✅ Parentheses for Clarity: Even if you know precedence, use
()to help other developers. - ✅ Logical Assignment: Use
||=and??=for cleaner state updates. - ✅ Unary Plus casting: Use
+valuefor quick numeric conversion.