Copying Arrays in JavaScript

To copy an array in JavaScript, you can use the built-in array.slice(), array.concat(), array.from(), array.map() methods, or the spread ("...") operator. These methods create a shallow copy of the array. To deep copy an array, you can use the new built-in structuredClone() method or sequentially convert an array to JSON using JSON.stringify() and back using JSON.parse(). When cloning an array, the original array remains unchanged. In this JavaScript Copy Array example, we use the spread operator ("...") to copy an array. Below you can see more examples of copying JavaScript arrays with a detailed description of each method. Click Execute to run the JavaScript Copy Array Example online and see the result.
Copying Arrays in JavaScript Execute
const arr = ['JavaScript', 'Copy', 'Array', 'Example'];

console.log([...arr]);



Updated: Viewed: 8751 times

What is JavaScript?

The JavaScript programming language is used in browsers and on the server (Node.js), making it a universal language across devices and platforms. The JavaScript scripting language transforms static HTML web pages into interactive pages by dynamically updating content, validating forms, playing videos, and controlling media.

What is an array in JavaScript?

JavaScript array is a collection of data that is designed to store multiple values in a single variable. The JavaScript array is created using square brackets "[...]" or with the "new Array()" constructor. Each array element has a serial number (index), allowing you to access the element by its index. In JavaScript index starts from zero. JavaScript provides a set of built-in functions for containing, joining, slicing, reversing, inserting, merging, reducing, clearing, and cloning arrays. You can also get a sum of array elements, convert string to array, convert an array to string, and convert an array to JSON.

Two ways of copying arrays in JavaScript

There are two ways to copy arrays in JavaScript:

  1. Shallow copy: when copying an array with objects, the object reference is copied into a new reference variable, and both point to the same object in memory. In this case, the source or copy changes can also affect the second object.
  2. Deep copy: when copying an array with objects, the source and copy become completely independent. Any changes to the source or copy will not affect the other object.

All of JavaScript's built-in array copying methods, such as array.slice(), array.concat(), array.from(), and the spread ("...") operator make shallow copies.

JavaScript Shallow Copy Array Examples

The following are examples of shallow copying an array in JavaScript:

Copying array using the slice() method

The array.slice() method in JavaScript is used to get the part of an array from the start index to the end index. The slice() method does not modify the original array. The following is an example of copying an array using the slice() method in JavaScript:

JavaScript Copy Array with slice() method Example
const array = ['JavaScript', 'Copy', 'Array', 'Example'];

console.log(array.slice());

// output: ['JavaScript', 'Copy', 'Array', 'Example']

Cloning array using the concat() method

The array.concat() method in JavaScript is used to concatenate two or more arrays into one. You can also use concat() method to clone an array. The concat() method returns a new array without changing the original one. The following is an example of cloning an array using the contact() method in JavaScript:

JavaScript Clone Array with concat() method Example
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

const newArray = [].concat(array);

console.log(newArray);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

Copying array using the from() method

The array.from() method in JavaScript creates a new array from the original array. This method was introduced in ES6 and only works in modern browsers. The following is an example of copying an array using the from() method in JavaScript:

JavaScript Clone Array with from() method Example
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

const newArray = Array.from(array);

console.log(newArray);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

Cloning array using the spread operator

You can use the spread operator ("...") to clone an array in JavaScript. The spread operator ("...") is available in JavaScript ES6 and above and can be used to copy an array by "expanding" its elements. The following is an example of cloning an array using the spread operator in JavaScript:

JavaScript Copy Array with Spread Operator Example
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

console.log(newArray = [...array]);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

Copying array using the map() method

The array.map() method in JavaScript creates a new array filled with the results of calling the provided function on each element in the calling array. The following is an example of copying an array using the map() method in JavaScript:

JavaScript Clone Array with map() method Example
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

const newArray = array.map((element)=>element);

console.log(newArray);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

JavaScript Deep Copy Array Examples

The following are examples of deep copying an array in JavaScript:

Creating a deep clone with the structuredClone() method

To create a deep clone of an array in JavaScript, you can use the modern structuredClone() method, which creates a deep clone of an array using the structured clone algorithm. The structuredClone() method is relatively new and is available in Chrome 98+, Firefox 94+, and Nide.js 17+.

JavaScript Deep Clone Array with structuredClone() method Example
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

const newArray = structuredClone(array);

console.log(newArray);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

Creating a deep copy with JSON.stringify() and JSON.parse()

The most popular method for deep copying arrays before structuredClone() was converting the array to a JSON string and then converting the JSON string back to an array. The main disadvantage of this method is its low performance and the limitation of working only with JSON-serializable content.

JavaScript Depp Clone Array with JSON.stringify() and JSON.parse()
const array = ['JavaScript', 'Clone', 'Array', 'Example'];

const newArray = JSON.parse(JSON.stringify(array));

console.log(newArray);

// output: ['JavaScript', 'Clone', 'Array', 'Example']

How to copy multidimensional arrays in JavaScript?

To copy multidimensional arrays in JavaScript, you can use a for loop and the array.slice() method:

JavaScript Copy Multidimensional Arrays with for loop Example
const array = [
  ['JavaScript', 'Copy', 'Array', 'Example'],
  ['JavaScript', 'Copy', 'Array', 'Example'],
  ['JavaScript', 'Copy', 'Array', 'Example']
];

let newArray = [];

for (let i = 0; i < array.length; i++)
  newArray[i] = array[i].slice();

console.log(newArray);

// output: 
// ['JavaScript', 'Clone', 'Array', 'Example']
// ['JavaScript', 'Clone', 'Array', 'Example']
// ['JavaScript', 'Clone', 'Array', 'Example']

You can also use the array.map() method instead of a for loop:

JavaScript Copy Multidimensional Arrays with array.map() Example
const array = [
  ['JavaScript', 'Copy', 'Array', 'Example'],
  ['JavaScript', 'Copy', 'Array', 'Example'],
  ['JavaScript', 'Copy', 'Array', 'Example']
];

let newArray = array.map(function(arr) {
  return arr.slice();
});

console.log(newArray);

// output: 
// ['JavaScript', 'Clone', 'Array', 'Example']
// ['JavaScript', 'Clone', 'Array', 'Example']
// ['JavaScript', 'Clone', 'Array', 'Example']

See also