A collection of items or elements is called an Array. Arrays can store data as its elements, and then you can access them when required. It is a data structure commonly used in different programming languages, including JavaScript.
There exist chances that you may need to merge arrays if the data is coming from multiple streams. In such a situation, you can combine all of the elements of different arrays into a single array. JavaScript supports the Immutable and Mutable merging of arrays, and each approach is based on specific methods.
This write-up will explain the procedure to merge arrays in JavaScript with the help of suitable examples. So, let’s start!
How to merge Arrays in JavaScript
JavaScript offers two ways to merge arrays: Immutable Merging and Mutable Merging.
Immutable Merging of Arrays
In Immutable merging, a new array is created after merging the elements of the specified arrays. JavaScript “spread” operator and “array.concat()” method is utilized for the immutable merging of arrays.
Mutable merging of Arrays
The Mutable method of merging Arrays is used to perform the merging operation into an existing array. “array.push()” method can be used for pushing the elements of one array to another.
Now, let’s check out the procedure of using each of the specified methods in JavaScript.
How to merge Arrays in JavaScript using spread operator
The spread operator was introduced in ES6, represented by three consecutive dots “…”. It is used for destructuring arrays and merging them accordingly.
Syntax of using spread operator for merging arrays in JavaScript
In the below-given syntax, you have to specify the arrays which need to be merged preceding with the spread operator “…”, in the array literal “[]”:
const mergedArray = […array1, …array2];
Here, JavaScript will generate a new “mergedArray” which comprises the elements of “array1” and “array2”.
Example: How to Merge Arrays in JavaScript using spread operator
First of all, we will create two arrays named “girls” and “boys,” which will have the following elements:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
In the next step, we will use the JavaScript spread operator for merging “girls” and “boys” array elements into a new “people” array:
const people = […girls, …boys];
console.log(people);
Execution of the above-given program will show the following output:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-88.png" data-lazy- height="412" src="data:image/svg xml,” width=”831″>
The order in which you specify arrays in the array literal does matter as the elements will be merged in the same sequence in which arrays are added. So, you can select whether you want to insert the elements before or after the other array elements.
For instance, we want to merge both of the arrays, “girls” and “boys,” using the spread operator in such a way that the elements of the “boys” array come before the “girls” array elements. For this purpose, we will specify “boys” before the “girls” array in the array literal:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
const people = […boys, …girls];
console.log(people);
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-91.png" data-lazy- height="412" src="data:image/svg xml,” width=”889″>
As you can see, the starting index of the “people” array contains the “boys” array element, and after that, other indexes are referring “girls” array elements.
How to merge Arrays in JavaScript using concat() method
“concat()” is one of the most useful JavaScript methods, and it is primarily used for merging multiple arrays into a new array.
Syntax of concat() method in JavaScript
If you want to merge arrays using the JavaScript “concat()” method, then these are the two forms of concat() method syntax:
const mergedArray = array1.concat(array2);
OR
const mergedArray = [].concat(array1, array2);
In the first form, the “concat()” method will merge the elements of “array2” in “array1”, whereas, in the second syntax form, “array1” and “array2” elements are merged into an empty array.
Example: How to Merge Arrays in JavaScript using concat() method
The following example will merge the elements of “girls” array with “boys” by utilizing the “array.concat()” method:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
const people = girls.concat(boys);
console.log(people);
Have a look at the below-given output:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-94.png" data-lazy- height="408" src="data:image/svg xml,” width=”860″>
Now, we will execute the same example, while using the other syntax of the concat() method:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
const people = [].concat(girls, boys);
console.log(people);
The given JavaScript program will also merge the specified arrays in the same manner:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-98.png" data-lazy- height="411" src="data:image/svg xml,” width=”824″>
How to merge Arrays in JavaScript using push() method
If you want to merge array elements mutably, all you need is to use the JavaScript “push()” method. Utilizing this method, you can easily merge multiple arrays in an existing array.
Syntax of push() method in JavaScript
To push the elements of “array2” in “array1”, you have to apply spread operator “…” to the arguments.
Example: Merge Arrays in JavaScript using push() method
The following example will utilize the “array.push()” method to merge or push the elements of “girls” array in “boys” array:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
boys.push(…girls);
console.log(boys);
Now, check out the elements sequence of the “boys” array:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-100.png" data-lazy- height="408" src="data:image/svg xml,” width=”821″>
Adding “spread” operator is important while passing the arguments to the “push()” method, otherwise, the “push()” method will append the “girls” array as a whole to the “boys” array:
const girls = [‘Marie’, ‘Stepheny’];
const boys = [‘Alex’, ‘Max’];
boys.push(girls);
console.log(boys);
Given output signifies that after the execution of the push() method, the “girls” array is added as a whole at the second index of the “boys” array:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-102.png" data-lazy- height="386" src="data:image/svg xml,” width=”870″>
That is all of the essential information about merging arrays in JavaScript using the mutable and immutable method. Now, you can explore them further according to your requirements.
Conclusion
To merge arrays in JavaScript, you can utilize the array.concat() method or the spread operator […array1, …array2], in the array literal “[]” to merge arrays in an immutable way (creating a new array). However, if you want to merge the specified array elements in an existing array mutably, you can use the array.push() method. This article explained the procedure to merge arrays in JavaScript with the help of suitable examples.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
