Tuesday, July 31, 2018

javascript Clone - Understand shallow and deep copy with examples

Shallow and Deep Copy introduction

Sometimes,  In applications, we have to write a code for use cases like a duplicate copy of an array/JSON/object. This article covers a basic understanding of this and examples.

Javascript offers two types for copying an object
1. Shallow Copy
2. Deep Copy

Shallow Clone

Shallow Copy example in javascript
It copies a value of the original object and copies the reference of other child objects if the reference to other child objects. It copies primitives like numbers and strings and if any child object exists, The newly copied object has new values as child object references. If any child object is modified, It reflects in original and copied object too. In this case memory segment is same and address of memory segment is a point to single. This will performs well as only one memory usage is very less for one segment
Let us see the Shallow copy example. This can be achieved in many ways.

Simple assign 

First, create an employee object with name=franc and department=Marketing
const originalEmployee = {
  name: 'Franc',
  department: {
    type: 'Marketing'
Next is duplicate this object by assigning to a new variable.
var copiedEmployee = originalEmployee;
Modify copied object with name=Kiran and department=Development
copiedEmployee.name = 'Kiran'
copiedEmployee.department.type = 'Development'
console.log('original', originalEmployee)  //returns {name:"Kiran", department:{type: "Development"}
console.log('copy', copiedEmployee) //returns {name:"Kiran", department:{type: "Development"}
Now original Employee object original values are lost. Original and copied object has pointed to modified values.

using Object.assign() method 

This also only values are copied and child references are copied but not child objects themselves. The below code modifies original object same as above
const copiedEmployee = Object.assign({}, originalEmployee)
originalEmployee.name = 'Kiran'
originalEmployee.department.type = 'Development'
console.log(originalEmployee) //returns {name:"Kiran", department:{type: "Development"}
console.log(copiedEmployee) //returns {name:"Franc", department:{type: "Development"}
Create an original object and copied using the assign method, Now we modified original object value as well as object references. The copied object has not modified values still pointing to the original value and modifying object references values are still pointing to the same object by original and copied objects

Using Es6/Es2015 Spread Operator

This is another way to do shallow copy using the latest javascript, here is an exercise for this.
const copiedEmployee = { ...originalEmployee }
originalEmployee.name = 'Kiran'
originalEmployee.department.type = 'Development'
console.log(originalEmployee) //returns {name:"Kiran", department:{type: "Development"}
console.log(copiedEmployee) //returns {name:"Franc", department:{type: "Development"}
The behavior is the same as object.assign() method.

Deep Copy

Deep Copy example in javascript
This copies the original object which creates new memory a segment and points new object to newly create memory segment. Here two memory segments exist one is for the original object other is for the copied object. It copies and all the values and reference object values too. So here two objects are different objects

Example Usage

This can be achieved using creating new object variable and construct the object as like below I am giving example for the same original data above
var duplicateCopy = { name: originalEmployee.name, department:{ type: originalEmployee.department.type } }; 
if we change Orignal Employee Object, Copied object will not get modifications. Two objects are independent.

Hope you understand this. Please comment and share this on facebook/twitter if you have any questions.


Note: Only a member of this blog may post a comment.