Javascript shallow copy && Deep copy

copy array and object to another variable in javascript

With great power comes great responsibility ft. array & object

Array and objects are too crucial to work with when we don’t know how some of the basics like copying an array to another variable which contains methods and some large chunk of data without data loss or looping through it.

while copying large data of array or object and try to manipulating it we may face headache where the source variable also changed.

var previousData = [1,4];
var newData = previousData;
newData.push(5);
console.log(" PREVIOUS DATA : ",previousData);
console.log(" NEW DATA : ",newData);
// output 
PREVIOUS DATA :  [ 1, 4, 5 ]
NEW DATA :  [ 1, 4, 5 ]

what’s happend ? 🤔 confusing right…..

before understanding the above one, let’s brush up our basics for a second…

strings, numbers, boolean, null, undefined are Primitive Data type, and array and object are Reference Data type.

While we assign Reference data types like array or object, we don't assign values to the variable. the variable store its address of it.

In the previousData variable declaration it wont stores the [1,4] value it just stores the address of the value and the address point out to the value, so when we change the newData variable which is also has the same address of the previousData variable.

var previousData = [1,4]; // address it stores 0x0A
var newData = previousData; // 0x0A

so the newData and previousData points out to the same value, in this situation we can’t change the newData value without changing the previousData value and this is called shallow copy.

Where it copy the address instead of value to the variable and this only applicable to Reference data type and not to Primitive data type.

let bhaiName = "Rocky Bhai";
let king = bhaiName;
king = king.substring(1); // removing first letter from string
console.log(bhaiName);
console.log(king);
// output
Rocky Bhai
ocky Bhai

As said before primitive data type don’t change while copying or assigning a one variable to another.

Then How do we copy Reference data type from one variable to another.. come on lets look into it.

before going into that we will check one more thing.

var a = [1,2,3];
var b = [1,2,3];
var c = [4,5,6];
var d = c;
console.log(a == b);
console.log(c == d);
// output
false
true

while comparing variable a and b we are getting false, because it is comparing value where the variable holds address instead of value, so thats why we are getting false for it.

To compare two array we can use JSON.stringify() method.

unlike shallow copy, deep copy takes the copy of all members or element in the array and assign it to the new variable. In this case modification or manipulation of one of the variables does not affect others.

var a = [1,2,3];
var b = JSON.parse(JSON.stringify(a));
b.push(4);
console.log(a);
console.log(b);
// output
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]

In the above example, we are cloning the variable a with the b and manipulating it and it does not affect the variable a .

There are many ways to deep clone an array or object some of them are

• Object.assign(),
• using spread operator
• […data] || {…data}

some times while using the above method in deep copy of object or array containing methods or large data leads to data loss, so we can use `cloneDeep()` method from loadash utility library.

const a = [{"a":"test",b: function(){
return "tets";
}}]
const b = JSON.parse(JSON.stringify(a));
console.log(a);
console.log(b);
// output
[ { a: 'test', b: [Function: b] } ]
[ { a: 'test' } ]

In the example due to the variable a containing method we can’t able to clone a into b, there is data loss, here only the loadash came into play.

Lodash | _.cloneDeep() Method - GeeksforGeeks

const loadashUtils = require('lodash');
const a = [{"a":"test",b: function(){
return "tets";
}}]
const b = loadashUtils.cloneDeep(a);
console.log(a);
console.log(b);
// output
[ { a: 'test', b: [Function: b] } ]
[ { a: 'test', b: [Function: b] } ]

using loadash library we can copy large data from one variable to another without data loss and we can copy array with functions and nested objects.