Replace a one javascript object with another object

Question

On page load I am creating two Javascript Objects, objDemo1 and objDemo1Backup where the latter is simply an exact copy of the first.

e.g.

objDemo1 { 
    sub_1 = { something: 123, somethingElse: 321 },
    sub_2 = { something: 456, somethingElse: 654 }
}

I can modify the values in sub_ as well as add / delete new sub_'s but the only object I am editing is objDemo1. i.e. I never change objDemo1Backup

I have a reset button that when clicked will reset objDemo1 back to what it was when the page originally loaded (i.e. objDemo1 = objDemo1Backup). This is where I am having the issue..

How do I set objDemo1 to objDemo1Backup?

I have tried:

objDemo1 = objDemo1Backup;

and

objDemo1 = null;
var objDemo1 = objDemo1Backup;

...as well as similar variations but nothing seems to work. Any ideas?

Note: I can confirm that at the point of resetting, objDemo1Backup is exactly the same as it was when I created it and objDemo1 has changed.
My code is definetly hitting the "reset" functionality, where I've tried the objDemo1 = objDemo1Backup... I just cannot figure out the syntax to replace the object.

I'm going to assume that what is happening is that since both `objDemo1` and `objDemo1Backup` point to the same object, when you change one, both are changed. This may not seem intuitive, but it is the way javascript works. Google **"javascript clone object"** for more details. — Shmiddty, Dec 18 '12 at 16:46
You're playing with object reference, not cloning it. You should clone your object instead of assign it using = — LittleSweetSeas, Dec 18 '12 at 16:47

score 11 · Answer 1 · answered Oct 24 '14 at 16:17

11

I'm using angularjs and it took me some time to find out how to copy an object to another object. Normally you'll get an objects clone by calling clone or here in angular copy:

var targetObj = angular.copy(sourceObj);

This gives you a new cloned instance (with a new reference) of the source object. But a quick look into the docs reveals the second parameter of copy:

angular.copy(sourceObj, targetObj)

This way you can override a target object with the fields and methods of the source and also keep the target objects reference.

answered Oct 24 '14 at 16:17

schmijos

8,114
3
50
58

2

Exactly what I was looking for. I didn't know `angular.copy` could take a target object. Thanks! – Scotty Waggoner Dec 17 '15 at 15:00
5

There is no AngularJS tag in this question. – Michał Perłakowski Jan 22 '16 at 19:39

score 7 · Accepted Answer · edited May 23 '17 at 11:47

7

In JavaScript objects are passed by reference, never by value. So:

var objDemo, objDemoBackup;
objDemo = {
    sub_1: "foo";
};
objDemoBackup = objDemo;
objDemo.sub_2 = "bar";
console.log(objDemoBackup.sub_2);   // "bar"

To get a copy, you must use a copy function. JavaScript doesn't have one natively but here is a clone implementation: How do I correctly clone a JavaScript object?

var objDemo, objDemoBackup;
objDemo = {
    sub_1: "foo";
};
objDemoBackup = clone(objDemo);
objDemo.sub_2 = "bar";
console.log(objDemoBackup.sub_2);   // undefined

edited May 23 '17 at 11:47

Community

1
1

answered Dec 18 '12 at 16:47

Halcyon

57,230
10
89
128

So if I wanted to reset objDemo back to what objDemoBackup was a point of cloning I would do this: `objDemo = clone(objDemoBackup);` – Adam Tomat Dec 18 '12 at 17:00
Yes, you must clone it again or you'll end with a reference :) – Halcyon Dec 18 '12 at 17:02

ivanjermakov · Answer 3 · 2019-11-07T18:31:19.363

-1

You can use Object.assign.

ObjectConstructor.assign(target: T, source: U): T & U

It takes up two parameters: target and source. When function completes, all internals of target object will be appended with source one.

edited Nov 07 '19 at 18:31

answered Jun 22 '19 at 19:26

ivanjermakov

1,131
13
24

2

Not exactly, it is a merge not replacement. In the MDN example in your link, the updated target has property "a" and the source does not. In the OP's example, the properties have the same names so this is not an issue. – Alien Technology Nov 07 '19 at 17:36
As @AlienTechnology stated Object.assign doest not create a new instance – José Salgado Jan 03 '20 at 10:16
Object.assign does not replace the object, it merges with it. – keyboard-warrior Mar 08 '23 at 21:13

Replace a one javascript object with another object

3 Answers3