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.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.