Destructuring and Spread

Destructuring and Spread

Prerequisites assumed: You are comfortable with objects, arrays, iteration, let/const, rest parameters, and the iterator protocol.

The mechanics

Destructuring is pattern matching against iterables and objects. The right-hand side is destructured; the left-hand side is the pattern. Object patterns bind properties by name; array patterns consume an iterable positionally, calling Symbol.iterator internally — so any iterable destructures, not just arrays.

const { name, ...rest } = { name: 'Ada', role: 'dev', level: 5 };
// name: 'Ada'; rest: { role: 'dev', level: 5 } — a fresh plain object

const [first, , third = 'n/a'] = [1, 2]; // holes skip; third hits its default

Defaults only apply to undefined, never null or other falsy values. const { x = 1 } = { x: null } yields x === null. For true "absent or null" handling you need explicit fallbacks, e.g. x ?? 1 in a subsequent expression.

Nested patterns and renaming

Patterns nest arbitrarily, and the rename syntax is { source: target, nested: { a, b } }. A subtle gotcha: in const { port: p = 8080 }, the default belongs to p, not port. Assigning a default to a renamed binding looks like { port: p = 8080 } — reading it wrong is a common review bug.

const response = { data: { user: { id: 7, tags: ['admin'] } } };
const {
  data: {
    user: { id, tags: [primary] },
  },
} = response; // id: 7, primary: 'admin'
// Note: `data` and `user` are NOT bound here — they were paths, not targets.

Spread: copy, merge, and its limits

Spread at the call site or in literals copies own enumerable properties/elements one level deep. It invokes the iterator (arrays, strings, Maps, Sets) or CopyDataProperties (objects). Consequences:

• Spread of a string yields an array of code points, not UTF-16 code units — emoji spread correctly where str.split('') does not.
• Object spread runs getters on the source during the copy and silently drops non-enumerable and symbol-keyed... actually it does copy own enumerable symbols; it drops non-enumerables and prototype members.
• Both { ...a, ...b } and Object.assign({}, a, b) shallow-merge; neither deep-clones. Nested references are shared — a classic source of accidental mutation across "copies".

const base = { opts: { deep: true } };
const copy = { ...base };
copy.opts.deep = false;
console.log(base.opts.deep); // false — shared reference

Rest, parameters, and evaluation order

Rest elements must be last in array patterns and parameters; trailing commas after rest are a syntax error. In function signatures, rest parameters capture leftovers (always a real array), and defaults are evaluated left to right — earlier parameters can seed later ones:

function area({ w, h = w * 2, unit = 'px' } = {}) {
  return `${w}x${h} ${unit}`;
}

100%

Show diagram source

flowchart LR
  A[Source value] --> B{Array pattern?}
  B -- yes --> C[Get iterator, consume positions]
  B -- no --> D[Read properties by name]
  C --> E{Value undefined?}
  D --> E
  E -- yes --> F[Use default / rest]
  E -- no --> G[Bind target]
  F --> G