How can I clone an array in JavaScript?

JavaScript, Array · Jun 12, 2021

JavaScript provides quite a few ways to clone an array, most of which are pretty similar in terms of performance and results. Here's a quick rundown of some of the available options.

The spread operator

ES6 introduced the spread operator (...), which provides probably the easiest and most common way to create a shallow clone of an array.

let x = [1, 2, 3, 4];
let y = [...x];

Array.from()

Array.from() has a very powerful API that can be used for many different things, including creating a copy of an array.

let x = [1, 2, 3, 4];
let y = Array.from(x);

Array.prototype.slice()

Similarly to the spread operator, Array.prototype.slice() can be used to create a shallow copy of an array.

let x = [1, 2, 3, 4];
let y = x.slice();

Array.prototype.map()

Looking into one of the more unorthodox options, Array.prototype.map() can be used to map each element of an array to itself to create a new array.

let x = [1, 2, 3, 4];
let y = x.map(i => i);

Array.prototype.filter()

Similarly, Array.prototype.filter() can be used to return true for each and every element, resulting in a new array with all of the original array's elements.

let x = [1, 2, 3, 4];
let y = x.filter(() => true);

Object.assign()

Finally, Object.assign() can be used in the exact same way as it's used to create a clone of an object, but for an array instead.

let x = [1, 2, 3, 4];
let y = Object.assign([], x);

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Initialize array with range

    Initializes an array containing the numbers in the specified range where start and end are inclusive with their common difference step.

    JavaScript, Array · Oct 22, 2020

  • Initialize array with reversed range

    Initializes an array containing the numbers in the specified range (in reverse) where start and end are inclusive with their common difference step.

    JavaScript, Array · Oct 20, 2020

  • How do I compare two arrays in JavaScript?

    Learn how you can compare two arrays in JavaScript using various different techniques.

    JavaScript, Array · Sep 27, 2021