Copy Array Items Into Another Array in JavaScript

In JavaScript, copying array items into another array in JavaScript is helpful when you want to make changes to the data without affecting the original array. It helps avoid mistakes, keeps the original data safe, and is useful when you need to work with a separate copy of the array for testing or processing.

Methods to Copy Array Items Into Another Array

Below are the following methods by which we can copy array items into another array:

1. Using the Spread Operator (…)

The spread operator (…) is another modern and concise way to copy an array. It spreads the elements of the original array into a new array, creating a shallow copy.

const a1 = [1, 2, 3, 4, 5];
const a2 = [...a1];

console.log(a2); 

[ 1, 2, 3, 4, 5 ]

In this example:

• The spread syntax (…) is used to create a shallow copy of the a1.
• This method copies all elements from a1 into a2, resulting in [1, 2, 3, 4, 5] being logged to the console.
• Any changes made to a2 will not affect a1, as the two are separate arrays.

2. Using slice() Method

The slice() method is one of the simplest and most commonly used ways to copy an array. It creates a shallow copy of a portion of an array, and when used without any arguments, it copies the entire array.

const a1 = [1, 2, 3, 4, 5];
const a2 = a1.slice();

console.log(a2); 

[ 1, 2, 3, 4, 5 ]

In this example:

• The slice() method is used to create a shallow copy of the a1. It copies all elements from index 0 to the end of the array by default.
• The a2 is a new array with the same elements as a1, and the output is [1, 2, 3, 4, 5]. Any modifications to a2 will not affect the original array.

3. Using Array.concat() Method

The Array.concat() method in JavaScript copies array items into another array by merging the original array with one or more arrays or values.

const a1 = [1, 2, 3, 4, 5];
const a2 = [].concat(a1);

console.log(a2);

[ 1, 2, 3, 4, 5 ]

In this example:

• The concat() method is used to create a shallow copy of the a1 array by concatenating it with an empty array [].
• The a2 will be a new array containing the same elements as a1, resulting in [1, 2, 3, 4, 5]. Modifying a2 will not affect a1.

4. Using map() Method

If you need to copy an array and also apply some transformation to its elements, you can use map(). The map() method in JavaScript creates a new array by applying a function to each element of the original array.

const a1 = [5, 10, 15, 20, 25];
const a2 = a1.map(item => item);

console.log(a2);

[ 5, 10, 15, 20, 25 ]

In this example:

• The map() method creates a new array by applying the provided function (item => item) to each element in the a1 array, effectively returning a copy of the original array.
• The a2 array will be the same as a1, resulting in [5, 10, 15, 20, 25]. The operation does not modify the original array.

5. Using Array.from() Method

The Array.from() method creates a new array from an array-like object. It can also be used to copy an array, and you can optionally provide a map function to transform the elements.

const a1 = [1, 2, 3, 4, 5];
const a2 = Array.from(a1);

console.log(a2); 

[ 1, 2, 3, 4, 5 ]

In this example:

• The Array.from() method creates a shallow copy of the a1 array by converting it into a new array.
• The a2 will have the same elements as a1, resulting in [1, 2, 3, 4, 5].

Deep Copy Arrays

All of the methods mentioned above create shallow copies of arrays. When the array contains objects, a shallow copy means the array structure is copied, but the objects inside the array will still be referenced by both the original and the new array. Here’s an example:

const arr = [
  { name: 'mario', food: 'pizza' },
  { name: 'luigi', food: 'spaghetti' },
];

const arrCopy = [...arr];
console.log(arr === arrCopy); 
console.log(arr[0] === arrCopy[0]);

To make a deep copy of arrays, where both the array and all the objects inside it are cloned, you can use the following methods:

JSON Methods

JavaScript’s JSON.stringify() and JSON.parse()methods can be used to create a deep copy by serializing and deserializing the array:

const arr = [
  { name: 'mario', food: 'pizza' },
  { name: 'luigi', food: 'spaghetti' },
];

const arrCopy = JSON.parse(JSON.stringify(arr));
console.log(arr === arrCopy);
console.log(arr[0] === arrCopy[0]); 

false
false

In this example:

• JSON.stringify() converts the array into a JSON string.
• JSON.parse() parses the JSON string back into a new array.
• This creates a deep copy because all nested objects are also copied.

Why Copy Arrays?

In JavaScript, there are a few common reasons to copy an array:

• Avoiding Changes to the Original: If you modify an array directly, it might accidentally change parts of your code that depend on it. Copying the array ensures the original stays the same.
• Creating a Duplicate: Sometimes, you need a copy of the array to work with, without affecting the original. This is useful when you want to experiment or modify the data temporarily.
• Manipulating Data: Copying arrays is helpful when you want to change or process the data but keep the original array untouched. This way, you don’t lose the original information.

Conclusion

Copying arrays in JavaScript is a common task, and the method you choose depends on whether you need a shallow or deep copy. For shallow copies, the most straightforward options are the slice() method, the spread operator, Array.from(), and concat(). For deep copies, using JSON.parse() and JSON.stringify() is a simple solution.