JavaScript Array concat()

In this post, we will discuss concat() method available in JavaScript Array.

concat()

The concat() method will merge two or more arrays into the new array. It can be possible to pass single element inside this method.

Syntax:

array1.concat(array2,array3,.....)

Example 1:- Merge two arrays

Let us create two arrays with 5 elements each and return the new array that include merged elements.

CopiedCopy Code
<html>
<body>
<script>
// Consider the array with 5 strings
const subjects1 =["php","html","node.js","java","jsp"];
document.writeln("Subjects1: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
// Consider the array with 5 strings
const subjects2 =["html","sql","hadoop","iot","python"];
document.writeln("Subjects2: <br>");
document.writeln(subjects2);
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Merged Array: <br>");
document.writeln(subjects1.concat(subjects2));
</script>
</body>
</html>

Output:

Subjects1:
php,html,node.js,java,jsp
Subjects2:
html,sql,hadoop,iot,python
Merged Array:
php,html,node.js,java,jsp,html,sql,hadoop,iot,python

So, we can see that both the arrays were merged.

Example 2:- Merge multiple arrays

Let us create four arrays with 2 elements each and return the new array that include merged elements from these four arrays.

CopiedCopy Code
<html>
<body>
<script>
const subjects1 =["php","html"];
document.writeln("Subjects1: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
const subjects2 =["html","sql"];
document.writeln("Subjects2: <br>");
document.writeln(subjects2);
document.writeln("<br>");
document.writeln("<br>");
const subjects3 =["php","dbms"];
document.writeln("Subjects3: <br>");
document.writeln(subjects3);
document.writeln("<br>");
document.writeln("<br>");
const subjects4 =["jsp","scala"];
document.writeln("Subjects4: <br>");
document.writeln(subjects4);
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Merged Array: <br>");
// Merge four arrays
document.writeln(subjects1.concat(subjects2,subjects3,subjects4));
</script>
</body>
</html>

Output:

Subjects1:
php,html
Subjects2:
html,sql
Subjects3:
php,dbms
Subjects4:
jsp,scala
Merged Array:
php,html,html,sql,php,dbms,jsp,scala

So, we can see that all the elements in four arrays are merged. So the total number of elements in the merged array is 8.

Example 3:- Merge array with an element

Let us create an array with 5 elements and return new array by merging this array and a string.

CopiedCopy Code
<html>
<body>
<script>
const subjects1 =["php","html"];
document.writeln("Subjects1: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
const subjects2 =["html","sql"];
document.writeln("Merged Array: <br>");
// Merge array and string="hello"
document.writeln(subjects1.concat("hello"));
</script>
</body>
</html>

Output:

Subjects1:
php,html
Merged Array:
php,html,hello

So, we can see that all the elements from the array and the string were merged.

Example 4:- Merge multiple arrays with different number of elements

Let us create four arrays with different number of elements in each array and return the new array that include merged elements from these four arrays.

CopiedCopy Code
<html>
<body>
<script>
const subjects1 =["php"];
document.writeln("Subjects1: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
const subjects2 =["html","sql"];
document.writeln("Subjects2: <br>");
document.writeln(subjects2);
document.writeln("<br>");
document.writeln("<br>");
const subjects3 =["php","dbms","social"];
document.writeln("Subjects3: <br>");
document.writeln(subjects3);
document.writeln("<br>");
document.writeln("<br>");
const subjects4 =["jsp","scala","sql","iot"];
document.writeln("Subjects4: <br>");
document.writeln(subjects4);
document.writeln("<br>");
document.writeln("<br>");
document.writeln("Merged Array: <br>");
// Merge four arrays
document.writeln(subjects1.concat(subjects2,subjects3,subjects4));
</script>
</body>
</html>

Output:

Subjects1:
php
Subjects2:
html,sql
Subjects3:
php,dbms,social
Subjects4:
jsp,scala,sql,iot
Merged Array:
php,html,sql,php,dbms,social,jsp,scala,sql,iot

So, we can see that all the elements in four arrays are merged.