Copy Objects
Spread creates a shallow copy of an object.
It is a clean way to clone without mutation.
JavaScript Tutorial
JavaScript Spread in Objects
The object spread operator lets you copy and merge objects quickly.
It is a modern alternative to Object.assign for simple cases.
Why We Need It
Copying objects is common in state updates and configuration merges.
Spread keeps the syntax short and readable.
Syntax
const copy = { ...obj }
const merged = { ...a, ...b }Basic Example
1. Clone
const user = { name: "Ava" };
const copy = { ...user };
console.log(copy);Spread clones object properties.
Real World Example
2. Merge
const a = { name: "Ava" };
const b = { role: "admin" };
const merged = { ...a, ...b };
console.log(merged);Combine multiple objects.
Multiple Use Cases
Merge Objects
Use spread to merge multiple objects into one.
Later properties overwrite earlier ones.
Nested Objects
Spread is shallow, so nested objects are still shared.
Use deep clone methods when necessary.
More Examples
3. Overwrite
const base = { role: "user" };
const next = { ...base, role: "admin" };
console.log(next);Later keys overwrite earlier ones.
4. Shallow copy
const user = { profile: { city: "Pune" } };
const copy = { ...user };
copy.profile.city = "Delhi";
console.log(user.profile.city);Nested objects are shared in shallow copies.
Comparison
Without
const copy = Object.assign({}, obj);With
const copy = { ...obj };Common Mistakes and Fixes
Expecting deep copy
Spread is shallow; nested objects are shared.
Overwriting keys unintentionally
Be mindful of property order when merging.
Mutating shared nested data
Clone nested objects when you need immutability.
Interview Questions
Is object spread deep?
No, it is shallow.
How do you merge two objects?
Use { ...a, ...b }.
When should you avoid spread?
When you need deep cloning or strict immutability for nested objects.
Practice Problem
Practice: Merge user settings with defaults using spread.
const defaults = { theme: "light", layout: "grid" };
const user = { layout: "list" };
// TODO: merge into new object
One Possible Solution
const defaults = { theme: "light", layout: "grid" };
const user = { layout: "list" };
const merged = { ...defaults, ...user };
console.log(merged);Frequently Asked Questions
Is spread deep?
No, it creates a shallow copy.
How do I merge objects?
Use { ...a, ...b }.
Does spread mutate?
No, it creates a new object.
Try It Yourself
Try merging objects with overlapping keys.