How to Clone an Array in JavaScript

1. Clone an Existing Array Using the values() Function in JavaScript
2. Clone an Array Using the concat() Function in JavaScript
3. Clone an Array Using the slice() Function in JavaScript
4. Clone an Array Using a Loop in JavaScript
5. Clone an Array Using the map() Function in JavaScript

This tutorial will discuss how to clone an existing array using the following functions in JavaScript: values(), concat(), slice(), loop, and map().

Clone an Existing Array Using the values() Function in JavaScript

To clone an existing array, we can use the values() function in JavaScript. This command makes another array with the same values as in the given array. For example, let’s create an array and clone it using the values() function. See the code below.

var ArrA = [1, 2, 3];
var ArrB = Object.values(ArrA);
console.log(ArrB)

Output:

[1, 2, 3]

We can also test the performance of this function using the Date() function. The Date() function returns the current time in milliseconds. For example, let’s create a 1000-by-1000 array and clone it using the values() function and check its performance using the Date() function. See the code below.

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
ArrB = Object.values(ArrA);
console.log(new Date() - TimeStart, 'ms');

Output:

19 ms

This test is performed on the Chrome browser, but it may change according to your system and browser. You can use this method to check the performance of different functions.

Clone an Array Using the concat() Function in JavaScript

We can also use the concat() function to clone an existing array in JavaScript. This function concatenates one array with another array so that we can create a new one by concatenating an empty array with the existing one. For example, let’s create an array and clone it using the concat() function. See the code below.

var ArrA = [1, 2, 3];
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(ArrB)

Output:

[1, 2, 3]

We can also test the performance of the concat() function using the Date() function. The Date() function returns the current time in milliseconds. For example, let’s create a 1000-by-1000 array and clone it using the concat() function and check its performance using the Date() function. See the code below.

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = [];
ArrB = ArrB.concat(ArrA);
console.log(new Date() - TimeStart, 'ms');

Output:

12 ms

As you can observe in the output, it takes 12 milliseconds to clone a 1000-by-1000 array using the concat() function.

Clone an Array Using the slice() Function in JavaScript

We can also use the slice() function to clone an array in JavaScript. This function returns the selected elements or values of an existing array and saves it in another array. For example, let’s create an array using an existing array with the slice() function. See the code below.

var ArrA = [1, 2, 3];
var ArrB = [];
ArrB = ArrA.slice();
console.log(ArrB)

Output:

[1, 2, 3]

We can also test the performance of the slice() function using the Date() function. The Date() function returns the current time in milliseconds. We can record the time before and after the clone operation to check the time taken by this function. For example, let’s create a 1000-by-1000 array and clone it using the slice() function and check its performance using the Date() function. See the code below.

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = ArrA.slice();
console.log(new Date() - TimeStart, 'ms');

Output:

14 ms

In the output, it takes fourteen milliseconds to clone a 1000-by-1000 array using the slice() function.

Clone an Array Using a Loop in JavaScript

We can also use a loop to clone an existing array. We need to copy each element from one array to another using a loop. For example, let’s use a while loop to clone an existing array. See the code below.

var ArrA = [1, 2, 3];
var ArrB = [];
var i = ArrA.length;
while (i--) {
  ArrB[i] = ArrA[i];
}
console.log(ArrB)

Output:

[1, 2, 3]

We can also test the performance of this method using the Date() function; this command returns the current time in milliseconds. Let’s check the performance of this method using a 1000-by-1000 array. See the code below.

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
var ArrB = [];
var i = ArrA.length;
while (i--) {
  ArrB[i] = ArrA[i];
}
console.log(new Date() - TimeStart, 'ms');

Output:

125 ms

As you can take note in the output, it takes 125 milliseconds to clone a 1000-by-1000 array using a while loop.

Clone an Array Using the map() Function in JavaScript

To clone an existing array, we can also use the map() function in JavaScript. This command makes another array by calling a function for each element of the existing array. For example, let’s create an array using an existing array using the map() function. See the code below.

var ArrA = [1, 2, 3];
var ArrB = ArrA.map(function(i) {
  return i
});
console.log(ArrB)

Output:

[1, 2, 3]

We can also test the performance of the map() function using the Date() function. Let’s check how this function performs against a 1000-by-1000 array. See the code below.

num = 1000 * 1000;
TimeStart = +new Date();
ArrA = Array(num);
ArrB = ArrA.map(function(i) {
  return i
});
console.log(new Date() - TimeStart, 'ms');

Output:

25 ms

Based on the output, it takes 25 milliseconds to clone a 1000-by-1000 array using the map() function.