To calculate with amounts and check conditions, our budget app needs operators – this chapter covers arithmetic, comparison, and logical operators, including the notorious type coercion pitfalls.

Arithmetic operators

const salary = 2400;
const rent = 850;

console.log(salary + rent);  // 3250 - addition
console.log(salary - rent);  // 1550 - subtraction
console.log(salary * 12);    // 28800 - multiplication (yearly salary)
console.log(salary / 30);    // 80 - division (daily rate)
console.log(salary % 1000);  // 400 - modulo (remainder)
console.log(salary ** 2);    // 5760000 - exponentiation

Increment/decrement and compound assignment

let transactionCount = 0;
transactionCount++;        // equivalent to transactionCount = transactionCount + 1
transactionCount += 5;     // +=, -=, *=, /= as shorthand

let balance = 1500;
balance -= 850;        // deduct rent

Comparison operators: == vs. ===

The most important operator distinction in all of JavaScript: == compares AFTER implicit type coercion, === compares value AND type, with NO coercion.

console.log(100 == '100');   // true  - string gets coerced to number, then compared
console.log(100 === '100');  // false - different types, no comparison after coercion
console.log(0 == false);     // true  - false gets coerced to 0
console.log(0 === false);    // false - different types
console.log(null == undefined);  // true  - special case: the two are considered "equal"
console.log(null === undefined); // false - different types

More comparison operators

console.log(850 > 500);   // true
console.log(850 < 500);   // false
console.log(850 >= 850);  // true
console.log(850 <= 500);  // false

Logical operators

const isIncome = true;
const amountPositive = 2400 > 0;

console.log(isIncome && amountPositive); // true - AND: both must be true
console.log(isIncome || false);            // true - OR: at least one must be true
console.log(!isIncome);                    // false - NOT: flips the boolean value

Truthy and falsy: values in a boolean context

When a non-boolean value is used where JavaScript expects a truth value (e.g. in an if condition, chapter 6), the engine implicitly coerces it to true or false. Exactly EIGHT values are "falsy" – EVERYTHING else is "truthy":

• Falsy: false, 0, -0, 0n, '' (empty string), null, undefined, NaN.
• Truthy: literally EVERYTHING else – including '0' (a non-empty string!), 'false' (a non-empty string!), empty arrays [], and empty objects {}.

if ('0') {
  console.log('This branch runs! The string "0" is truthy.');
}

if ([]) {
  console.log('This branch runs too! An empty array is truthy.');
}

Nullish coalescing (??) and optional chaining (?.)

Two modern operators that are enormously helpful when dealing with potentially missing values – important for our budget app once transactions have optional fields like a note:

const note = null;
const display = note ?? 'No note'; // ?? only kicks in for null/undefined, not 0 or ''
console.log(display); // 'No note'

const transaction = { description: 'Rent' };
console.log(transaction.category?.name); // undefined instead of a crash - no failure on a missing category

The crucial difference from ||: 0 || 'default' yields 'default', because 0 is falsy – even though 0 would be a valid, intended value here! 0 ?? 'default' correctly yields 0, since ?? reacts ONLY to null/undefined.