JavaScript Destructuring Cheat Sheet

An API returns { data: { user: { address: { city: 'Tokyo' } } } }. You need the city. Without destructuring: const city = response.data.user.address.city. With destructuring: const { data: { user: { address: { city } } } } = response. But then you need a default value, a renamed variable, and to handle the case where address is undefined — and the syntax for combining these gets tricky fast: const { address: { city: userCity = 'Unknown' } = {} } = user.

Why This Guide (Not MDN)

MDN’s destructuring page covers the basics but doesn’t organize patterns by use case. This cheat sheet groups patterns by category — array, object, function parameter, and advanced (nested, default, rest, computed) — with editable examples you can modify and test. Find the pattern you need by what you’re trying to do, not by reading the spec.

JavaScript Destructuring Cheat Sheet

JavaScript destructuring is a powerful syntax that lets you unpack values from arrays and properties from objects into named variables. Introduced in ES2015 (ES6), it has become one of the most-used features in modern JavaScript and TypeScript codebases.

Array Destructuring

Array destructuring assigns values by position. The variables on the left match elements at the corresponding indices on the right.

// Basic
const [a, b, c] = [1, 2, 3];

// Skip elements with empty slots
const [first, , third] = [10, 20, 30];

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

// Default values (only for undefined)
const [x = 0, y = 0] = [10];
// x = 10, y = 0 (default)

Swap Variables Without a Temp

One of the most useful tricks in JavaScript:

let a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

Object Destructuring

Object destructuring extracts properties by name rather than by position.

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

// Rename while destructuring
const { name: fullName } = { name: "Bob" };

// Default values
const { timeout = 3000 } = config;

// Rename + default
const { host: serverHost = "localhost" } = {};

Nested Object Destructuring

const { address: { city, country } } = user;
// city and country are defined; address is not

When nesting, the intermediate property (address) becomes a pattern only — not a variable binding.

Object Rest Properties

const { id, ...rest } = record;
// id = record.id
// rest = all other own enumerable properties

Function Parameter Destructuring

You can destructure directly in function signatures, making the expected shape of arguments explicit:

// Object parameter
function greet({ name, greeting = "Hello" }) {
  return `${greeting}, ${name}!`;
}

// Array parameter
function sum([a, b, c = 0]) {
  return a + b + c;
}

// Safe: default to empty object/array to avoid TypeError
function options({ debug = false } = {}) { /* ... */ }
function first([item] = []) { return item; }

Advanced Patterns

Computed Property Names

const key = "theme";
const { [key]: value } = settings;
// value = settings["theme"]

Iterator Destructuring

Array destructuring works on any iterable:

const [x, y] = new Set([1, 2, 3]);
const [firstKey, firstVal] = new Map([["a", 1]]);
const [zero, one] = range(5); // generator

Promise.all with Destructuring

const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts(),
]);

Object.entries() Pattern

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// Sort by value, skip key with comma-elision
entries.sort(([, a], [, b]) => b - a);

Regex Match Destructuring

// Skip full match (index 0) with comma-elision
const [, year, month] = dateStr.match(/(\d{4})-(\d{2})/);

// Named capture groups
const { groups: { y, m } } = str.match(/(?<y>\d{4})-(?<m>\d{2})/);

Common Pitfalls

1. Destructuring null or undefined throws

// TypeError: Cannot destructure property 'x' of null
const { x } = null;

// Fix: use fallback
const { x } = obj ?? {};

2. Defaults don’t apply for null

const { name = "Anon" } = { name: null };
// name is still null — defaults only fire for undefined

// Fix: use ?? after destructuring
const { name: rawName } = obj;
const name = rawName ?? "Anon";

3. Block vs. expression ambiguity

// SyntaxError: { } looks like a block
{ a, b } = { a: 1, b: 2 };

// Fix: wrap in parentheses
({ a, b } = { a: 1, b: 2 });

4. Rest must be last

// SyntaxError
const [...rest, last] = arr;

// Correct
const [first, ...rest] = arr;

5. Nested destructuring needs intermediate defaults

// TypeError if user.address is undefined
const { address: { city } } = user;

// Fix: default the intermediate
const { address: { city } = {} } = user;

Browser & Engine Support

JavaScript destructuring is supported in:

Computed property names in destructuring ({ [key]: val }) require ES2015+ (same support as the rest of destructuring).

Named capture groups ((?<name>...)) require ES2018 — Chrome 64+, Firefox 78+, Safari 11.1+, Node.js 10+.

FAQ

What is the difference between destructuring and spread?

Destructuring is the syntax on the left side of an assignment that unpacks values out of an array or object. Spread (...) is used on the right side to expand an iterable into individual elements. The rest element in destructuring uses the same ... syntax but collects remaining elements into an array or object — it’s the opposite operation.

Can you destructure a function’s return value directly?

Yes. Any expression that evaluates to an array or object can be destructured:

const [x, y] = getCoordinates();
const { status, data } = await fetchUser();

Is destructuring the same as just accessing properties?

No. Destructuring creates local variable bindings from values in one statement. It avoids repetitive obj.prop, improves readability, and supports features like default values, renaming, and rest collection inline.

Does destructuring mutate the original array or object?

No. Destructuring only reads values — it does not modify the source array or object. The rest element creates a new shallow copy of the remaining items.

When should I avoid deep destructuring?

Avoid destructuring more than 2–3 levels deep in function parameters or assignments. Deep nesting makes code harder to read and maintain, and TypeScript type inference becomes more brittle. Prefer intermediate variables for complex shapes.

All processing is done entirely in your browser — no data is sent to any server.