Object Destructuring & Spread
Object destructuring extracts properties into variables. The spread operator copies and merges objects. Both are used constantly in React (props destructuring, state updates) and modern JavaScript.
Object Destructuring & Spread
- Destructuring - const { name, age } = user; extracts by property name
- Rename - const { name: userName } = user; renames to userName
- Default - const { role = 'user' } = user; default if missing
- Nested - const { address: { city } } = user; extracts nested property
- Spread copy - const copy = { ...original }; shallow copy
- Spread merge - const merged = { ...defaults, ...overrides }; later wins on conflicts
- Rest - const { name, ...rest } = user; rest = everything except name
Destructuring & Spread Code
const user = {
name: "Alice",
age: 25,
email: "alice@email.com",
role: "admin",
address: { city: "Mumbai", country: "India" }
};
// Basic destructuring
const { name, age, email } = user;
console.log(name, age, email); // "Alice" 25 "alice@email.com"
// Rename
const { name: userName, role: userRole } = user;
console.log(userName); // "Alice"
// Default value
const { phone = "N/A" } = user;
console.log(phone); // "N/A" (doesn't exist)
// Nested destructuring
const { address: { city } } = user;
console.log(city); // "Mumbai"
// Rest - collect remaining
const { name: n, ...rest } = user;
console.log(rest); // { age: 25, email: "...", role: "admin", address: {...} }
// Spread - copy object
const copy = { ...user };
copy.name = "Bob";
console.log(user.name); // "Alice" (original unchanged)
// Spread - merge objects
const defaults = { theme: "light", lang: "en", fontSize: 16 };
const prefs = { theme: "dark", fontSize: 18 };
const settings = { ...defaults, ...prefs }; // prefs overrides
console.log(settings); // { theme: "dark", lang: "en", fontSize: 18 }
// Function parameter destructuring
function greet({ name, age }) {
console.log(`Hello ${name}, age ${age}`);
}
greet(user); // "Hello Alice, age 25"Tip
Tip
Destructure function parameters directly: function greet({ name, age }) { } instead of function greet(user) { const name = user.name; }. This pattern makes function signatures self-documenting and is used in every React component.
Destructuring lets you unpack object properties and array elements in one line
Common Mistake
Warning
Spread creates SHALLOW copies only. If the object has nested objects, { ...user } copies the reference to the nested object, not the object itself. Changing copy.address.city also changes original.address.city. Use structuredClone() for deep copies.
Practice Task
Note
Practice immutable updates: (1) Create a settings object with nested theme properties. (2) Use spread to update theme.color without mutating the original. (3) Use rest to create a new object excluding the 'password' property.
Quick Quiz
Key Takeaways
- Object destructuring extracts properties into variables.
- Destructuring - const { name, age } = user; extracts by property name
- Rename - const { name: userName } = user; renames to userName
- Default - const { role = 'user' } = user; default if missing