InterviewLane
Back to JavaScript
JavaScript
medium
mid

How do array and object destructuring work in JavaScript?

Destructuring pattern-matches a value's shape: arrays by index, objects by key. Supports defaults (`= 0`), renaming (`{a: b}`), rest (`...rest`), nested patterns, and works in parameters. Under the hood, it desugars to indexed/property access — array destructuring uses the iterator protocol.

3 min read·~8 min to think through
Sign in to bookmark & track progress

Destructuring is pattern-matching on the shape of a value to bind names — concise, but it has subtle rules.

Array destructuring — by position (iterator)

js
const [a, b, c] = [1, 2, 3];          // a=1, b=2, c=3
const [, , third] = arr;              // skip
const [x, ...rest] = arr;             // rest is a real array
const [p = 0, q = 0] = [1];           // defaults: p=1, q=0

Array destructuring uses the iterator protocol — it works on anything iterable, not just arrays:

js
const [first] = new Set([10, 20]);    // 10
const [a, b] = "hi";                  // 'h', 'i'

Object destructuring — by key

js
const { name, age } = user;
const { name: n } = user;             // rename
const { name = "anon" } = user;       // default if undefined
const { a: { b } } = obj;             // nested
const { name, ...rest } = user;       // rest object

Defaults fire only on undefined

null does NOT trigger the default — a common gotcha:

js
const { x = 1 } = { x: null };        // x = null, NOT 1
const { x = 1 } = {};                 // x = 1

In function parameters

js
function fetchUser({ id, name = "anon" } = {}) { /* ... */ }

The trailing = {} lets the function be called with no arg without throwing on the destructure.

Computed and dynamic keys

js
const key = "name";
const { [key]: value } = user;

Subtle gotchas

  • Destructuring null/undefined throws — const { x } = null is a TypeError. Provide a default: const { x } = obj ?? {}.
  • Statement vs expression — { a } = obj at statement start is a block; wrap: ({ a } = obj).
  • Order matters when defaults reference earlier bindings: const { a = 1, b = a + 1 } = {}.

Interview framing

"Destructuring is pattern-matching on a value's shape — arrays by index via the iterator protocol, objects by key. It supports defaults (only on undefined), renaming, rest, and nested patterns. The common gotchas: destructuring null throws, defaults don't trigger on null, and you need parens around an object destructure used as a statement."

Follow-up questions

  • •Why does the default not trigger on null?
  • •How does array destructuring work on a Set or a string?
  • •How would you safely destructure from a possibly-null value?

Common mistakes

  • •Expecting defaults to apply to null.
  • •Forgetting parens around statement-level object destructuring.
  • •Destructuring a possibly-null value without a fallback.

Performance considerations

  • •Negligible — desugars to index/property access. Array destructuring uses the iterator protocol, which is slightly more involved than direct indexing but rarely matters.

Edge cases

  • •Destructuring from `undefined`/`null` (throws).
  • •Empty arrays / missing keys.
  • •Renaming + default combined: `{ a: b = 1 }`.

Real-world examples

  • •Destructuring props in React components.
  • •Pulling fields from API responses.
  • •Options objects with defaults in library APIs.

Senior engineer discussion

Seniors know defaults fire only on `undefined`, that array destructuring uses the iterator protocol (so Sets and generators work), and avoid destructuring possibly-null values without a fallback.

Related questions