Destructuring and Spread: The JavaScript Shortcuts That Break on null and Shallow Copy
Two behaviors in this pattern cause silent production bugs: `null` skips defaults and spread copies share nested references. Teams that mistake either for a deep copy or a null-safe default end up with mutated state and unexpected values in data pipelines.
Array destructuring pulls values by iteration position and works on any iterable, from arrays to strings and generators. Object destructuring matches by property name, supports renaming, nesting, and direct use in function parameter defaults, which removes a layer of `options.xxx` boilerplate. Rest syntax collects the unmatched tail into a real array, unlike the array-like `arguments` object, and object rest gives a clean way to strip fields like passwords before sending data to a client.
Spread copies arrays and objects one level deep; merging objects follows write order, and later props override earlier ones. That shallow boundary becomes a real problem when a nested object is mutated through the copy. The built-in `structuredClone` handles deep copy in modern browsers and Node 17 and up. The article's pitfall table collects the common mistakes: destructuring null throws, default values ignore null, rest must be last, and object spread precedence depends on order.
The article positions destructuring and spread as capability-neutral sugar, but the two footguns it flags are exactly where the syntax stops being transparent and changes runtime behavior, so the 'sugar' label undersells the risk.
The decision chart lumps all data movements into four categories; that simplification works until nested references appear, at which point the developer has to drop the one-liner and call `structuredClone`.