Destructuring & Spread

Unpacking arrays and objects into variables, the rest pattern, and spreading values — the ES2015 features that cleaned up modern JavaScript.

What it is, in plain English: Destructuring is a shorthand for extracting values from arrays or objects into named variables. Instead of array[0], array[1], you write const [first, second] = array. Spread (...) does the opposite — it expands an array or object into individual items. Rest (...) collects remaining items into an array. Together these three patterns appear in almost every modern JS codebase.

Where this bites you

A destructuring default is used only when the value is undefined, meaning the key is missing or explicitly undefined. null is a real value, so it goes straight through and the default is skipped. APIs and databases often send null to mean "unknown", which is how a perfectly reasonable default ends up printing the word null on screen.

function greet({ name, city = "Mumbai" }) {
  console.log(`Hello ${name} from ${city}!`);
}

const fromApi = { name: "Bob", city: null };   // the API sends null for "unknown"
greet(fromApi);
// Hello Bob from null!

Unpacking and expanding values

Destructuring and spread are two sides of the same coin. Destructuring pulls values out — from an array or object into variables. Spread pushes values in — expands an array or object into a new context. Once you learn these patterns, you'll use them constantly.

Array destructuring

// Old way — repetitive:
const arr = [10, 20, 30];
const first  = arr[0];
const second = arr[1];

// Destructuring — clean:
const [a, b, c] = [10, 20, 30];
console.log(a, b, c);   // 10 20 30

// Skip elements with empty commas:
const [x, , z] = [10, 20, 30];
console.log(x, z);   // 10 30  (20 is skipped)

// Rest — collect remaining items:
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);   // 1
console.log(tail);   // [2, 3, 4, 5]

// Default values (used if element is undefined):
const [p = 0, q = 0, r = 0] = [10, 20];
console.log(p, q, r);   // 10 20 0  ← r got its default

The swap trick — no temporary variable needed

let x = 1, y = 2;

// Old way — needs a temp:
// let temp = x; x = y; y = temp;

// Destructuring swap — one line:
[x, y] = [y, x];
console.log(x, y);   // 2 1

Object destructuring

const person = { name: "Alice", age: 30, city: "Mumbai" };

// Old way:
const name1 = person.name;
const age1  = person.age;

// Destructuring — cleaner:
const { name, age, city } = person;
console.log(name, age, city);  // "Alice" 30 "Mumbai"

// Rename while extracting (key: newName):
const { name: fullName, age: years } = person;
console.log(fullName, years);  // "Alice" 30

// Default value (used if key is missing):
const { country = "India", email = "none" } = person;
console.log(country);   // "India" — person has no country

// Most common use: function parameters
function greet({ name, city = "Mumbai" }) {
  console.log(`Hello ${name} from ${city}!`);
}
greet({ name: "Bob", city: "Delhi" });  // "Hello Bob from Delhi!"
greet({ name: "Carol" });               // "Hello Carol from Mumbai!"

The greet({ name: "Carol" }) call above gets "Mumbai" because city is missing, which is undefined. When the data might contain null as well, apply the fallback with ?? (nullish coalescing), which covers both null and undefined but leaves real values such as "" and 0 alone:

function greet({ name, city }) {
  console.log(`Hello ${name} from ${city ?? "Mumbai"}!`);   // ?? covers null AND undefined
}

const fromApi = { name: "Bob", city: null };
greet(fromApi);
// Hello Bob from Mumbai!

Spread — copy and combine

// Spread arrays:
const nums = [1, 2, 3];
const moreNums = [...nums, 4, 5, 6];
console.log(moreNums);  // [1, 2, 3, 4, 5, 6]

// Combine arrays:
const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b]);   // [1, 2, 3, 4]

// Copy an array (spread fixes the reference trap):
const original = [1, 2, 3];
const copy = [...original];   // new array, same values
copy.push(4);
console.log(original);  // [1, 2, 3] — unaffected!

// Spread objects:
const defaults = { theme: "light", lang: "en" };
const custom   = { lang: "hi", fontSize: 16 };

// Merge — later keys win:
const merged = { ...defaults, ...custom };
console.log(merged);  // { theme: "light", lang: "hi", fontSize: 16 }

// Shallow copy:
const obj     = { a: 1, b: 2 };
const objCopy = { ...obj };
objCopy.a = 99;
console.log(obj.a);     // 1 — original unchanged

In practice — the patterns you'll see everywhere

// React / state update pattern:
const state   = { count: 0, user: "Alice", loading: false };
const newState = { ...state, count: state.count + 1 };  // update one field

// API response unpacking:
async function getUser(id) {
  const { name, email, role } = await fetchUser(id);  // destructure directly
  return { name, email, role };
}

// Passing partial options to a function:
function createButton({ label = "Click", color = "blue", size = "md" } = {}) {
  return { label, color, size };
}
createButton({ label: "Submit" });  // { label: "Submit", color: "blue", size: "md" }

Try It Yourself

// ARRAY DESTRUCTURING — unpack by position
const colours = ["red", "green", "blue", "yellow"];
const [first, second, ...rest] = colours;
console.log(first);   // "red"
console.log(second);  // "green"
console.log(rest);    // ["blue", "yellow"] — rest collects the remainder

// Skip elements with commas
const [,, third] = colours;
console.log(third);   // "blue"

