All 10 Destructuring, Spread & Rest questions
More in Destructuring, Spread & Rest
How do you destructure properties out of an object? What does the spread operator (...) do when used on an array? How do you assign default values while destructuring? How does the rest parameter differ from the spread operator, even though they use the same '...' syntax? How do you destructure nested objects and arrays in one statement? Why must the rest element be the LAST element in a destructuring pattern? How can you use destructuring to swap two variables without a temporary variable? How do computed property names interact with object destructuring?
Advertisement
JavaScript › Destructuring, Spread & Rest

How do you use spread to shallow-copy and merge objects?

Intermediate

Answer

Spreading an object into a new object literal copies its own enumerable properties; when merging multiple objects, later spreads override earlier ones for matching keys.
const defaults = { theme: 'light', fontSize: 14 };
const overrides = { theme: 'dark' };
const merged = { ...defaults, ...overrides };
// { theme: 'dark', fontSize: 14 }
Real-world example Combining a component's default props with props explicitly passed by the caller.

Common follow-ups: Why is this called a 'shallow' copy, and what problem can that cause with nested objects?

Objects Property Descriptors & Immutability
All 10 Destructuring, Spread & Rest questions