We use cookies to ensure that we give you the best experience on our website.

how to clone the JavaScript objects

How to make a clone of a JavaScript object?

In this tutorial, I will show you how to clone or copy a JavaScript object in various ways.

Note: You cannot clone JS objects using the equal sign (=), because they are reference-type data.

1. Using the Spread operator to clone

You can use the spread (...) operator to clone a JS object, but it will make a shallow copy of the object.

let a = {
    name: "John",
    age: 22,
}

let b = {...a}

b.name = "Mark";

console.log(a, b);
{ name: 'John', age: 22 }
{ name: 'Mark', age: 22 }

Nested objects are also referenced

Shallow copy means the top-level properties will be copied, and the inner (Nested) objects will remain references.

let a = {
    name:"John",
    info:{age:22, country:"UK"}
}

let b = {...a}

b.name = "Rahul";
b.info.country = "INDIA";

console.log(a, b);
{ name: 'John', info: { age: 22, country: 'INDIA' } }
{ name: 'Rahul', info: { age: 22, country: 'INDIA' } }

2. Object.assign() method can make a shallow copy of an object

You can use the Object.assign() method to clone a JS object but it will also make a shallow copy of an object like the spread operator.

let a = {
    name:"John",
    info:{age:22, country:"UK"}
}

let b = Object.assign({}, a);

b.name = "Mark";
b.info.country = "USA";

console.log(a, b);
{ name: 'John', info: { age: 22, country: 'USA' } }
{ name: 'Mark', info: { age: 22, country: 'USA' } }

3. Deep Cloning of JS Objects

There are a few ways to clone a JS object deeply. Let’s see –

Using two methods of the JSON object

Deeply clone JS objects using the JSON.parse() and JSON.stringify() methods.

The trick is simple – First, we will use the JSON.stringify() method to convert an object to a string, then we will use JSON.parse() to convert that string to an object.

let a = {
    name:"John",
    info:{age:22, country:"UK"}
}

let b = JSON.stringify(a);
b = JSON.parse(b);
// IN ONE LINE - let b = JSON.parse(JSON.stringify(a));

b.name = "Mark";
b.info.country = "USA";

console.log(a, b);
{ name: 'John', info: { age: 22, country: 'UK' } }
{ name: 'Mark', info: { age: 22, country: 'USA' } }

Important: If an object has methods (functions) then this cloning method does not clone the object’s methods.

let a = {
    name:"John",
    sayHi:function(){
        console.log('Hi 👋');
    }
}

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

console.log(a, b);
{ name: 'John', sayHi: [Function: sayHi] }
{ name: 'John' }

Lodash cloneDeep method

You can use the _.cloneDeep(value) method of the Lodash library to clone an object deeply.

JS structuredClone() method

The built-in JS method structClone() can deeply clone an object, but it will fail to clone if the object contains functions.

Check out the browser compatibility and more about the structuredClone() function.

let a = {
    name:"John",
    info:{age:18}
}

let b = structuredClone(a);
b.name = "Eli";
b.info.age = 21;

console.log(a, b);
{ name: 'John', info: { age: 18 } }
{ name: 'Eli', info: { age: 21 } }

Related Posts