How to copy or clone an array in JavaScript

Clone an array in javaScript: Cloning or Copying an array in JavaScript sometimes confusing for beginners. In JavaScript array is reference type so we can not directly copy an array to other. In this article I will tell you top 3 ways to clone an array in JavaScript. So now let’s see in details with examples.

  1. Using slice() method
  2. Using concat() method
  3. Using ES6 Spread operator.
clone an array in JavaScript

Why not to use Assignment Operator(=) to clone an array in javaScript?

Before jumping to the methods of cloning array in JavaScript, first we should understand why we can not use assignment operator (=) to create a clone of original array. As we discussed already that an array is reference type in JavaScript which means array is of type object so if we create a new array and assign original array to it using = operator then both will point to same memory location.

Now if we change our original array the new array will also be changed. So because of this we can not directly use assignment operator to clone an array in JavaScript. See the code below for better understanding.

const originalArray = [1,2,3]
const cloneArray = originalArray

//Before updating the originalArray
console.log("original Array: ",originalArray)
console.log("cloned Array: ",cloneArray)

//Arrays are mutable so we can change array content anytime
originalArray[1]="Doe"

//After updating the originalArray
console.log("original Array: ",originalArray)
console.log("cloned Array: ",cloneArray)

Output

original Array: [ 1, 2, 3 ]
cloned Array: [ 1, 2, 3 ]
original Array: [ 1, 'Doe', 3 ]
cloned Array: [ 1, 'Doe', 3 ]

Using slice() Method

In JavaScript slice() method is used to get a substring or subarray from a string or array. We can pass two parameters in Slice() method 1st one is start index 2nd one is end index to which we need to copy the array. Both of these parameters are optional and if we don’t pass any of the parameter this method consider it from start to end.

Syntax

slice(start_index, end_index);

Example

const originalArray = ['a', 'b', 'c', 'd'];
const cloneArray = originalArray.slice();

console.log("<--Before updating Original Array-->");
console.log("Original Array is: ",originalArray);
console.log("Cloned Array is: ",cloneArray);

//Updating Original Array
originalArray[0]="GeekyBeginners";

console.log("<--After updating Original Array-->");
console.log("Original Array is: ",originalArray);
console.log("Cloned Array is: ",cloneArray);

Output

<--Before updating Original Array-->
Original Array is:  [ 'a', 'b', 'c', 'd' ]
Cloned Array is:  [ 'a', 'b', 'c', 'd' ]

<--After updating Original Array-->
Original Array is:  [ 'GeekyBeginners', 'b', 'c', 'd' ]
Cloned Array is:  [ 'a', 'b', 'c', 'd' ]

Using concat() Method

This is also a popular way to clone an array in JavaScript. Here we use concat() method to concat our original array to the new blank array, so that we can use this new array as the clone of original one. Let us understand by example.

Syntax

.concat(originalArray);

Example

const originalArray = ['a','b','c','d'];
const cloneArray = [].concat(originalArray);

console.log(cloneArray)

Output

["a", "b", "c", "d"]

Using ES6 Spread Operator

In modern JavaScript ES6 has introduced a new operator using which you can easily clone an array or object. This is modern ES6 Spread Operator(…). The Spread Operator spreads the iterable elements like arrays or strings into the new one. This is the recommended method to clone an array or an object in JavaScript.

Syntax

myFunction(…iterableObj);

Example

const originalArray = ['a','b','c','d'];
const cloneArray = [...originalArray]

console.log(cloneArray)

Output

["a", "b", "c", "d"]

Mutable and immutable Objects in JavaScript

If you know about Python programming language you must be familiar with these two terms. JavaScript also has a concept of mutable and immutable objects. Mutable values are those values which can be changed after initialization like Arrays, functions and objects in JavaScript. On the other hand immutable values cannot be change after they initialize, like primitive data type.

Mutable objects are reference type objects so we cannot copy mutable objects using = operator if we do so then both will point to same memory location.

Conclusion

All the methods mentioned here can be used to clone an array in JavaScript. But we will advice to use the spread operator while cloning the array because this is efficient and clean. I hope you have understood all the methods described here, if still you have any issue or want to give some suggestions comment box is open as always. Let us know how we can assist you.

Write for us
GeekyBeginners articles are written by software geeks like you. If you also would like to contribute to GeekyBeginners by writing paid articles, you can check the write for us page.

Leave a Comment