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.
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
<!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.
<!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 an item in a new array? If Simply merging of the array contains duplicates items.
There are several ways to do it, a simple one is You can concat()Set
var set = new Set(new_arr);
new_arr = Array.from(set);Set: A only contains a single value, not duplicates.
<!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.