Out and in
Destructuring unpacks values out of an object or an array into separate variables, in one line. Spread, written ..., does the opposite: it copies all the items into a new array or object.
Unpacking
Curly braces make an object: a set of named values called properties. user has two: name holds the text "Ada" and age holds the number 36.
Braces on the left of = destructure an object. JavaScript finds the property with each name and copies its value into a new variable of the same name: name gets "Ada", age gets 36.
Square brackets make an array: a list of values kept in order. Each value has a position, called its index, counted from 0. nums holds 10, 20 and 30 at indexes 0, 1 and 2.
Brackets on the left destructure an array by position. first takes the item at index 0, which is 10. The rest element, ...rest, collects every item left over into a new array: [20, 30].
Spreading
...nums inside new brackets spreads the array out: its three items are copied, in order, into a new array. Then 40 is added at the end. more is [10, 20, 30, 40]; nums is untouched.
...user copies every property of user into a new object. Then age: 37 is written after it. When two properties share a name, the later one wins, so older.age is 37.
Nothing was changed in place. user still has age 36 and nums still has three items. Destructuring copied values out, and spread built new arrays and objects.
What happens
// step 1/8 · idea
destructuring take values OUT into variables
const { a, b } = obj; by name
const [x, y] = arr; by position
spread ... copy values INTO a new one
[...arr] { ...obj }
standard ECMAScript 2015 (2018 for objects ...)
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. 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.