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
– Shmiddty, Commented Dec 18, 2012 at 16:46
You're playing with object reference, not cloning it. You should clone your object instead of assign it using = — LittleSweetSeas
– LittleSweetSeas, Commented Dec 18, 2012 at 16:47

schmijos · Accepted Answer · 2014-10-24 16:17:05Z

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, 2014 at 16:17

schmijos

8,8434 gold badges54 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scotty Waggoner Over a year ago

Exactly what I was looking for. I didn't know angular.copy could take a target object. Thanks!

Michał Perłakowski Over a year ago

There is no AngularJS tag in this question.

Community · Accepted Answer · 2017-05-23 11:47:05Z

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Dec 18, 2012 at 16:47

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

2 Comments

Adam Tomat Over a year ago

So if I wanted to reset objDemo back to what objDemoBackup was a point of cloning I would do this: objDemo = clone(objDemoBackup);

Halcyon Over a year ago

Yes, you must clone it again or you'll end with a reference :)

ivanjermakov · Accepted Answer · 2019-11-07 18:31:19Z

-2

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 7, 2019 at 18:31

answered Jun 22, 2019 at 19:26

ivanjermakov

1,35015 silver badges24 bronze badges

3 Comments

Alien Technology Over a year ago

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.

José Salgado Over a year ago

As @AlienTechnology stated Object.assign doest not create a new instance

keyboard-warrior Over a year ago

Object.assign does not replace the object, it merges with it.

Collectives™ on Stack Overflow

Replace a one javascript object with another object

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related