published: 30 Mar 2022
2 min read
How to copy an array in JavaScript
Since arrays are collection-like objects in JavaScript, you can not simply use the equal operator (=) to copy the values. It will only copy the reference to the original object and not the elements of the array.
In vanilla JavaScript, there are multiple ways to clone the contents of an array. You can either use the Array.slice() method, the Array.from() method, or the spread operator (...) to duplicate an array. You don't need to use a loop to iterate over all elements of an array and push them into another array.
Note: If you want to create a deep clone of an array, take a look at this article.
Array.slice() Method
The simplest and quickest way to copy the contents of an existing array into a new array is by using the slice() method without any parameter:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using 'slice()'
const moreFruits = fruits.slice();
console.log(moreFruits);
// ['🍑', '🍓', '🍉', '🍇', '🍒']
In the above code, the slice() method creates a shallow copy of the original array, and not a deep clone. The original array remains unchanged. If the original array contains objects, only their references will be copied to the new array.
Array.from() Method
Another way to clone an array in JavaScript is by using the Array.from() method. It creates a new, shallow-copied Array object from an array-like or iterable object.
Here is an example:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using 'Array.from()'
const moreFruits = Array.from(fruits);
The Array.from() method was introduced in ES6, so it only works in modern browsers. But you can use a polyfill to push the browser support way back to IE6.
Spread Operator
The spread operator (...) is another option available in modern JavaScript (ES6 and higher) that can be used to clone an array by 'spreading' its elements:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using spread operator
const moreFruits = [...fruits];
Just like Array.slice(), the spread operator creates a shallow copy of the original array. It only goes one-level down when cloning an array. If you're coping multi-dimension array or an array that contains objects, you have to look for other alternatives.
Array.concat() Method
Although the Array.concat() method is originally used for merging two arrays into one, you can use it for cloning an array as well:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// merge 'fruits' with emtpy array to
// create a new array
const moreFruits = [].concat(fruits);
Take a look at this guide to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.
Are we missing something? Help us improve this article. Reach out to us.
How to copy an array in JavaScript
Since arrays are collection-like objects in JavaScript, you can not simply use the equal operator (=) to copy the values. It will only copy the reference to the original object and not the elements of the array.
In vanilla JavaScript, there are multiple ways to clone the contents of an array. You can either use the Array.slice() method, the Array.from() method, or the spread operator (...) to duplicate an array. You don't need to use a loop to iterate over all elements of an array and push them into another array.
Note: If you want to create a deep clone of an array, take a look at this article.
Array.slice() Method
The simplest and quickest way to copy the contents of an existing array into a new array is by using the slice() method without any parameter:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using 'slice()'
const moreFruits = fruits.slice();
console.log(moreFruits);
// ['🍑', '🍓', '🍉', '🍇', '🍒']
In the above code, the slice() method creates a shallow copy of the original array, and not a deep clone. The original array remains unchanged. If the original array contains objects, only their references will be copied to the new array.
Array.from() Method
Another way to clone an array in JavaScript is by using the Array.from() method. It creates a new, shallow-copied Array object from an array-like or iterable object.
Here is an example:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using 'Array.from()'
const moreFruits = Array.from(fruits);
The Array.from() method was introduced in ES6, so it only works in modern browsers. But you can use a polyfill to push the browser support way back to IE6.
Spread Operator
The spread operator (...) is another option available in modern JavaScript (ES6 and higher) that can be used to clone an array by 'spreading' its elements:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// clone 'fruits' using spread operator
const moreFruits = [...fruits];
Just like Array.slice(), the spread operator creates a shallow copy of the original array. It only goes one-level down when cloning an array. If you're coping multi-dimension array or an array that contains objects, you have to look for other alternatives.
Array.concat() Method
Although the Array.concat() method is originally used for merging two arrays into one, you can use it for cloning an array as well:
const fruits = ['🍑', '🍓', '🍉', '🍇', '🍒'];
// merge 'fruits' with emtpy array to
// create a new array
const moreFruits = [].concat(fruits);
Take a look at this guide to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
