Advanced

Destructuring and Spread

Unpack values and copy containers concisely with modern syntax.

What you will see

1 2

About 2 min of reading

Quick check

Before this new lesson, one small question about the lesson you just finished. Recall it, do not look it up.

Try It

Unpack object properties and array positions into variables, then copy and extend objects with spread. Defaults and renames keep the signatures clean.

Destructure two properties where one is missing. The present key is read directly; the missing one falls back to its default value.

const { name, age = 18 } = { name: "Ada" }; console.log(name, age);

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Ada 18

Destructuring defaults apply only when the value is undefined, not when it is null. Use `??` when you want null too to fall back.

Pull the first two positions into variables and gather the rest into an array. The rest collects everything that is left, preserving order.

const [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a, b, rest);

Before you run it, say out loud what it will print. Then open the answer.

What it prints

1 2 [ 3, 4, 5 ]

Array destructuring maps positions to variables. The `...rest` element must be last and collects the remaining values into a new array.

Spread an object into a copy, then add a new key while overriding an existing one. Print two keys to confirm the new value replaced the old.

const base = { a: 1, b: 2 }; const extended = { ...base, c: 3 }; console.log(extended.a); console.log(extended.b);

Before you run it, say out loud what it will print. Then open the answer.

What it prints

1 2

Spread copies enumerable own properties shallowly. Nested objects are still shared by reference, so use structuredClone for a deep copy.

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

Containers are unpacked into variables or copied and extended with spread syntax.

1 Pattern declares target variables

↓

2 Match against source by key or position

↓

3 Apply default when value is undefined

↓

4 Spread copies enumerable properties shallowly

Why this works

Destructuring defaults

Defaults apply only when the value is undefined, not when it is null or falsy:

const { timeout = 1000 } = { timeout: null };
console.log(timeout);   // null (default NOT applied)

const { timeout = 1000 } = {};
console.log(timeout);   // 1000

This differs from a fallback with ??: val ?? default replaces only null/undefined. Choose the tool that matches whether you expect null values.

When you have a choice

Shallow vs deep copy

Spread and Object.assign create shallow copies. Nested references are shared:

const a = { nested: { x: 1 } };
const b = { ...a };
b.nested.x = 99;
console.log(a.nested.x);   // 99 (a changed too!)

For deep copies use structuredClone (modern browsers/Node) or JSON.parse(JSON.stringify(obj)) for plain data. structuredClone also handles Dates, Maps, and Sets.

Examples

Object destructuring

Extract properties

const { name, age = 18 } = { name: "Ada" };
console.log(name, age);   // Ada 18

const { name: label } = { name: "Ada" };   // rename
console.log(label);   // Ada

Destructuring pulls properties into variables. Provide defaults for missing keys and rename on the fly. Combine with function parameters for clean signatures.

Array destructuring

Extract positions

const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest);   // 1 2 [3,4,5]

const [first, ...tail] = [10, 20, 30];
console.log(first, tail);   // 10 [20,30]

function swap(x, y) { return [y, x]; }
const [p, q] = swap(1, 2);   // p=2, q=1

Array destructuring maps positions to variables. ...rest collects the remainder. It pairs naturally with return values for clean swaps.

Spread in objects and arrays

Copy and extend

const base = { a: 1, b: 2 };
const copy = { ...base };                    // shallow copy
const extended = { ...base, c: 3 };          // copy + add
const merged = { ...base, b: 9 };            // override b

const arr = [...[1, 2], 3, 4];               // [1,2,3,4]

The spread ... copies enumerable own properties shallowly. Nested objects are still shared by reference, deep copy needs structuredClone or JSON.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← this and Closures

Previous Lesson

this and Closures

Next Lesson

Classes and OOP

Classes and OOP →