How to Copy Array Items into Another Array in JavaScript

As a programmer, you may come across situations where you need to copy the items of an array into another array.

There can be many reasons for doing this, for example, you may want to manipulate the original array without altering it, or you may need to create a new array that contains the same elements as an existing array.

Regardless of the reason, copying array items into another array in JavaScript is quite simple, and in this tutorial, we will explore the different methods to achieve this.

Shallow Copy

The simplest way to copy an array is to use the spread operator (…).

The spread operator is a syntax that allows you to spread an array into individual elements.

When you spread an array, it creates a shallow copy of the original array, meaning it only copies the elements of the array and not the objects inside of it.

Here’s an example:

let originalArray = [1, 2, 3, 4, 5];
let shallowCopyArray = [...originalArray];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(shallowCopyArray); // [1, 2, 3, 4, 5]

In this example, we created a shallow copy of the original array using the spread operator.

The original array and the shallow copy array both contain the same values, but they are separate arrays.

Deep Copy

Sometimes, you need to copy the entire object inside an array, including nested objects and arrays.

This is called a deep copy, and it creates a completely separate copy of the original array, including all the objects and arrays within it.

Here’s an example of how to create a deep copy using the JSON.stringify() method and JSON.parse() method:

let originalArray = [{name: 'John'}, [1, 2, 3]];
let deepCopyArray = JSON.parse(JSON.stringify(originalArray));

console.log(originalArray); // [{name: 'John'}, [1, 2, 3]]
console.log(deepCopyArray); // [{name: 'John'}, [1, 2, 3]]

In this example, we created a deep copy of the original array by stringifying it using JSON.stringify() and then parsing it back into an array using JSON.parse().

This method is great for deep copying arrays, but it may not be efficient for large arrays with a lot of data.

Using Array.slice() Method

Another way to create a shallow copy of an array is by using the Array.slice() method.

The slice() method creates a new array with the elements from the original array and returns it.

By default, the slice() method copies all elements from the start of the original array to the end, but you can also specify a start and end index to only copy a portion of the array.

Here’s an example:

let originalArray = [1, 2, 3, 4, 5];
let shallowCopyArray = originalArray.slice();

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(shallowCopyArray); // [1, 2, 3, 4, 5]

In this example, we created a shallow copy of the original array using the slice() method.

The original array and the shallow copy array both contain the same values, but they are separate arrays.

Using Array.concat() Method

Another way to copy items from one array to another is by using the Array.concat() method.

The concat() method creates a new array that contains the elements of the original array, as well as any additional elements that you specify.

Here’s an example:

let originalArray = [1, 2, 3, 4, 5];
let concatArray = originalArray.concat();

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(concatArray); // [1, 2, 3, 4, 5]

In this example, we created a new array, concatArray, that contains the same elements as the originalArray, using the concat() method.

Using Array.forEach() Method

If you prefer using a loop to copy items from one array to another, you can use the Array.forEach() method.

The forEach() method allows you to iterate over each element in an array and perform an action on it.

Here’s an example:

let originalArray = [1, 2, 3, 4, 5];
let forEachArray = [];

originalArray.forEach(element => forEachArray.push(element));

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(forEachArray); // [1, 2, 3, 4, 5]

In this example, we created a new array, forEachArray, and used the forEach() method to iterate over each element in the originalArray.

For each element, we used the push() method to add the element to the forEachArray.

Conclusion

In conclusion, there are several ways to copy items from one array to another in JavaScript, including shallow copy, deep copy, Array.slice() method, Array.concat() method, and Array.forEach() method.

Choose the method that best suits your needs and requirements.

We hope this tutorial has provided you with a good understanding of how to copy items from one array to another in JavaScript.

If you have any questions or need further clarification, feel free to ask in the comments section below.