How to Clone an Array in JavaScript

Array.slice(), Array.from(), Array.map() and Spread Operator (...)

Ashish Lahoti

Last Modified: June 18, 2020

Page content

In this tutorial, we’ll learn how to clone an Array in JavaScript and also learn the difference between shallow copy and deep copy of an Array.

Here is a quick view of different ways to clone an array:

/** Shallow Copy */
const fruits = ['apple', 'banana', 'mango'];

// 1. ES6 Spread Operator
[...fruits];

// 2. Array.slice
fruits.slice();

// 3. Array.from
Array.from(fruits);

/** Deep Copy */
const grocery = [['apple', 'banana', 'mango'], 
        ['onion', 'potato', 'tomato'], 
        ['milk', 'juice']];

// 1. JSON.stringify & JSON.parse
JSON.parse(JSON.stringify(grocery));

// 2. map
grocery.map(element => [...element]);

Shallow Copy

We’ll look at various methods to create a shallow copy of an Array in JavaScript. Shallow copy means the first level is copied and deeper levels are referenced.

Shallow copy is good enough when you are working with one-dimensional array. Let’s look at different ways to clone an array using shallow copy:

ES6 Spread Operator

If you have started using ES6 then it is recommended to use spread operator to clone an array in JavaScript. It’s short syntax is very handy.

const fruits = ['apple', 'banana', 'mango'];
const cloneFruits = [...fruits];
// ['apple', 'banana', 'mango']

Array.slice()

If you are still working old way then Array.slice can be used to clone an array:

const fruits = ['apple', 'banana', 'mango'];
const cloneFruits = fruits.slice();
// ['apple', 'banana', 'mango']

Array.from()

We can also use Array.from method to clone an array:

const fruits = ['apple', 'banana', 'mango'];
const cloneFruits = Array.from(fruits);
// ['apple', 'banana', 'mango']

Problem with Shallow Copy

Let’s see how shallow copy behaves with multi-dimensional (nested) array:

const fruits  = ['apple', 'banana', 'mango'];
const veggies = ['onion', 'potato', 'tomato'];
const liquids = ['milk', 'juice'];

const grocery = [fruits, veggies, liquids];
const groceryCopy = [...grocery];

grocery[2].push('beer');

console.log(grocery);
console.log(groceryCopy);
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice', 'beer']]
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice', 'beer']]
// They've both been changed because they share references

We see that both Array and its shallow copy have been changed because they share the reference. Remember, deeper levels are referenced in shallow copy.

Deep copy

We can use deep copy instead to solve the problem arises with shallow copy of multi-dimensional (nested) array. Let’s look at different ways to clone an array using deep copy:

JSON.stringify() and JSON.parse()

We can make a deep copy of an Array using the combination of JSON.stringify and JSON.parse

JSON.stringify turns an object into a string.
JSON.parse turns a string into an object.

const fruits  = ['apple', 'banana', 'mango'];
const veggies = ['onion', 'potato', 'tomato'];
const liquids = ['milk', 'juice'];

const grocery = [fruits, veggies, liquids];
const groceryCopy = JSON.parse(JSON.stringify(grocery));

grocery[2].push('beer');

console.log(grocery);
console.log(groceryCopy);
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice', 'beer']]
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice']]
// These two arrays are completely separate!

Array.map()

You can also make a deep copy of multi-dimensional (nested) Array by iterating and make a copy at deeper levels by yourself using Array.map

const fruits  = ['apple', 'banana', 'mango'];
const veggies = ['onion', 'potato', 'tomato'];
const liquids = ['milk', 'juice'];

const grocery = [fruits, veggies, liquids];
const groceryCopy = grocery.map(element => [...element]);

grocery[2].push('beer');

console.log(grocery);
console.log(groceryCopy);
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice', 'beer']]
// (3) [['apple', 'banana', 'mango'], ['onion', 'potato', 'tomato'], ['milk', 'juice']]
// These two arrays are completely separate!

Please note that the above example makes a deep copy of two-dimensional array. You need to iterate deeper if Array has more nested levels.