JavaScript How to delete key from copied object?

Question

I have query object

var q = {
    age: 10, 
    'profile.contry': 'india'
};

Now I duplicate the q variable and remove key from a duplicate variable.

var duplicateQ = q;
delete duplicateQ['profile.contry']; // I have removed 'profile.country' from duplicateQ.

console.log(q); //Object { age: 10 }
console.log(duplicateQ); //Object { age: 10 }

Why are both the variables affected? How can I remove the property from only one of them?

`duplicateQ` is a reference to the original `q`. You need to clone the object. See the answer I marked as duplicate for more information. — Rory McCrossan, Nov 25 '15 at 14:24
@RoryMcCrossan: Technically, the OP is asking how to delete a property from a cloned object. While the "Cloning" is the problem, There's gotta be a better duplicate out there... (Not that I've found one yet) — Cerbrus, Nov 25 '15 at 14:27
True, although his method of deletion is correct. The problem he has is addressed by the dupe question. — Rory McCrossan, Nov 25 '15 at 14:28
I propose: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object (Which I can apply, if you agree) — Cerbrus, Nov 25 '15 at 14:29

score 11 · Answer 1 · answered Nov 25 '15 at 14:25

It's because q and duplicateQ refer to the same object. Thus, when you delete a property on one object, it effects both (since they both point to the same object).

You need to copy/clone the object.

In ES6, you can use the .assign() method:

var q = {age:10, 'profile.contry': 'india'};
var duplicateQ = Object.assign({}, q);
delete duplicateQ['profile.contry'];

Output:

console.log(q);
// {age: 10, profile.contry: "india"}

console.log(duplicateQ);
// Object {age: 10}

score 7 · Answer 2 · edited May 23 '17 at 10:30

You aren't duplicating q, instead, you're copying a reference to different variable.

Both q and duplicateQ point to the same object, the same location in your computer's memory.

In order to make this work, you're going to have to clone the object, then you can delete (/ modify) individual properties on the separate variables.

A quick-and-dirty example:

var a = { a: 1, b: 2 },
    b = JSON.parse(JSON.stringify(a));

delete b.a;

document.body.textContent = JSON.stringify(a) + ' ' + JSON.stringify(b);

JavaScript How to delete key from copied object?

2 Answers2

Linked

Related