How to Clone/Copy a Object in JavaScript

📋 Table Of Content

In this post, we will learn how to clone an object in JavaScript.

An object in JavaScript is a reference data type, so we cannot just use = to copy or clone an object to a new variable.

Example:

const person = {
    name:'Jack',
    address:'USA'
}

const copyPerson = person

copyPerson.address = 'Japan' // Change address in copied person object

console.log(person) // { name: 'Jack', address: 'Japan' }
console.log(copyPerson) // { name: 'Jack', address: 'Japan' }

As you can see, when we change the address property value in copyPerson object the value in the person also changes. This is because since JavaScript object is a reference type, both person and copyPerson are pointing to the same object in the memory.

So, how do we clone an object in Javascript?

To clone or copy an object in JavaScript, there are three ways:

Clone using spread operator (...)
Clone using Object.assign() method
Clone using JSON.stringify() And parse() method

Let's check each with an example.

Using Spread Operator to clone an object

The spread operator in JavaScript can be used to create a shallow clone or copy of own properties of an object.

Example:

const person = {
    name: ' Jack',
    city: 'New York'
}


const clonePerson = {...person}
console.log(clonePerson) // { name: ' Jack', city: 'New York' }

Note that the spread operator can only make a shallow copy of the object. To learn more about what is shallow copy check the section below.

Using Object.assign() method to copy an object

The object.assign() method is used to copy all the properties from one or more source objects to another target object in JavaScript.

The object.assign() method also creates a shallow copy of the given source object.

Example:

const person = {
    name:'Jack',
    address:'NY'
}


const copyPerson = Object.assign({}, person);
console.log(copyPerson) // { name: 'Jack', address: 'NY' }

The first argument { } is the target object to which values have to be copied, and the second argument (person) is the source object from which the values and properties are copied.

Using JSON to copy/clone JavaScript Object

Using JSON.stringify() andJSON.parse() method we can deep copy of an JavaScript object. This is a quick way to do deep cloning of an object in JavaScript.

The JSON.stringify() convert an Javascript object into an JSON String and JSON.parse() converts the JSON string into an JavaScript object.

Example:

const person = {
    name:'Jack',
    address:'NY'
}

const copyPerson = JSON.parse(JSON.stringify(person))
console.log(copyPerson)

The JSON.stringify() method converts the method to a primitive type (string) and then JSON.parse() method coverts the string back to Javascript object. And this create a deep copy of the JavaScript object.

What is a shallow and deep copy in JavaScript?

Shallow copy of an object means only the actual object property gets copied. If the copied object has nested objects in it then those nested objects do not get cloned.

Deep clone means all the object properties including the nested object gets copied and is independent of the copied object.

Example of shallow copy

const person = {
    name: ' Jack',
    address:{
      country:'USA',
      city: 'New York'
    } 
}

const clonePerson = {...person}

clonePerson.name="Mark"
clonePerson.address.country = "Kenya"

console.log(clonePerson)
console.log(person)

Output:

{ name: 'Mark', address: { country: 'Kenya', city: 'New York' } }
{ name: 'Jack', address: { country: 'Kenya', city: 'New York' } }

As you can see in the example, first we clone the person object to clonePerson. Next, when we change the name value of the clonePerson object, only the clonePerson property value is changed.

However, when we try to change the country name in the nested object, the property gets changed in both person and clonePerson objects.

This is because both person and clonePerson objects is referring to the same address object in the memory.