Modern JS (ES6+)
Destructuring, spread & rest
Concise ES6 syntax for unpacking and combining data.
Destructuring unpacks values from arrays or properties from objects into distinct variables, with defaults and renaming.
Spread pours a bag of marbles out onto the table; rest scoops the leftovers back into one bag.
Key concepts
1
The spread operator (...) expands an iterable into individual elements — great for copying and merging arrays/objects without mutation.
spread...
2
The rest operator uses the same ... syntax but collects the remaining items into a single array or object — commonly used to gather function arguments.
rest...
javascript
const { name, role = 'guest' } = user; // object destructuring + default
const [first, ...others] = [1, 2, 3, 4]; // rest → others = [2,3,4]
const merged = { ...defaults, ...overrides }; // spread merge
const copy = [...list]; // shallow copy
function sum(...nums) { // rest params
return nums.reduce((a, b) => a + b, 0);
}