How to copy or clone an array in JavaScript

📋 Table Of Content

In this post we will learn how to copy and clone or duplicate an array in JavaScript.

As a beginner, the concept of copying and cloning an array can be confusing. To understand the concept properly one need to understand what are mutable and immutable objects are in JavaScript.

In this post we will see different ways on how we can copy an array using in-built JavaScript methods like:

Spread Operator ( ... )
slice()
concat()
Array.from()

So lets see each method with examples.

Using ES6 Spread Operator

This is a modern way to copy an array.

The Spread Operator ( ... ) allows irritable like array to copy all or a part of an existing array or object into an another new array or object.

Example

const originalArray = [1,2,3,4,5]
const newArray = [...originalArray]

console.log(originalArray);
//output: [ 1, 2, 3, 4, 5 ]
console.log(newArray)
//output: [ 1, 2, 3, 4, 5 ]

Using slice() method

This is another way in JavaScript to copy or clone an array.

The slice() method extract the element of a given array and return a new string without modifying the original array.

It extract the element from the start index to the end index ( not inclusive ).

Here's an example to copy an array using slice().

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

console.log(originalArray);
// output : [ 1, 2, 3, 4, 5 ]
console.log(copyArray)
// output : [ 1, 2, 3, 4, 5 ]

Using concat() method

The concat() method is use to merge two iterable in JavaScript.

We can use concat() to clone an array by taking an empty array and concatenate the original array into it. This will create a new array.

Lets see with an example

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

console.log(originalArray);
// output : [ 1, 2, 3, 4, 5 ]
console.log(copyArray)
// output : [ 1, 2, 3, 4, 5 ]

Using Array.from() method

This method helps us to duplicate an array in JavaScript.

The Array.from() is a static method which create a shallow-copied array of iterable like an array that contains all the element of the targeted array and returns us a new array.

Let's see an example using Array.from().

const originalArray = [1,2,3,4,5]
const copyArray = Array.from(originalArray)

console.log(originalArray);
// output : [ 1, 2, 3, 4, 5 ]
console.log(copyArray)
// output : [ 1, 2, 3, 4, 5 ]

Why not use = assignment operator to clone an array?

Since array is a mutable object which means we can change it's value after we initialise it. So we cannot use the = operator to copy it's value.

Let us see an example using = operator to copy an array to understand it better.

const originalArray = [1,2,3,4,5]
const copyArray = originalArray

copyArray[0] = 9 // change the 0 index value to 9

console.log(originalArray);
// output : [ 9, 2, 3, 4, 5 ]
console.log(copyArray)
// output : [ 9, 2, 3, 4, 5 ]

Here you can see when we change the copyArray value the originalArray value also changes. This is because when we use the = operator, we are just copying the reference of the originalArray. It is referencing to the same array in the memory.

And this is the reason why we don't use the = operator to clone or copy an mutable object.

How To Convert An Array To Object In Javascript?

How To Remove Object From Array In JavaScript?

Convert Javascript Array To Object Of Same Keys/Values

Ways To Loop An Array In JavaScript

Append Item To Array In JavaScript