Destructuring, spread & rest
1 min read
Unpacking values the short way
Often you pull values out of an object or array into variables. The old way:
let user = { name: "Riya", age: 25 };
let name = user.name;
let age = user.age;
Destructuring does it in one clean line:
let { name, age } = user;
console.log(name, age); // Riya 25
It also works on arrays (by position):
let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first); // red
The spread operator ...
Three dots ... "spread out" the items of an array or object. Great for copying or combining.
let a = [1, 2];
let b = [3, 4];
let both = [...a, ...b]; // [1, 2, 3, 4]
let user = { name: "Riya" };
let fullUser = { ...user, age: 25 }; // { name: "Riya", age: 25 }
This is the clean, safe way to make a copy with changes — without touching the original.
rest — gather the leftovers
The same ... can collect remaining items into one:
let [winner, ...others] = ["Gold", "Silver", "Bronze"];
console.log(winner); // Gold
console.log(others); // ["Silver", "Bronze"]
Destructuring unpacks; spread (
...) copies and combines; rest (...) gathers. These appear in almost every modern codebase — and constantly in React.