Destructuring and spread
Destructuring unpacks values out of an object (by property name) or an array (by position) into separate variables in one line. Spread, written ..., does the opposite: it copies the items of an array or the properties of an object into a new one. Follow six real lines that unpack user and nums, collect the leftovers with ...rest, and build new arrays and objects without changing the originals.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01After const { name, age } = { name: "Ada", age: 36 };, what is in age?
Object destructuring matches by property name: the variable age gets the value of the property age, which is 36.
02After const [first, ...rest] = [10, 20, 30];, what is rest?
first takes the item at index 0. The rest element collects every item left over into a new array: [20, 30].
03What does const more = [...nums, 40]; do when nums is [10, 20, 30]?
Spread copies the items of nums, in order, into a new array literal, then 40 is added. nums still has three items.
04What is older.age after const older = { ...user, age: 37 }; when user.age is 36?
...user copies age: 36 first, then age: 37 is written later. When two properties share a name, the later one wins.
05Spread makes a shallow copy. What does that mean?
The new array or object is new, but if a value inside it is itself an object, both the copy and the original refer to that same inner object.
Glossary
- Destructuring
- A short way to unpack values from an object or an array into separate variables, such as const { name } = user or const [first] = nums.
- Object
- A set of named values, written with curly braces, such as { name: "Ada", age: 36 }.
- Property
- One named value in an object, such as age: 36. Read it with user.age.
- Array
- A list of values kept in order, written with square brackets, such as [10, 20, 30].
- Index
- The position of an item in an array, counted from 0. In [10, 20, 30], 10 is at index 0.
- Rest element
- ...name at the end of a destructuring pattern. It collects the items (or properties) that are left into a new array (or object).
- Spread syntax
- ... in front of an array or object inside a new [ ] or { }. It copies every item or property into the new one.
- Shallow copy
- A copy of the top-level values only. Inner objects and arrays are shared with the original, not copied.
Notes and sources
- Spread makes a shallow copy: it copies each top-level value. If a value is itself an object or array, the new one refers to the same inner object, so changing that inner object shows up in both.
- Destructuring a name or position that is not there gives undefined. You can set a default instead: const [a = 1] = [] gives a = 1.
- A rest element must be the last item in the pattern. Objects have one too: const { age, ...others } = user puts the remaining properties in a new object.
- The figure draws each variable as its own box holding a copy of the value. For numbers and text that is exactly what happens; for objects and arrays a variable holds a reference to the one object.
- Destructuring, rest and array spread came in ECMAScript 2015. Spread and rest for objects came in ECMAScript 2018. All current browsers and Node.js support both.
Quiz Unlocks after the last step.