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. For this, there are various approaches, which are described below:
- Using the spread operator (…)
- Using slice() Method
- Using apply() Method
- Using Array.concat() Method
- Using push() Method
- Using map() Method
We will explore every approach for copying the array items into another array, along with understanding their basic implementations.
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); |
[ 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); |
[ 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); |
[ 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); |
[ 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); |
[ 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); |
[ 5, 10, 15, 20, 25 ]
