By default, assigning one JavaScript object to another variable just copies a reference (a pointer to the same spot in memory), not the actual data.
Illustrating the problem:
let person = { name: "Alice" };
let alias = person;
alias.name = "Bob";
console.log(person); // { name: "Bob" }
console.log(alias); // { name: "Bob" }
Both variables point at the same object, so changing one changes the other. This is "copy by reference," and it's usually not what you want when you intend to create an independent copy.
let original = { name: "Alice" };
let copy = Object.assign({}, original);
copy.name = "Carol";
console.log(original); // unaffected
console.log(copy); // updated
let original = { name: "Alice" };
let copy = { ...original, role: "Engineer" };
copy.name = "Carol";
console.log(original);
console.log(copy);
It only duplicates the first level of properties. Any nested object inside stays shared.
const person = {
name: "Dave",
city: "Delhi",
education: {
school: "Central High",
college: "IIT",
},
};
let clone = Object.assign({}, person);
clone.city = "Mumbai"; // works independently
clone.education.college = "NIT"; // also changes person.education.college!
console.log(person);
console.log(clone);
The top-level city field copies fine, but education.college is shared, so editing it on the clone also changes the original.
Convert the object to a JSON string, then parse it back — this produces a brand-new structure with no shared references.
const person = {
name: "Dave",
city: "Delhi",
education: {
school: "Central High",
college: "IIT",
},
};
let clone = JSON.parse(JSON.stringify(person));
clone.city = "Mumbai";
clone.education.college = "NIT";
console.log(person); // untouched
console.log(clone); // fully independent
Limitation: the JSON round-trip silently drops anything JSON can't represent — functions and Date/time values included in the object won't survive the conversion.
const person = {
name: "Dave",
city: "Delhi",
education: { school: "Central High", college: "IIT" },
greet: function () {
console.log("Hi, I'm", this.name);
},
};
let clone = JSON.parse(JSON.stringify(person));
// clone.greet is now undefined — the function was lost
Lodash is a popular JS utility library with many helper functions, including a robust deep-clone that preserves things JSON can't, like functions.
// include lodash via CDN or npm, then:
let clone = _.cloneDeep(person);
console.log(person === clone); // false — separate objects
clone.name = "Eve";
clone.education.college = "NIT";
console.log(person); // untouched
console.log(clone); // independent, and greet() still works
Rather than copying, you can link one object's prototype to another so it inherits shared behavior/properties while still being able to override them locally.
const base = {
name: "Himanshu",
city: "Ranchi",
describe() {
console.log(`${this.name} from ${this.city}`);
},
};
const other = {
name: "Shekhar",
describe() {
console.log(`${this.name} from ${this.city}`);
},
};
other.__proto__ = base;
other.city = "Bengaluru"; // own property, doesn't affect base
console.log(base.city); // "Ranchi"
console.log(other.city); // "Bengaluru"
Advertisement