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

Array destructuring — by position (iterator)

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:

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

Object destructuring — by key

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:

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

In function parameters

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

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

Computed and dynamic keys

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."