Destructuring and Spread

## What a default actually tests Array destructuring is pattern matching against the values an iterator produces. For each target in the pattern the engine takes the next value from the source; if there is no next value, or the value produced is `undefined`, the target's initializer (the `= something` part) is evaluated and used instead. That is the entire rule, and it is worth saying out loud in an interview: **defaults trigger on `undefined` only** — never on any other falsy value. ```js const [a = 5] = []; // 5 — nothing at index 0 const [b = 5] = [undefined]; // 5 — explicit undefined const [c = 5] = [null]; // null — null is a real value const [d = 5] = [0]; // 0 const [e = 5] = ['']; // '' const [f = 5] = [NaN]; // NaN ``` Candidates who mentally translate `=` in a pattern into `||` get `c`, `d`, `e` and `f` wrong. If you genuinely want "fall back on any falsy value" you need `||`, and if you want "fall back on null or undefined" you need `??` — the destructuring default is the narrowest of the three. ## Holes and skipped positions A sparse array literal such as `[1, , 3]` has a hole at index 1: the array has length 3 but no own property named `"1"`. Reading that position yields `undefined`, so a default in the pattern applies: ```js const [p, q = 'gap', r] = [1, , 3]; // 1, 'gap', 3 ``` You can also deliberately skip positions by leaving the pattern slot empty. Commas advance the iterator without binding anything: ```js const [, second, , fourth] = ['a', 'b', 'c', 'd']; // 'b', 'd' ``` Skipping and defaulting are independent: an empty slot binds nothing at all, while `= value` binds a fallback. ## Lazy, left-to-right evaluation Initializers are not evaluated up front. They run only for the positions that need them, in pattern order, and each one sees the bindings already introduced to its left: ```js let calls = 0; const make = () => { calls++; return 'made'; }; const [x = make(), y = make()] = ['given']; // x === 'given', y === 'made', calls === 1 const [w = 1, z = w * 2] = []; // w === 1, z === 2 ``` This matters when a default is expensive or has a side effect: it is not paid for when the value is supplied. Referring *rightwards* does not work — `const [m = n, n = 1] = []` throws a ReferenceError because `n` is still in its temporal dead zone when `m`'s initializer runs. ## The source must be iterable Array destructuring calls the source's iterator. `null` and `undefined` have none, so the whole statement throws: ```js const [a] = null; // TypeError: null is not iterable const [a] = undefined; // TypeError const [a] = 42; // TypeError: 42 is not iterable ``` A default on the *pattern element* does not save you here — it only covers a missing element, not a missing source. When the source itself may be nullish, guard it: `const [a = 5] = values ?? []`. ## Swapping without a temporary The most quoted use of array destructuring is a swap, which works because the right-hand array is fully built before any assignment happens: ```js let a = 1, b = 2; [a, b] = [b, a]; // a === 2, b === 1 ``` The leading `[` is the classic gotcha: if the previous statement lacks a semicolon, automatic semicolon insertion joins the lines and the engine reads an index access instead. Start the line with a semicolon or keep semicolons everywhere. ## Interview framing The question is almost always asked as a snippet with a `null` or `0` in it, because that single case separates people who learned the rule from people who pattern-matched it onto `||`. Say the rule (`undefined` only), name the three ways `undefined` arises (missing index, hole, explicit `undefined`), and mention that the source must be iterable — that covers everything an interviewer is fishing for.