// Swap two variables — no temp needed
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);    // 2 1

// OBJECT DESTRUCTURING — unpack by key name
const user = { name: "Alice", age: 30, city: "Mumbai", role: "admin" };
const { name, age, city } = user;
console.log(name, age, city);  // "Alice" 30 "Mumbai"

// Rename while destructuring
const { name: userName, role: userRole } = user;
console.log(userName, userRole);  // "Alice" "admin"

// Default values — used if property is missing
const { country = "India", email = "not provided" } = user;
console.log(country);  // "India" (user has no country)

// SPREAD — expand into individual items
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

// Copy then modify (no mutation)
const settings = { theme: "dark", lang: "en", fontSize: 14 };
const updated  = { ...settings, fontSize: 16, color: "blue" };
console.log(settings.fontSize); // 14 — original unchanged
console.log(updated.fontSize);  // 16 — updated copy

Nested destructuring, computed keys, and iterable destructuring

Nested destructuring

const data = {
  user: { name: "Alice", address: { city: "Mumbai", pin: "400001" } },
  scores: [95, 87, 72],
};

// Destructure multiple levels at once:
const { user: { name, address: { city } }, scores: [top] } = data;
console.log(name);  // "Alice"
console.log(city);  // "Mumbai"
console.log(top);   // 95

// Flatten API responses:
const { data: { products: [firstProduct, ...otherProducts] } } =
  { data: { products: [{ id: 1 }, { id: 2 }, { id: 3 }] } };
console.log(firstProduct);    // { id: 1 }
console.log(otherProducts);   // [{ id: 2 }, { id: 3 }]

Destructuring in for...of loops

const users = [
  { name: "Alice", score: 95 },
  { name: "Bob",   score: 87 },
];

// Destructure each object in the loop header:
for (const { name, score } of users) {
  console.log(`${name}: ${score}`);
}

// With Object.entries():
const config = { host: "localhost", port: 3000, ssl: false };
for (const [key, value] of Object.entries(config)) {
  console.log(`${key} = ${value}`);
}

// With Map:
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(key, "→", value);
}

Computed property names in destructuring

const key = "name";
const { [key]: value } = { name: "Alice" };
console.log(value);  // "Alice"

// Dynamic key from variable in object literal too:
const propName = "color";
const obj = { [propName]: "red" };   // { color: "red" }

Spread in function calls

function sum(a, b, c) { return a + b + c; }
const args = [1, 2, 3];
console.log(sum(...args));   // 6 — spread as arguments

// Math.max with an array:
const nums = [3, 1, 4, 1, 5, 9, 2, 6];
console.log(Math.max(...nums));  // 9

// Node.js: spread argv into a function:
const [,, ...cliArgs] = process.argv;  // skip 'node' and script name

Object rest in destructuring

const { name, age, ...rest } = { name: "Alice", age: 30, city: "Mumbai", role: "admin" };
console.log(name);   // "Alice"
console.log(age);    // 30
console.log(rest);   // { city: "Mumbai", role: "admin" }

// Common use: omit a key from an object without delete:
const { password, ...safeUser } = { name: "Alice", email: "a@b.com", password: "secret" };
console.log(safeUser);  // { name: "Alice", email: "a@b.com" } — no password

Destructuring in the spec, binding vs assignment patterns

Two kinds of destructuring (ECMA-262 §14.3)

The spec distinguishes between:

Binding pattern — in a declaration: const { a } = obj. Creates new bindings in the current environment record. Uses BindingPattern grammar.
Assignment pattern — in an expression: ({ a } = obj). Assigns to existing bindings. Uses AssignmentPattern grammar. Requires parentheses when an object pattern starts an expression statement (otherwise the parser sees a block).

// Binding pattern (const/let/var declaration):
const { x } = { x: 1 };   // creates binding x = 1

// Assignment pattern (must wrap in parens if it starts a statement):
let y;
({ y } = { y: 2 });        // assigns to existing binding y
// { y } = { y: 2 }  ← SyntaxError: { parsed as block

How destructuring works — DestructuringAssignmentEvaluation

Object destructuring calls GetValue on the right-hand side, then for each property pattern, calls GetV(value, key) — which is essentially a property get, triggering any getters. Array destructuring calls GetIterator on the right-hand side (uses the iteration protocol), then calls IteratorStep/IteratorValue for each element. This is why destructuring works on any iterable, not just arrays:

const [a, b] = new Set([1, 2, 3]);   // Set is iterable
console.log(a, b);  // 1 2

const [c, d] = "hello";             // String is iterable
console.log(c, d);  // "h" "e"

function* gen() { yield 10; yield 20; }
const [e, f] = gen();               // Generator is iterable
console.log(e, f);  // 10 20

Spread is not structuredClone

Object spread (rest/spread properties, ECMA-262 §13.2.5.5) copies own enumerable string-keyed properties only — no prototype chain, no non-enumerable properties, no Symbol-keyed properties. It's a shallow copy. For nested objects, inner references are shared, not cloned:

const a = { x: { y: 1 } };
const b = { ...a };

b.x.y = 99;
console.log(a.x.y);  // 99 — shared reference!

// True deep clone: structuredClone(a)  or  JSON.parse(JSON.stringify(a))

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.