JSON delete deletes attribute in source variable also

Question

I have a small problem.

var template = data;
delete template.candidates;

The above code deletes data.candidates also. Though I can solve it by some other logic. But I need the actual reason behind it and proper solution for this (not workaround).

Thanks in advance

You will have to make a copy of the object - have a look here: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object — somethinghere, Apr 04 '16 at 13:28
See [Is JavaScript a pass-by-reference or pass-by-value language?](http://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Liam, Apr 04 '16 at 13:31

score 2 · Accepted Answer · answered Apr 04 '16 at 13:30

2

By default = only creates reference of Object. In order to clone (which is requirement for you), you can do following

ES2015 (ES6) -

var template = Object.assign({}, data);

ES5 -

var template = JSON.parse(JSON.stringify(data));

Both option will clone the object in new variable called template. Now the next operation will just delete data from template keeping data intact.

answered Apr 04 '16 at 13:30

Bikas

2,709
14
32

Thanks @Bikas, that helped – Kishore Barik Apr 04 '16 at 13:41

score 1 · Answer 2 · answered Apr 04 '16 at 13:30

1

This happens because you are passing a reference to data to the variable template. An easy way to solve this "problem" is to clone the object by doing something like this:

var template = JSON.parse(JSON.stringify(data))

answered Apr 04 '16 at 13:30

Peter Keuter

778
5
14

score 1 · Answer 3 · answered Apr 04 '16 at 13:31

When you assign a Object to a variable, the variable doesn't actually "contain" the Object (like it is the case with an integer), the variable just contains a reference to the Object. So by assigning var template = data you're not actually copying data into template, you're just copying the reference to the Object template is referencing. Therefore, you now have two variables, referencing the same Object and therefore doing anything with any of those variables, will affect the same Object. So the solution to this, would be to actually clone the Object from data to template

score 0 · Answer 4 · answered Apr 04 '16 at 13:30

You need to create a copy of the object into your template var :

var data = {
  candidates: [1, 2],
  test: [1]
};
var template = data.constructor();
for (var attr in data) {
  if (data.hasOwnProperty(attr)) template[attr] = data[attr];
}
delete template.candidates;
console.log(data, template);

score 0 · Answer 5 · answered Apr 04 '16 at 13:50

The issue you're running into is a problem with mutability, in your code data and template actually reference the same object and therefore changes to one will affect the other. You should make an effort to not mutate your variables and instead return a new object when you need to change something with them. You'll want to use the Object.assign() or spread operator. Another issue arises from the fact that there's not a proper way to delete object keys from JS the delete function you're using is actually quite slow.

const jsonFunction = input => {
    return {
        ...input,
        candidates: null,
        ...input
    }
};

const data = jsonFunction(template);

or alternatively with Object.assign()

const jsonFunction = input => {
    return Object.assign({}, input, candidates: null);
}

const data = jsonFunction(template);

This will return a new object and assign it to data, by handling it immutably it means you can deal with data and template without them affecting each other.

JSON delete deletes attribute in source variable also

5 Answers5