Values and types: seven primitives and objects

Every value in JavaScript is one of eight types. Seven are primitives: single, unchangeable values. The eighth is object, which covers everything that holds other values: plain objects, arrays, functions, dates, Maps.

• number: one type for all numbers, whole or fractional (1250, 0.15). It is a 64-bit floating-point number, which is why 0.1 + 0.2 prints 0.30000000000000004. Working with data explains why and what to do about money.
• bigint: whole numbers of any size, written with an n: 9007199254740993n. Plain numbers stay exact only up to 9,007,199,254,740,991.
• string: text, in single quotes, double quotes or backticks.
• boolean: true or false.
• undefined: "no value was ever given". A variable you declared but never set, or a property that does not exist.
• null: "deliberately empty". Your code or your API sets it on purpose.
• symbol: a unique id, mostly used inside libraries. You will rarely write one.

The typeof operator tells you the type as a string. It has one famous bug that can never be fixed, because fixing it would break old websites: typeof null is 'object'. Arrays also say 'object', so use Array.isArray(x) to check for an array.

console.log(typeof 10n, typeof Symbol('x'), typeof function () {}, typeof []);
console.log(typeof undefined, typeof 'a', typeof NaN, Array.isArray([]));
console.log(typeof null);   // the old bug

bigint symbol function object
undefined string number true
object

Notice typeof NaN is 'number'. NaN is the number you get when a conversion fails, for example Number('2 pcs').

Variables, operators and the two kinds of equal

Declare with const by default and with let when you will reassign the name, such as a running total. Both are block-scoped. Do not use var: it ignores blocks and has hoisting surprises that Functions, scope and closures shows in full. One more thing about const: it stops you from pointing the name at a new value, and it does not stop changes inside an object. const cart = [] followed by cart.push(item) is allowed. Objects, arrays and references is about exactly that.

Arithmetic operators are the usual + - * / % plus ** for powers. The trap is +: if either side is a string, it joins text instead of adding. Everything a user types into a form arrives as a string, so this bites often:

const qtyFromForm = '2';                 // every form input value is a string
console.log(qtyFromForm + 1);            // + with a string joins text
console.log(Number(qtyFromForm) + 1);    // convert first, then add
console.log(Number(''), Number('2 pcs'));

21
3
0 NaN

Note that Number('') is 0, not an error. An empty quantity box becomes zero silently, so validate input before converting it.

For comparison, JavaScript has two equals. === (strict equality) is true only when both sides have the same type and the same value. == (loose equality) first converts the two sides towards a common type, a process called type coercion, and the rules are long and odd: 0 == '' is true, [] == false is true, null == 0 is false. Always use === and !==. The one idiom some teams allow is x == null, which is true for both null and undefined. ESLint's eqeqeq rule enforces this (VS Code for teams).

Truthy, falsy, and safe defaults

An if, a while, &&, || and ! all accept any value, not only booleans. They treat a value as true or false by a fixed rule. Exactly eight values are falsy: false, 0, -0, 0n, "", null, undefined and NaN. Every other value is truthy, including the string '0', the string 'false', an empty array and an empty object.

This matters most for defaults. a || b returns b whenever a is falsy, so a real zero gets replaced. The nullish coalescing operator a ?? b returns b only when a is null or undefined. For numbers such as a discount, a quantity or a stock level, where 0 is a real answer, use ??.

Optional chaining, a?.b, reads b only if a is not null or undefined, and gives undefined otherwise instead of crashing. The two work well together:

const discountCents = 0;                  // a real "no discount"
console.log(discountCents || 50, discountCents ?? 50);

const sale = { customer: null };          // a walk-in customer
console.log(sale.customer?.phone, sale.customer?.phone ?? 'walk-in');
console.log(sale.customer.phone);         // no ?. here

50 0
undefined walk-in
TypeError: Cannot read properties of null (reading 'phone')

The last line stops the script; Node prints a stack trace, and the line above is the important part of it. Do not sprinkle ?. everywhere, though. If a sale must always have a store, sale.store?.siteId hides a real data bug behind a quiet undefined. Use ?. where "missing" is a normal, expected case.

Strings, conditions, loops and the console

Template literals use backticks and ${…} to put values inside text: `Store ${siteId}: ${lineCount} lines`. They can also span several lines. Prefer them to joining strings with +.

if / else if / else works as in any C-style language. switch compares with === and has one trap: without break or return, execution falls through into the next case. Sometimes that is what you want, so that several cases share one answer, such as the many mobile wallets a store accepts (M-Pesa, UPI, GCash and so on):

function channel(paidBy) {
  switch (paidBy) {
    case 'cash': return 'cash';
    case 'mpesa':                 // no return: falls through on purpose
    case 'upi':
    case 'gcash': return 'mobile wallet';
    case 'card': return 'card';
    default: return 'other';
  }
}
console.log(channel('upi'), channel('cheque'));

mobile wallet other

For loops, you need three forms. The classic for (let i = 0; i < n; i++) when you need the index. for (const sale of sales) to walk the values of an array, a string, a Map or a Set; this is the one to use most. And for (const key in obj), which walks the keys of an object. Do not use for…in on arrays: it gives you the indexes as strings ('0', '1') and can include extra properties. Inside any loop, continue skips to the next item and break stops. Working with data covers the array methods (map, filter, reduce) that replace many loops.

The console is your first debugging tool. console.log prints values (objects are shown with their contents), console.table prints an array or object as a table, and console.error writes to the error stream, which the terminal and log collectors treat separately. Errors, debugging and testing goes from here to real breakpoints.