Javascript array concat used to merge (add/join) two or more arrays. This method will not change the current Array value and a
Syntax
the Simple syntax of adding multiple arrays in JavaScript.
|
1 |
var new_array = array1.concat(array2, array3, ..., arrayX) |
Parameter Values
Arrays:– (array2, array3, …, arrayX) to be merge.
JavaScript array concat method example
See the below example of – how to merge two Arrays JavaScript. In code, there is using one button which Calls JS function– “myFunction()“. In the function defined 2 arrays with values and then after assigning the value of added 2 arrays to the new array.
To print/show value we are using an
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Add 2 Arrays</button> <p id="demo"></p> <script> function myFunction() { var arr1 = [1,2,3,4]; var arr2 = [5,6,7,8]; var new_arr = arr1.concat(arr2); document.getElementById("demo").innerHTML = new_arr; } </script> </body> </html> |
Output: In a GIF file.
How to 3 JavaScript array concat?
Same as the above example but for adding 3 or more array, you have to pass more array as a parameter.
See the below example of Adding 3 Arrays.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Add 2 Arrays</button> <p id="demo"></p> <script> function myFunction() { var arr1 = [1,2,3,4]; var arr2 = [5,6,7,8]; var arr3 = [5,6,7,8]; var new_arr = arr1.concat(arr2,arr3); document.getElementById("demo").innerHTML = new_arr; } </script> </body> </html> |
Output:
How to Javascript merge two arrays without duplicates?
Add an array in javascript is easy but what if you don’t want to duplicate item in new array? If you Simply merging of the array contains duplicates items.
There are several ways to do it, a simple one is You can concat()Set
|
1 2 |
var set = new Set(new_arr); new_arr = Array.from(set); |
Set: A only contains a single value, not duplicates.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Add 2 Arrays</button> <p id="demo"></p> <script> function myFunction() { var arr1 = [7,2,3,4]; var arr2 = [5,0,7,8]; var arr3 = [5,7]; var new_arr = arr1.concat(arr2,arr3); var set = new Set(new_arr); new_arr = Array.from(set); document.getElementById("demo").innerHTML = new_arr; } </script> </body> </html> |
Output:
Do comment if you have any doubts and suggestions for this tutorial.
Note: The All JavaScript array concat() method Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.