We will see how to copy array items into another array in JavaScript. This operation is valuable when you need to generate a new array containing either identical or a subset of elements from an original array.

These are the following ways to solve this problem:

Approaches 1: Using the Spread Operator (…)

The spread operator (…) is a concise syntax introduced in ES6 that allows us to expand iterable objects, like arrays, into individual elements. To copy an array using the spread operator, you simply spread the elements of the original array into a new array literal.

Syntax:

const copiedArray = [...originalArray];

Example: In this example, we will see the use of the spread operator.

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [...originalArray];

// Output: [1, 2, 3, 4, 5]
console.log(copiedArray); 

[ 1, 2, 3, 4, 5 ]

Approach 2: Using slice() Method

The slice() method is an array method in JavaScript that returns a shallow copy of a portion of an array into a new array. When called without any arguments, it can be used to copy the entire array.

Syntax:

const copiedArray = originalArray.slice();

Example: In this example, we will see the use of the slice() Method.

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();

// Output: [1, 2, 3, 4, 5]
console.log(copiedArray); 

[ 1, 2, 3, 4, 5 ]

Approach 3: Using apply() Method

The apply() method is an older approach to copying an array, but it is less commonly used compared to the spread operator and slice() method. The apply() method calls a function with a given value and an array of arguments. To copy an array using apply(), you can use the concat() method along with apply() to concatenate the elements of the original array into a new array.

Syntax:

const copiedArray = Array.apply(null, originalArray);

Example: In this example, we will see the use of apply() Method.

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = Array.apply(null, originalArray);

// Output: [1, 2, 3, 4, 5]
console.log(copiedArray); 

[ 1, 2, 3, 4, 5 ]

Approach 4: Using Array.concat() Method

This approach concatenates the source array with an empty array using the Array.prototype.concat() method, which returns a new array with all the elements.

Syntax:

const newArray = [].concat(sourceArray);

Example: In this example, we will see the use of Array.concat() Method.

const sourceArray = [1, 2, 3, 4, 5];
const newArray = [].concat(sourceArray);

console.log(newArray);

[ 1, 2, 3, 4, 5 ]

Approach 5: Using push() Method

In JavaScript, to copy array items into another array using the push method, iterate over the given array and use push to add each item to our result array

Syntax:

arr.push(element0, element1, … , elementN)

Example: In this example, we use the push() method to copy array items into another array.

// Source array
let array1 = [10, 20, 30, 40, 50];
let result = [];

// Copy items from array1 to result using push()
for (let i = 0; i < array1.length; i++) {
    result.push(array1[i]);
}

console.log(result);

[ 10, 20, 30, 40, 50 ]

Approach 6: Using map() Method

JavaScript map method can be used to copy array items into another array. By applying a callback function that returns the original item, a new array is created with copied items,

Syntax:

map(function (element) { /* … */ })

Example: In this example, we are using the map() method to copy an array item into another array.

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

console.log(result);

[ 5, 10, 15, 20, 25 ]

Approach 7: Using Array.from() Method

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. This method can be a straightforward way to copy the elements of an existing array into a new one.

Example: In this example, we will use the Array.from() method to copy the elements of an array.

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

// Output: [1, 2, 3, 4, 5]
console.log(copiedArray); 

[ 1, 2, 3, 4, 5 ]

Using Array.from() Method with a Mapping Function

The Array.from() method in JavaScript creates a new, shallow-copied Array instance from an array-like or iterable object. It allows you to specify a mapping function that transforms each element of the original array into elements of the new array.

Example: This approach leverages Array.from() in conjunction with a mapping function to provide a concise and flexible way to copy array items. It’s particularly useful when you need to perform a transformation on each element.

// Source array
const sourceArray = [1, 2, 3, 4, 5];

// Using Array.from() with a mapping function to copy array items
const copiedArray = Array.from(sourceArray, item => item);

console.log(copiedArray);

[ 1, 2, 3, 4, 5 ]