Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, 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() in JavaScript
The concat() method connects up two or more arrays. A new array comprising the combined arrays is returned by the concat() method. The arrays that already exists is unaffected by the concat() technique.
Syntax
Following is the syntax for concat()
array1.concat(array2, array3, ..., arrayX)
Example
In the following example, we are running the script along with the concat() to merge two array and obtain the new array.
<!DOCTYPE HTML>
<html>
<body>
<script>
var arr1 = ["MSD", "VIRAT"];
var arr2 = ["YUVRAJ", "ABD"];
arr3 = arr1.concat(arr2);
document.write(JSON.stringify(arr3));
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an array printed which was obtained by adding two arrays by using the concat() method. This triggers on executing the script.
Using the Spread operator
The spread operator (...) is a JavaScript operator that allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected. The spread operator expands an iterable object such as an array, set, string, or even a map into its individual values.
Syntax
Following is the syntax for spread operator
var variablename1 = [...value];
Example
Let’s look at the following example, where we are using Spread operator to merge to 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 value=");
document.write(JSON.stringify(car)+"<br>");
document.write("Second Array value=");
document.write(JSON.stringify(bike)+"<br>");
document.write("After result=");
document.write(JSON.stringify(merged));
</script>
</body>
</html>
On running the above script, the web-browser displays the two arrays used in the script along with a new array, that was created by the event that gets triggered on running the script.
Using push() method in JavaScript
The push() method extends an array with new elements. The length of the array is modified by the push() method. Push() returns the new length as a result.
Syntax
Following is the syntax for push()
array.push(item1, item2, ..., itemX)
Example
Let’s consider the following example, where we are using the push() method to add two array to from a new array.
<!DOCTYPE HTML>
<html>
<body>
<script>
const movie = ['Balu', 'Pokiri'];
const hero = ['Pavankalyan', 'MaheshBabu'];
movie.push(...hero);
document.write(JSON.stringify(movie));
</script>
</body>
</html>
When the script gets executed, it will cause the event to get triggered and display a new array, which was created by the merge of two arrays that we used in the above script.
2K+ Views
