Object.assign() in JavaScript
Learning web devlelopment
In the world of JavaScript, Object.assign() is the go-to method when you need to copy properties from one object to another. It’s efficient, straightforward, and just a little sneaky — but don’t worry, we’ll break it all down without overcomplicating things.
What is Object.assign()?
Think of Object.assign() as a property-moving service: it takes properties from one or more source objects and drops them into a target object. Unlike a moving truck, though, it doesn’t care about fragile labels — it just piles everything on top, overwriting existing properties if needed.
Basic Syntax
Object.assign(target, ...sources);
target: The object you want to update....sources: One or more objects whose properties you want to copy.
How Object.assign() Works
Copies only enumerable properties:
If a property isn’t visible infor...inloops orObject.keys(),Object.assign()pretends it doesn’t exist.Shallow copy only:
It copies property references, not the actual data for objects or arrays. Think of it as “here’s the link, not the file.”Order matters:
If multiple sources have the same key, the last one wins.Primitives like strings:
Strings get their characters copied over (yes, really), but numbers,null, andundefinedmostly sit this one out.Non-writable or frozen properties:
If a property in the target object is locked down,Object.assign()doesn’t argue — it skips over it.
Examples
1. Basic Usage
const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
Here, Object.assign() adds b to target. No drama, no questions.
2. Overwriting Properties
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 3, c: 4 }
source barges in and says, “Move over, old b. I’m the new b in town.”
3. Shallow Copy in Action
const target = {};
const source = { a: { b: 1 } };
Object.assign(target, source);
target.a.b = 2;
console.log(source.a.b); // 2
Both target.a and source.a now share the same reference. If one changes, the other says, “Me too!”
4. Primitives as Sources
const target = {};
Object.assign(target, "abc", 123, null);
console.log(target); // { 0: "a", 1: "b", 2: "c" }
Only the string "abc" contributes anything useful. Numbers and null politely excuse themselves, saying, “Nothing to add here.”
5. Non-Writable Properties
const target = {};
Object.defineProperty(target, "a", {
value: 1,
writable: false,
enumerable: true,
});
Object.assign(target, { a: 2 });
console.log(target.a); // 1
The a property is non-writable, so it stays stubbornly unchanged. Object.assign() isn’t here to start fights.
Common Questions
Why doesn’t it deeply clone objects?
Because it’s not supposed to! For deep cloning, use structuredClone(), Lodash, or roll your own function if you’re feeling adventurous.
Why does "abc" add characters but 123 doesn’t?
Strings have enumerable properties (like their characters), while numbers don’t. "abc" struts in with 0, 1, and 2, while 123 just sits in the corner, quiet as a mouse.
What happens if there’s no target?
You’ll get an error. Always provide a target, even if it’s an empty object:
const result = Object.assign({}, source1, source2);
Why doesn’t it copy non-enumerable properties?
Because Object.assign() only cares about enumerable properties. Think of it as a minimalist decorator — only the visible stuff gets attention.
When to Use Object.assign()
Merging objects: Combine settings or configurations.
Cloning objects: Quickly create a shallow copy of an object.
Adding defaults: Fill in gaps with default values without overwriting existing properties.
Final Thoughts
Object.assign() is a solid tool for simple property copying. Just remember that it’s not a mind reader, nor is it a deep cloner. Use it wisely, and it’ll save you time; misuse it, and you might end up muttering, “Why is this changing over there?”
