Copy or Clone? A Beginner’s Guide to Object Copying in JavaScript

#javascript #objectcloning

In JavaScript, copying objects and arrays is a common task, but it’s not always straightforward. This is because objects and arrays are reference types, meaning when you assign them to a new variable with = operator, you're often just copying the reference, not the actual data.

🤖 Meet QuirkyRobot

Say you have a robot:

let quirkyrobot = {
  name: 'Chitti',
  humaneProperties: {
    heartRate: null,
    emotions: undefined,
    mood: 'curious'
  },
  technicalProperties: {
    storage: '1 Zettabyte',
    clockSpeed: '1 terahertz',
  },
  introduction: function(){
    let greetings = `Hello! I am ${this.name} the robot. Speed: ${this.technicalProperties.clockSpeed}, Memory: ${this.technicalProperties.storage}`;
    return greetings;
  }
}

Now, If we want to create a copy of this, we would assign it to the new variable using = operator.

let newrobot = quirkyrobot;

You're not creating a new robot; you're just pointing newrobot to the same robot. Any changes to newrobot will affect quirkyrobot and vice versa. It's like having two names for the same person!

Example:

let newrobot = quirkyrobot;
newrobot.name = 'R2-D2';

console.log(quirkyrobot.name); // Outputs: 'R2-D2'

/* Above assignment of name property of newrobot has also modified 
the original objects (quirkyrobot) name property since both objects 
points to same reference */

Sometimes this behaviour is intentional. But when we want to deal with a fresh copy and have the old one untouched, we need to make a true copy from the original object.

1. 🛠️ Shallow Copy (Copying the Top-Level Properties)

A shallow copy means copying the top-level properties of an object. Nested objects or arrays will still reference the same memory location.

1. Using spread syntax of ES6 (...)

let shallowCopy = {...quirkyrobot};
shallowCopy.name = 'Wall-e';

console.log(quirkyrobot.name); // Outputs: 'Chitti'
console.log(shallowCopy.name); // Outputs: 'Wall-e'

2. Using Object.assign()

let shallowCopy = Object.assign({}, quirkyrobot);
shallowCopy.name = 'Wall-e';

console.log(quirkyrobot.name); // Outputs: 'Chitti'
console.log(shallowCopy.name); // Outputs: 'Wall-e'

Both methods created a new object with the same top-level properties. However, nested objects or arrays of new object still reference the same memory location of those nested structures of original object.

What that means is,

let shallowCopy = Object.assign({}, quirkyrobot);

shallowCopy.humaneProperties.mood = 'calm';

console.log(quirkyrobot.humaneProperties.mood); 
/* Output: 'calm' but not 'curious' since shallowCopy object's nested
structures are still referencing the original object's nested
structures.*/