Destructuring and spread

This chapter follows Functions in JavaScript.

Array destructuring

Position maps to binding. Skip elements with holes, swap without a temp, and apply defaults when the value is undefined.

1
const numbers = [10, 20, 30];
2
const [x, y, z] = numbers;
3

4
const [a = 100, b = 200] = [50];
5
// a === 50, b === 200
6

7
const [first, second] = [1, 2];

Object destructuring

Property names match keys. Renaming uses key: localName. Defaults apply when the property is missing or undefined.

1
const person = { name: "Alice", age: 25 };
2
const { name, age } = person;
3

4
const { city = "Default City" } = person;
5
// city === "Default City"
6

7
const user = { name: "Bob", address: { city: "Berlin", postalCode: 10115 } };
8
const {
9
  address: { city, postalCode },
10
} = user;

Aliases and rest in patterns

Rest in objects collects own enumerable keys not already picked; rest in arrays collects trailing elements.

1
const { name, ...otherDetails } = person;
2
// otherDetails === { age: 25 }
3

4
const [head, ...tail] = [1, 2, 3, 4];
5
// head === 1, tail === [2, 3, 4]
6

7
const { firstName: first, lastName: last } = {
8
  firstName: "Tom",
9
  lastName: "Smith",
10
};

Function parameters

Destructuring in parameter lists documents the expected shape and combines with defaults.

1
function greetUser({ name, age }) {
2
  console.log(`Hello, ${name}, you are ${age} years old.`);
3
}
4
greetUser({ name: "Tom", age: 28 });
5

6
const sumPair = ([a, b]) => a + b;
7
sumPair([3, 4]); // 7

Class constructors often take a single options object and destructure in the parameter list the same way.

Spread in literals and calls

Spread (...) expands iterables in array literals and argument lists, and copies enumerable own properties into object literals (later keys win).

1
const base = [1, 2];
2
const extended = [...base, 3, 4];
3

4
function maxOf(a, b, c) {
5
  return Math.max(a, b, c);
6
}
7
maxOf(...extended);
8

9
const defaults = { mode: "prod", retries: 3 };
10
const config = { ...defaults, retries: 5, debug: true };
11
// { mode: "prod", retries: 5, debug: true }

Spread is shallow—nested objects are shared by reference unless you clone deeper yourself.

Destructuring in loops

for...of pairs naturally with array or object destructuring when iterating collections of records.

1
const people = [
2
  { name: "John", age: 30 },
3
  { name: "Jane", age: 25 },
4
];
5

6
for (const { name, age } of people) {
7
  console.log(name, age);
8
}

Common pitfalls

Destructuring undefined or null throws. Optional chaining applies to the path before destructuring, not inside a pattern without a default object.

1
const row = undefined;
2
// const { id } = row; // TypeError
3

4
const { id } = row ?? {};

Default values in arrays do not run for missing slots that are explicitly undefined from a sparse array—behavior matches undefined at that index.

Next: Error handling in JavaScript.