How to copy / clone array in javascript ?




In this tutorial, you will learn how not to copy or clone as an array. You will also learn the concept of deep copy, shallow copy, and how objects are stored in Javascript.

The simple concept of copying an array in Javascript can teach you a lot of things.

Let's get started :)


Why can't we copy array using "="?

Arrays in Javascript are special types of objects. When you find the type of array by using typeof operator in javascript, you are going to get an object as output.

In Javascript, objects are reference values.

When you try to copy the object/ array using the = operator, it is only going to copy the reference to the original object/ array, and the value is not copied. 

Let's understand this with the help of an example.


var arr = [1,2,3,4];
var copiedArr = arr;

copiedArr.push(5)

console.log(arr)
console.log(copiedArr)

Output

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]



As you can see from the above example. We copied the array using the = operator and then pushed one more value into the copied array.

Observe the output, the value got pushed into both the arrays. This happened because only the reference to the original object was copied not the value. (Shallow Copy)


Shallow Copy

A Shallow Copy means that certain (sub-)values are still connected to the original variable. In the above example, a shallow copy is created where only the reference is copied but the values are still linked. 

In Javascript, Composite Data Type like Objects, arrays are shallow copied.


Deep Copy

A Deep copy means all the values of the new variable are copied and disconnected from the original variable.

When copying primitive data type in javascript like the number, string, booleans deep copy is created.


So, how can we copy an array?

For creating a real copy of an array, the value of the array needs to be copied under the new value variable.
In this way, a new array will not hold the reference to the old array address in memory.


Copy Array using Slice 

We can use the traditional Slice to get the shallow copy of the array.

First Parameter is the start index (optional)
Second parameter is the end index (optional)

If we want to create a shallow copy of the array we can pass the start index as 0 and no end index.



var arr = [1,2,3,4,5]
arr.slice(0)

Output
[1,2,3,4,5]


Copy Array using Spread Operator

This is the ES6 way of cloning an array. It has the shortest syntax and you will find it very useful when you are cloning the array.


var arr = [1,2,3,4,5]
var copiedArr = [...arr];
console.log(copiedArr)

Output
[1,2,3,4,5]


Clone Array using Object.assign

Object.assign is used to copy all the properties from one source to another.

First Parameter is the target.
Second parameter is the source.


var arr = [1,2,3,4,5]
var copiedArr = Object.assign([],arr);
console.log(copiedArr)

Output
[1,2,3,4,5]


Using JSON.parse and JSON.stringify

This can be considered as a hack to create a shallow copy of an array.

JSON.parse is used to create an object from string.
JSON.stringify is used to create a string from the object.

By combining them, we can first convert the object to string and then reverse the process to create a brand new data structure.


var arr = [1,2,3,4,5]
var copiedArr = JSON.parse(JSON.stringify(arr))
console.log(copiedArr)

Output
[1,2,3,4,5]


Using Array.from

Array.from can also convert an iterable object into an Array.
It returns a shallow copy of the array.


var arr = [1,2,3,4,5]
var copiedArr = Array.from(arr)
console.log(copiedArr)

Output
[1,2,3,4,5]



By using Higher-Order Functions

You can also use higher-order functions like map, filter, reduce to get a shallow copy of the array.


var arr = [1,2,3,4,5]
var copiedArr = arr.filter(() => true)
console.log(copiedArr)

Output
[1,2,3,4,5]



Thanks for reading, please feel free to contact. 

Post a Comment

0 Comments