Object assignment is changing values

Question

I have an object that I use to have reset values which looks like this:

export const cleanTeam = {
   id: "",
   name: "",
   players: []
}

Then I create a new object using cleanTeam that looks like this:

let team1 = cleanTeam;

I will then set property values in team1 such as:

team1.id = 123;
team1.name = "My New Team";

Later, I create team2 using cleanTeam so that I have a new object with the same structure but no values. However, I noticed that the values I assigned are in cleanTeam as well. In other words, my cleanTeam looks like this now:

{
   id: 123,
   name: "My New Team",
   players: []
}

Shouldn't cleanTeam stay intact as I set values in team1?

I have an idea why this is happening. I think both cleanTeam and team1 are pointing to the same object in memory. How do I keep cleanTeam object clean?

"*I create a new object using cleanTeam: `let team1 = cleanTeam;`*" - No, that's just a second variable referencing the same object. — Bergi, Sep 07 '17 at 06:33

Suren Srapyan · Accepted Answer · 2017-09-07T06:53:52.077

Objects are reference types. When you assign one object to another, it only copies the reference. So you actually have two references which refer to the same object.

Consider a room with two doors. When you come in through the first door and make changes in the room and then come in from the second one, you will see the changes.

To copy the first level values you can use Object#assign function. This copies the properties. But be aware if you have an object inside the object, this will copy the reference only in your case players, which is a reference type.

const cleanTeam = {
   id: "",
   name: "",
   players: []
};

const newObj = Object.assign({}, cleanTeam);

newObj.id = 1;

console.log(cleanTeam, newObj);

Why don't use JSON.parse(JSON.stringify()) solution ?

It doesn't copies the functions, because JSON stores only state, not functionality.

const a = {
  id: 1,
  func: function(){
    console.log('Hello');
  }
};

a.func();

const b = JSON.parse(JSON.stringify(a));

b.func(); // Error

You're absolutely right! The key point you mentioned was that if there's an object within an object. I was using `Object.assign()` and my `cleanTeam` was still getting updated because my `cleanTeam` was inside another object. I had simplified my code to make it easy to understand. Using `JSON.parse(JSON.stringify())` fixed the issue. Thank you for the nice and detailed explanation! — Sam, Sep 07 '17 at 06:53

Sebastian Kaczmarek · Answer 2 · 2017-09-07T06:37:16.470

1

To make a copy of the object do:
var team1 = JSON.parse(JSON.stringify(cleanTeam))

This trick creates a new object which points to another address in memory so the reference to the original one is lost.

In your case, this one will work but keep in mind what Suren said:

It doesn't copy the functions, because JSON stores only state, not functionality

edited Sep 07 '17 at 06:37

answered Sep 07 '17 at 06:30

Sebastian Kaczmarek

8,120
4
20
38

Object assignment is changing values

2 Answers2