Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add two arrays into a new array in JavaScript?
An ordered group of indexed elements is represented by an array, which is a type of data structure. Merging two or more arrays to create a larger array that contains all the items from the original arrays is a typical operation done on multiple arrays.
In JavaScript, there are several ways to add two arrays together and create a new array. This article will go over how to properly use the concat() method and spread operator (...) to combine two separate arrays into one newly created array.
Additionally, each of these methods will be discussed with examples so that you can better understand how they work and know when it is best to use them.
Using concat() Method
The concat() method connects two or more arrays and returns a new array comprising the combined arrays. The original arrays remain unchanged by the concat() method.
Syntax
array1.concat(array2, array3, ..., arrayX)
Example
In the following example, we use the concat() method to merge two arrays and obtain a new array:
<!DOCTYPE HTML>
<html>
<body>
<script>
var arr1 = ["MSD", "VIRAT"];
var arr2 = ["YUVRAJ", "ABD"];
var arr3 = arr1.concat(arr2);
document.write("Original arrays remain unchanged:<br>");
document.write("arr1: " + JSON.stringify(arr1) + "<br>");
document.write("arr2: " + JSON.stringify(arr2) + "<br>");
document.write("New merged array: " + JSON.stringify(arr3));
</script>
</body>
</html>
Original arrays remain unchanged: arr1: ["MSD","VIRAT"] arr2: ["YUVRAJ","ABD"] New merged array: ["MSD","VIRAT","YUVRAJ","ABD"]
Using the Spread Operator
The spread operator (...) is a JavaScript operator that allows an expression to be expanded in places where multiple elements are expected. It expands an iterable object such as an array into its individual values.
Syntax
var newArray = [...array1, ...array2];
Example
Let's look at the following example, where we use the spread operator to merge two arrays to form a third array:
<!DOCTYPE HTML>
<html>
<body>
<script>
var car = ["BMW","BENZ","AUDI"];
var bike = ["RX100","RC390","VESPA"];
const merged = [...car, ...bike];
document.write("First Array: " + JSON.stringify(car) + "<br>");
document.write("Second Array: " + JSON.stringify(bike) + "<br>");
document.write("Merged Array: " + JSON.stringify(merged));
</script>
</body>
</html>
First Array: ["BMW","BENZ","AUDI"] Second Array: ["RX100","RC390","VESPA"] Merged Array: ["BMW","BENZ","AUDI","RX100","RC390","VESPA"]
Using push() with Spread Operator
The push() method adds new elements to an existing array and modifies the original array. When combined with the spread operator, it can merge arrays by pushing all elements from one array into another.
Syntax
array1.push(...array2)
Example
Let's consider the following example, where we use the push() method with spread operator to add elements from one array to another:
<!DOCTYPE HTML>
<html>
<body>
<script>
const movie = ['Balu', 'Pokiri'];
const hero = ['Pavankalyan', 'MaheshBabu'];
document.write("Before push - movie: " + JSON.stringify(movie) + "<br>");
movie.push(...hero);
document.write("After push - movie: " + JSON.stringify(movie) + "<br>");
document.write("Note: Original movie array is modified");
</script>
</body>
</html>
Before push - movie: ["Balu","Pokiri"] After push - movie: ["Balu","Pokiri","Pavankalyan","MaheshBabu"] Note: Original movie array is modified
Comparison of Methods
| Method | Creates New Array? | Modifies Original? | Best Use Case |
|---|---|---|---|
concat() |
Yes | No | When you need to preserve original arrays |
| Spread Operator | Yes | No | Modern syntax, clean and readable |
push() + Spread |
No | Yes | When you want to modify existing array |
Conclusion
The spread operator is the most modern and preferred method for merging arrays as it provides clean syntax. Use concat() for broader browser compatibility, and push() with spread when you need to modify the original array.
2K+ Views
