Modifying a copy of a JavaScript object is causing the original object to change

Question

I am copying objA to objB

const objA = { prop: 1 },  const objB = objA;  objB.prop = 2; console.log(objA.prop); // logs 2 instead of 1 

same problem for Arrays

const arrA = [1, 2, 3],  const arrB = arrA;  arrB.push(4);  console.log(arrA.length); // `arrA` has 4 elements instead of 3. 

Answer 1

It is clear that you have some misconceptions of what the statement var tempMyObj = myObj; does.

In JavaScript objects are passed and assigned by reference (more accurately the value of a reference), so tempMyObj and myObj are both references to the same object.

Here is a simplified illustration that may help you visualize what is happening

// [Object1]<--------- myObj  var tempMyObj = myObj;  // [Object1]<--------- myObj //         ^  //         | //         ----------- tempMyObj 

As you can see after the assignment, both references are pointing to the same object.

You need to create a copy if you need to modify one and not the other.

// [Object1]<--------- myObj  const tempMyObj = Object.assign({}, myObj);  // [Object1]<--------- myObj // [Object2]<--------- tempMyObj 

Old Answer:

Here are a couple of other ways of creating a copy of an object

Since you are already using jQuery:

var newObject = jQuery.extend(true, {}, myObj); 

With vanilla JavaScript

function clone(obj) {     if (null == obj || "object" != typeof obj) return obj;     var copy = obj.constructor();     for (var attr in obj) {         if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];     }     return copy; }  var newObject = clone(myObj); 

See here and here

Answer 2

deep clone object with JSON.parse() and JSON.stringify

// Deep Clone obj = { a: 0 , b: { c: 0}}; let deepClone = JSON.parse(JSON.stringify(obj)); 

refrence: this article

Better reference: this article