thomasdoan88

Object Copy vs Reference

Illustration by Icons 8 from Icons8

From the previous post with array, we continue with copy vs reference for objects. Same with array when we use the = operator to clone an array we are directly reference it to the original array.

To simply put changes made to cloned array will be made to the original if = operator is used

Example below demonstrates

const originalPerson = {
        name: "Jacko",
        age: 25,
        hobby: "Playing Guitar"
      };

      const clonedPerson = originalPerson;
      clonedPerson.age = 32;
      
      console.log(originalPerson);
      // {name: "Jacko", age: 32, hobby: "Playing Guitar"} 

      console.log(clonedPerson);
      //{name: "Jacko", age: 32, hobby: "Playing Guitar"}

Result showed the state of orginalPerson object changed as we changed along with clonedPerson. We now have a problem at hand, not to worry though as we have few tools at our disposal again to solve this problem.

1. Object.assign()

This method copies all enumerable own properties from one or more source objects to a target object. Object.assign then return the target object. 

const originalPerson = {
        name: "Jacko",
        age: 25,
        hobby: "Playing Guitar"
      };

const person2 = Object.assign({}, originalPerson);
      person2.name = "Tom";
      (person2.age = 32), (person2.location = "Sydney");

console.log(person2);
// {name: "Tom", age: 32, hobby: "Playing Guitar", location: "Sydney"}
      
console.log(originalPerson);
// {name: "Jacko", age: 32, hobby: "Playing Guitar"}

As demonstrated, we made changes to person2 object without changing originalPerson. It is all good and smooth sailing for now but the limitation with Object.assign is it only copies one layer deep. As soon we get to second layers deep inside the object it will start referencing again.

Let me demonstrate with another object

const lincoln = {
        occupation: "Plumber",
        social: {
          twitter: "@plumbingelite",
          facebook: "plumbing.elite"
        }
      };

const jack = Object.assign({}, lincoln);
jack.occupation = "Programmer";
jack.social.twitter = "@JSninja";
      
console.log(jack);

// RESULT 
 {"occupation":"Programmer",
"social":{
"twitter":"@JSninja",
"facebook":"plumbing.elite"
 }
}

console.log(lincoln);

// RESULT 
 {"occupation":"Plumber",
"social":{
"twitter":"@JSninja",
"facebook":"plumbing.elite"
 }
}

If we look closely, the social objects in both jack object and lincoln object now reference each other. So if we want to make a deep clone Object.assign will not be an option for us.

2. ES6 method with …spread

Spread will give us the same result as Object.assign. If we want to deep clone then …spread WILL NOT be suitable for us neither. Example below demonstrates:

const tom = { ...lincoln };
tom.occupation = "Electrician";
tom.social.twitter = "@JSchampion";

console.log(JSON.stringify(tom));

// RESULT 
 {"occupation":"Electrician",
    "social":{
           "twitter":"@JSchampion",
           "facebook":"plumbing.elite"}}

console.log(JSON.stringify(lincoln));

// RESULT 
 {"occupation":"Plumber",
    "social":{
           "twitter":"@JSchampion",
           "facebook":"plumbing.elite"}}

Leave a comment