Copy Array Items into Another Array in JavaScript

In this article, we will see how to copy array items into another array in JavaScript. Copying the array of items into another array can be useful when you want to create a new array with the same or a subset of elements from an existing 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.

Javascript

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

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

Output

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

Javascript

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

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

Output

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

Javascript

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

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

Output

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

Javascript

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

console.log(newArray);

Output

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

Javascript

// 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);

Output

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

Javascript

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

console.log(result);

Output

[ 5, 10, 15, 20, 25 ]