Syntax Basics

This chapter covers the syntax you will read and write every day: declaring variables, writing functions, branching and looping, template literals, and the destructuring and spread syntax that shows up all over modern JavaScript.

let, const and var

There are three ways to declare a variable. Reach for const by default and switch to let only when the variable must be reassigned. var still appears in older code, but there is rarely a reason to write it today.

const greeting = "Hello";
let count = 0;
count += 1;

if (true) {
  let inside = "block";
  var leaked = "function";
}
console.log(leaked); // "function": var escapes the block
// console.log(inside); // ReferenceError: let stays inside it

const user = { name: "Sam" };
user.name = "Alex"; // allowed: const blocks reassignment, not mutation

const does not freeze an object. If you need the contents locked too, use Object.freeze().

Functions and arrow functions

A function declaration can be called from anywhere in its scope. Arrow functions are shorter and shine as callbacks. Both support default values and rest parameters.

function add(a, b) {
  return a + b;
}

// a single-expression body needs no braces or return
const square = (x) => x * x;
const makeUser = (name) => ({ name, createdAt: Date.now() }); // wrap object literals in parentheses

function greet(name = "guest", ...tags) {
  return `${name} (${tags.join(", ")})`;
}

console.log(add(2, 3));                 // 5
console.log(square(4));                 // 16
console.log(greet());                   // "guest ()"
console.log(greet("Kim", "vip", "new")); // "Kim (vip, new)"

Arrow functions also differ in how they treat this; chapter 6 explains why that matters.

Control flow

Compare with === and !==. The loose == converts types first, which is how 0 == "" ends up true.

const fruits = ["apple", "pear", "grape"];

for (const fruit of fruits) {
  console.log(fruit);
}

for (let i = 0; i < fruits.length; i += 1) {
  if (fruits[i] === "pear") continue;
  console.log(i, fruits[i]);
}

const score = 82;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

switch (grade) {
  case "A":
    console.log("Excellent");
    break;
  case "B":
    console.log("Good");
    break;
  default:
    console.log("Keep going");
}

// optional chaining and nullish coalescing
const config = { server: { port: 0 } };
const port = config.server?.port ?? 3000; // 0, because ?? only replaces null/undefined
const host = config.server?.host ?? "localhost";