JavaScript Deep and Shallow Clone of Object

In this tutorial, we will learn about how to deep and shallow clone an object in JavaScript.

Cloning

The cloning of an object creates a new object containing all the fields and values of the original object. The value of a field can be of two types, a primitive type, and an object type.

A primitive type like a number, string, boolean, etc. are simple values and these values are copied to a newly created object, both in shallow cloning and in deep cloning.

An object type like an array, date or other custom objects is of reference type, which means the value of the field is just a reference to the memory location where the object is stored.

In shallow cloning, the reference (memory location) of the object type value is copied to the newly created object, thus making the field value of the original and cloned object refers to the same object.

In deep cloning, a new object is created for the object type value and all of its fields and values are copied to this new object. Its reference (memory location) is assigned to the field value, thus making the field value of the original and cloned object refers to the different object.

Shallow Cloning

Object.assign() :-

The Object’s assign method performs a shallow clone of an object. Syntax :-

const copy = Object.assign({}, original)

Let’s see the example :- 

<script>
const original = {
    name: 'Robert',
    location: 'USA',
    family: {
        father: 'Rob',
        mother: 'Eve'
    }
};
const copy = Object.assign({}, original);

original.name = 'John';
original.family.father = 'Josh';
console.log(copy.name); //Robert
console.log(copy.family.father); //Josh
</script>

Spread Operator :-

The ECMAScript 6 provides a spread operator to perform a shallow clone of an object. Syntax :-

const copy = { ...original }

Let’s see the example :- 

<script>
const original = {
    name: 'Robert',
    location: 'USA',
    family: {
        father: 'Rob',
        mother: 'Eve'
    }
};
const copy = { ...original };

original.name = 'John';
original.family.father = 'Josh';
console.log(copy.name); //Robert
console.log(copy.family.father); //Josh
</script>

Deep Cloning

Lodash cloneDeep() :-

The Lodash library contains a cloneDeep method to perform a deep clone of an object. Syntax :-

const copy = cloneDeep(original)

Let’s see the example :- 

<script>
const cloneDeep = require('lodash.cloneDeep');

const original = {
    name: 'Robert',
    location: 'USA',
    family: {
        father: 'Rob',
        mother: 'Eve'
    }
};
const copy = cloneDeep(original);

original.name = 'John';
original.family.father = 'Josh';
console.log(copy.name); //Robert
console.log(copy.family.father); //Rob
</script>

References :- 

1. Object.assign method
2. Spread Operator
3. Lodash cloneDeep

That’s all for how to Deep and Shallow clone an object in JavaScript. If you liked it, please share your thoughts in comments section and share it with others too.