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

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

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

Try using the create() method like as mentioned below.

var tempMyObj = Object.create(myObj);

This will solve the issue.

To sum it all up, and for clarification, there's three ways of copying a JS object.

1. A normal copy. When you change the original object's properties, the copied object's properties will change too (and vice versa).

const a = { x: 0}
const b = a;
b.x = 1; // also updates a.x

2. A shallow copy. Top level properties will be unique for the original and the copied object. Nested properties will be shared across both objects though. Use the spread operator ...{} or Object.assign().

const a = { x: 0, y: { z: 0 } };
const b = {...a}; // or const b = Object.assign({}, a);

b.x = 1; // doesn't update a.x
b.y.z = 1; // also updates a.y.z

3. A deep copy. All properties are unique for the original and the copies object, even nested properties. For a deep copy, serialize the object to JSON and parse it back to a JS object.

const a = { x: 0, y: { z: 0 } };
const b = JSON.parse(JSON.stringify(a)); 

b.y.z = 1; // doesn't update a.y.z

4. Using Object.create() does create a new object. The properties are shared between objects (changing one also changes the other). The difference with a normal copy, is that properties are added under the new object's prototype __proto__. When you never change the original object, this could also work as a shallow copy, but I would suggest using one of the methods above, unless you specifically need this behaviour.