JavaScript array concat | Method | merge (add) two arrays

Javascript array concat used to merge (add/join) two or more arrays. This method will not change the current Array value and a length property. But instead returns a new array with the joint value of arrays.

JavaScript array concat method

Syntax

The simple syntax of adding multiple arrays in JavaScript.

var new_array = array1.concat(array2, array3, ..., arrayX)

Parameter Values

Arrays:– (array2array3, …, 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 HTML p tag. You can also use a console to print the value of the merged Array.

<!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.

JavaScript array concat method example

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:

3 JavaScript array concat 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 use concat() and Set together. See the below example.

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:

Javascript merge two arrays without duplicates 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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.