Unpacking and rebuilding: destructuring and spread

Functions that take an object almost always begin the same way: pull out the properties you need, give a couple of them a fallback, then get on with the work. Written by hand that is three or four lines of `const name = user.name;` before anything interesting happens.

Destructuring collapses that into one statement, and it does something better than saving keystrokes: it puts the shape you are expecting at the top of the function where a reader can see it. Someone skimming your code learns what a `user` needs to contain without reading the body.

Spread is the mirror image. Destructuring takes a shape apart; spread builds a new one out of the pieces. Between them they are how modern JavaScript moves data around without mutating it, which is the habit Lesson 2 started and Lesson 6 explains.

`const { name, age } = user;` creates two variables, `name` and `age`, holding `user.name` and `user.age`. The braces on the left are not an object — they are a pattern describing which properties you want out.

The names in the pattern have to match the keys exactly, because they are the keys. `const { nmae } = user` gives you a variable called `nmae` holding `undefined`, with no complaint, which is the same silent-typo problem as Lesson 3 wearing a different hat.

Nothing new happens at runtime. `const { name } = user` does precisely what `const name = user.name` does, and the object is not modified or consumed. The gain is entirely in what the code communicates.

You can rename as you unpack: `const { city: town } = user;` reads `user.city` into a variable called `town`. Read the colon as goes into. This is needed more often than it sounds — when two objects both have a `name`, or when the key is not a legal variable name.

You can also supply a default: `const { city = 'Unknown' } = user;`. If `user` has no `city`, `city` is `'Unknown'`.

Now the detail that catches everyone. MDN states it exactly: the default value is used when the property is not present, or has the value `undefined`; it is not used if the property has the value `null`. So `const { city = 'Unknown' } = { city: null }` gives you `null`, not `'Unknown'`. If you want `null` treated as missing too, that is a different tool — `??`, in Lesson 7.

Arrays destructure by position instead of by name, using square brackets: `const [first, second] = pair;`. The names are yours to choose, because it is the position that identifies the element.

An empty slot skips a position: `const [first, , third] = list;` takes index 0 and index 2 and ignores index 1. The double comma looks like a typo and is not.

Defaults work the same way and fire under the same condition: `const [a, b = 'z'] = ['x'];` gives `b` the value `'z'`, because there is no index 1 and a missing element is `undefined`.

Inside an array literal, `...list` means put every element of `list` here. `[0, ...nums, 3]` builds a brand-new array with the elements of `nums` in the middle. `[...list]` on its own is a copy — the same thing `slice()` gave you in Lesson 2, written shorter.

Inside an object literal, `{ ...user }` means put every property of `user` here. Spreading two objects merges them: `{ ...defaults, ...chosen }`.

When both objects have the same key, MDN's rule is that the property takes the last value assigned while remaining in the position it was originally set. So the later spread wins the value, and the key keeps the place it first appeared. Reading these literals aloud as and then makes the order obvious, and getting the two the wrong way round is one of the easiest bugs to stare straight past.

The same `...` in a destructuring pattern means the opposite: collect whatever is left. `const { id, ...details } = record;` gives you `id`, plus a new object `details` holding every other property. `const [first, ...others] = list;` gives you the first element and a new array of the rest.

Rest must come last in the pattern — there is no sensible meaning for everything else followed by something else. Writing it anywhere but the end is a syntax error.

This is the neat way to remove a property without `delete`, and the standard way to say I handle these two options and pass the remainder on.

MDN is explicit that spread effectively goes one level deep while copying: it creates a shallow copy. `{ ...settings }` gives you a new outer object, but any object or array nested inside it is the very same one the original holds. Changing `copy.window.width` changes the original's too.

This is not a flaw to work around so much as a fact to know. Lesson 6 is entirely about what it means and what to do when you need more.

One smaller trap: spreading an array into an object literal, `{ ...list }`, is legal and gives you an object with `'0'`, `'1'`, `'2'` as keys. It is almost never what anyone wanted. Match the brackets to the shape you are building.

Destructuring unpacks by name from objects and by position from arrays, and the pattern goes on the left of the `=`. Defaults fire for a missing or `undefined` value and never for `null`. Spread rebuilds: later values win a clash, keys keep the position they first appeared in, and the copy is one level deep. Rest collects the remainder and must come last.