Copying Arrays in JavaScript

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:

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:

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:

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:

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:

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+.

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.

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:

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:

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

• How do I convert object to JSON in JavaScript?
• How do I get the length of a string in JavaScript?
• How to send Authorization Credentials with JavaScript Fetch API?