Operators and type coercion

Arithmetic operators

Unlike some languages, 7 / 2 is 3.5, not 3. To get a whole number, use Math.floor(7 / 2) or Math.trunc. The remainder operator % is useful to test even numbers (n % 2 === 0) and to wrap around (index % length).

Assignment shortcuts and ++

let stock = 10;
stock += 5;   // 15
stock -= 3;   // 12
stock *= 2;   // 24
stock++;      // 25
console.log(stock); // 25

let a = 5;
console.log(a++); // 5 (gives the old value, then adds 1)
console.log(++a); // 7 (adds 1 first, then gives the value)

Comparing: === versus ==

=== (strict equality) is true only when both the type and the value match. == (loose equality) first converts the values to the same type and then compares. That conversion is called type coercion, and its rules are hard to remember.

console.log(5 === 5);        // true
console.log('5' === 5);      // false (string vs number)
console.log('5' == 5);       // true  ('5' is converted to 5)
console.log(0 == '');        // true  (surprise!)
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log(NaN === NaN);    // false (NaN is never equal to anything)

+ with strings

If either side of + is a string, + joins (concatenates) instead of adding. The other operators (- * /) always try to convert to numbers. This is why form values cause bugs.

console.log('10' + 5);   // '105'
console.log('10' - 5);   // 5
console.log('3' * '4');  // 12
console.log(1 + 2 + '3'); // '33' (1 + 2 = 3 first, then '3' + '3')

Logical operators and short-circuit

&& (and) is true when both sides are true. || (or) is true when at least one side is true. ! (not) flips true and false. They short-circuit: && stops at the first falsy value and || stops at the first truthy value, and they return that VALUE, not just true or false.

console.log(true && false); // false
console.log(0 || 'default'); // 'default'
console.log('Asha' && 'ok'); // 'ok'
console.log(!true);          // false

?? and ?. for missing values

The nullish coalescing operator ?? gives the right side only when the left side is null or undefined. Unlike ||, it keeps 0 and empty strings. Optional chaining ?. reads a property only if the thing before it exists; otherwise it gives undefined instead of crashing.

const settings = { volume: 0 };
console.log(settings.volume || 50);  // 50 (wrong! 0 was a real value)
console.log(settings.volume ?? 50);  // 0  (right)

const order = { customer: null };
console.log(order.customer?.address?.city); // undefined, no crash

Precedence: who goes first

As in school maths, * and / happen before + and -. ** happens before *. Comparison comes after maths, then &&, then ||. When in doubt, add brackets: (a + b) * c is clearer than relying on memory.