Shallow Copy
Object.assign copies properties from source objects into a target.
It performs a shallow copy, not a deep clone.
JavaScript Tutorial
JavaScript Object.assign()
Object.assign copies properties from one or more sources into a target object.
It is commonly used for shallow copies and merges.
Why We Need It
Merging objects is common when combining defaults with user options.
Object.assign provides a simple built-in way to do that.
Syntax
Object.assign(target, ...sources)Basic Example
1. Copy object
const user = { name: "Ava" };
const copy = Object.assign({}, user);
console.log(copy);Copy into a new object.
Real World Example
2. Merge
const a = { name: "Ava" };
const b = { role: "admin" };
const merged = Object.assign({}, a, b);
console.log(merged);Combine multiple sources.
Multiple Use Cases
Merge Objects
You can merge multiple sources into one target.
Later sources overwrite earlier properties.
Alternatives
Spread syntax is often more readable for simple merges.
Use structuredClone or libraries for deep copies.
More Examples
3. Overwrite
const base = { role: "user" };
const next = Object.assign({}, base, { role: "admin" });
console.log(next);Later sources overwrite earlier ones.
4. Shallow copy
const user = { profile: { city: "Pune" } };
const copy = Object.assign({}, user);
copy.profile.city = "Delhi";
console.log(user.profile.city); // DelhiNested objects are shared in shallow copies.
Comparison
Without
const merged = { ...a, ...b };With
const merged = Object.assign({}, a, b);Common Mistakes and Fixes
Expecting deep copy
Object.assign is shallow; nested objects are shared.
Mutating target unintentionally
Use {} as the target for a fresh copy.
Overwriting properties
Be mindful of source order.
Interview Questions
Does Object.assign mutate?
Yes, it mutates the target object.
Is it deep or shallow?
It performs a shallow copy.
When should you avoid it?
When you need deep cloning or immutability.
Practice Problem
Practice: Merge a defaults object with a user settings object.
const defaults = { theme: "light", layout: "grid" };
const user = { theme: "dark" };
// TODO: merge into a new object
One Possible Solution
const defaults = { theme: "light", layout: "grid" };
const user = { theme: "dark" };
const merged = Object.assign({}, defaults, user);
console.log(merged);Frequently Asked Questions
Is Object.assign deep?
No, it is a shallow copy.
Does it mutate the target?
Yes, it writes into the target object.
What is a common alternative?
Spread syntax: { ...a, ...b }.
Try It Yourself
Try merging different objects and see results.