# How to copy an array in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 11, 2020, updated Jun 16, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-copy-array

> A quick guide to learn how to copy or clone an array into a new array by using vanilla JavaScript.

Since [arrays](https://attacomsian.com/blog/javascript-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()](https://attacomsian.com/blog/javascript-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](https://attacomsian.com/blog/javascript-deep-clone-array).

## `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()](https://attacomsian.com/blog/javascript-arrays#slice) method without any parameter:

```javascript
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()](https://attacomsian.com/blog/javascript-array-from) method. It creates a new, shallow-copied `Array` object from an array-like or iterable object.

Here is an example:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#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:

```javascript
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:

```javascript
const fruits = ['?', '?', '?', '?', '?'];

// merge `fruits` with emtpy array to 
// create a new array
const moreFruits = [].concat(fruits);
```

Take a look at [this guide](https://attacomsian.com/blog/javascript-arrays#slice) to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.