Duplicating an array is something that we’ve to do a lot in our JavaScript apps.
In this article, we’ll look at how we can duplicate arrays in JavaScript.
Loops
One way to duplicate a JavaScript array is to use a loop.
For instance, we can use a for-of loop by writing:
const arr = [1, 2, 3]
const clone = []
for (const a of arr) {
clone.push(a)
}
console.log(clone)
We loop through arr with a for-of loop and call push on clone to add the items into clone .
And so clone should have the same entries as arr .
We can also use a while loop to loop through the array.
For example, we write:
const arr = [1, 2, 3]
const clone = []
let i = 0;
while (i < arr.length) {
clone.push(arr[i])
i++
}
console.log(clone)
We get the item by its index with the square brackets and do the same push operator.
Then we increment the i value to move to the next element in the next iteration.
Also, we can use a plain for loop to do the same thing:
const arr = [1, 2, 3]
const clone = []
for (let i = 0; i < arr.length; i++) {
clone.push(arr[i])
}
console.log(clone)
We put the index changing logic all in the parentheses.
Array.prototype.slice
The slice method returns a clone of the array we’re calling it on if there’re no arguments passed in.
For instance, we can write:
const arr = [1, 2, 3]
const clone = arr.slice()
console.log(clone)
And we get the same result as before.
Array.from
The Array.from method is a static array method that lets us create an array from another array.
Therefore, we can use it to create a clone of the array.
Its first argument is an array or an array-like object we want to create the derived array from.
And the 2nd argument is a function that lets us map the values of the object or array in the first argument and map them to different values.
For example, we can write:
const arr = [1, 2, 3]
const clone = Array.from(arr, a => a)
console.log(clone)
We call Array.from with the arr array.
And the function just returns the value as is.
So we get the same result as in the previous example.
Array.prototype.concat
The concat array instance method also returns an array by combining the array that it’s called with the one that we pass into the argument.
So to use it to clone an array, we can write:
const arr = [1, 2, 3]
const clone = arr.concat([])
console.log(clone)
or:
const arr = [1, 2, 3]
const clone = [].concat(arr)
console.log(clone)
The order doesn’t matter since we only have arr and an empty array.
Either way, we get a clone of arr returned.
Spread Operator
The spread operator also lets us duplicate an array.
For instance, we can write:
const arr = [1, 2, 3]
const clone = [...arr]
console.log(clone)
to clone arr with the spread operator.
So we get the same result as in the previous examples.
Array.prototype.map
The map method lets us return an array that has the values mapped from the original array.
To return a clone of the original array, we just pass in a callback that returns the values being iterated through as-is.
For instance, we can write:
const arr = [1, 2, 3]
const clone = arr.map(a => a)
console.log(clone)
to call map with a call that returns the value being iterated through as-is.
And we get the same result as before.
Conclusion
There’re many ways to clone an array with JavaScript.
The easiest way would be to use the spread operator.
It’s also very fast.
