Operators

Interactive Visualization

Key Points

• Arithmetic: + - * / % ** (exponentiation)
• Comparison: == (loose) vs === (strict)
• Logical: && (and) || (or) ! (not)
• && returns first falsy or last value, || returns first truthy or last value
• Nullish coalescing: ?? returns right side only if left is null/undefined

Code Examples

let a = 10, b = 3;

a + b   // 13 (addition)
a - b   // 7  (subtraction)
a * b   // 30 (multiplication)
a / b   // 3.333... (division)
a % b   // 1  (remainder)
a ** b  // 1000 (exponentiation: 10³)

// Loose equality (==) converts types
"5" == 5       // true (string becomes number)
0 == false     // true (both become 0)
null == undefined // true (special case)

// Strict equality (===) no conversion
"5" === 5      // false (different types)
0 === false    // false (different types)

// ALWAYS use === !

// && returns first falsy OR last value
true && "hello"   // "hello"
false && "hello"  // false
0 && "hello"      // 0

// || returns first truthy OR last value
false || "hello"  // "hello"
"" || "default"   // "default"
"hi" || "default" // "hi"

// ?? returns right only if left is null/undefined
null ?? "default"  // "default"
0 ?? "default"     // 0 (0 is not null!)

Common Mistakes

• Using == instead of === (causes type coercion bugs)
• Forgetting && and || return actual values, not booleans
• Confusing || with ?? (|| checks falsy, ?? checks null/undefined)

Interview Tips

• Always explain why === is preferred over ==
• Know the short-circuit behavior of && and ||
• Demonstrate nullish coalescing with 0 vs null

Related Concepts