Progress

3 ways to copy or clone array in Javascript

3 ways to copy or clone array in Javascript

It is often hard for beginners to copy or clone an array. There are some fundamental concepts like mutable and immutable objects in Javascript which you must need to know.

How to clone array in Javascript?

Here are the few methods to copy an array in Javascript. You can choose the one which fits best for your need.

Using Modern ES6 Spread Operator

This is the latest and best method to clone an array in Javascript. This method is much more useful in dealing with React.js state.

Copy
const originalArray = [2,4,6,8,10]
const clone = [...originalArray]

The spread operator (…) spreads the elements of an iterable like array or string in Javascript.

The spread operator is much more powerful then it seems in this situation.

Using Slice

This is yet another popular way to copy an array in Javascript.

Copy
const originalArray = [1,2,3,4,5]
const clone = originalArray.slice()

Slice is generally used to get an subarray from an starting index to end index (not included).

Using Concat

This method is another popular way to copy an array in Javascript.

Copy
const originalArray = [1,2,3,4,5]
const clone = [].concat(originalArray)

Concat is very useful method to merge two iterable. In this way we take an empty array and concat the original array into it. It creates a fresh copy of the array.

Mutable vs Immutable Objects Javascript

I became familiar with the term mutable and immutable from Python. The concept follows in Javascript too.

Mutable are those values which we can change once initialized like an object, array, function etc.

Immutable objects are those objects which cannot be changed once initialized like primitive data types. It is important to note that we can only reference immutable types to the new value and old value becomes garbage value.

Mutable objects are reference type objects which means if we copy mutable objects using = operator they point to same memory location.

Why we do not use = assignment operator?

This is an interesting question.

As we know that there are two types of objects in Javascript, mutable and immutable and an array is a mutable object.

Here is an example what it means.

Copy
originalArray = [1,2,3,4,5]
clone = originalArray

#Here begins the problem
clone[0] = 100

console.log(originalArray) # [100,2,3,4,5]
console.log(clone) #[100, 2,3,4,5]

OMG. I only changed the clone object, how the originalArray changed?

Here is the concept.

The = operator only copy the reference of the originalArray to the clone. It means that they refer to the same array in the memory.

This is why we do not use the = operator to copy mutable objects.

The = operator works only to copy immutable items.

Spread operator create Shallow copy

What do you think about cloning this array [[1,2,3], [4,5,6], [7,8,9]].

Can we spread operator to create a copy of this array?

This is an important use case to understand because you will face this problem frequently when dealing with the spread operator.

Note that the spread operator only copy the values at one level. That means the nested items will still be reference type array.

Here is an example that describes the same.

Copy
const originalArray = [[1,2,3], [4,5,6], [7,8,9]]
const clone = [...originalArray]

clone[0] = 10
clone[1][0] = 77

#clone = [10, [77,5,6], [7,8,9]]
#originalArray = [[1,2,3], [77,5,6], [7,8,9]]

Now you can see this problem in action.

The spread operator only copy one level of iterable. The other nested items are still reference types or mutable.

Conclusion

All the ways mentioned above are good to use in any project. I personally prefer the spread operator because it works efficiently and syntax is clean.

You can also go for concat or slice as you see fit.

If you have any problem or suggestion then feel free to ask in comments.

Share the Post ;)

Related Posts