Article Categories

Selected Reading

How to join two arrays in JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, there are several methods to join two arrays together. The most common approaches are using the concat() method and the spread operator.

Using concat() Method

The concat() method creates a new array by merging two or more arrays without modifying the original arrays.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join Arrays with concat()</title>
</head>
<body>
    <h2>Join Arrays using concat()</h2>
    <button onclick="joinArraysConcat()">Join Arrays</button>
    <div id="result1"></div>

    <script>
        function joinArraysConcat() {
            let arr1 = [1, 2, 3];
            let arr2 = ['A', 'B', 'C'];
            let mergedArray = arr1.concat(arr2);
            
            document.getElementById('result1').innerHTML = 
                'Array 1: [' + arr1 + ']<br>' +
                'Array 2: [' + arr2 + ']<br>' +
                'Merged: [' + mergedArray + ']';
        }
    </script>
</body>
</html>

Array 1: [1,2,3]
Array 2: [A,B,C]
Merged: [1,2,3,A,B,C]

Using Spread Operator

The spread operator (...) provides a more modern way to join arrays. It's part of ES6 and offers cleaner syntax.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join Arrays with Spread Operator</title>
</head>
<body>
    <h2>Join Arrays using Spread Operator</h2>
    <button onclick="joinArraysSpread()">Join Arrays</button>
    <div id="result2"></div>

    <script>
        function joinArraysSpread() {
            let fruits = ['apple', 'banana'];
            let vegetables = ['carrot', 'potato'];
            let combined = [...fruits, ...vegetables];
            
            document.getElementById('result2').innerHTML = 
                'Fruits: [' + fruits + ']<br>' +
                'Vegetables: [' + vegetables + ']<br>' +
                'Combined: [' + combined + ']';
        }
    </script>
</body>
</html>

Fruits: [apple,banana]
Vegetables: [carrot,potato]
Combined: [apple,banana,carrot,potato]

Using push() with Spread Operator

If you want to modify one of the original arrays instead of creating a new one, you can use push() with the spread operator.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join Arrays with push()</title>
</head>
<body>
    <h2>Join Arrays using push() with Spread</h2>
    <button onclick="joinArraysPush()">Join Arrays</button>
    <div id="result3"></div>

    <script>
        function joinArraysPush() {
            let numbers = [1, 2, 3];
            let moreNumbers = [4, 5, 6];
            
            document.getElementById('result3').innerHTML = 
                'Original numbers: [' + numbers + ']<br>';
            
            numbers.push(...moreNumbers);
            
            document.getElementById('result3').innerHTML += 
                'After push: [' + numbers + ']';
        }
    </script>
</body>
</html>

Original numbers: [1,2,3]
After push: [1,2,3,4,5,6]

Comparison

Method	Modifies Original?	Browser Support	Performance
`concat()`	No	All browsers	Good
Spread operator	No	ES6+ (modern)	Very good
`push(...array)`	Yes	ES6+ (modern)	Excellent

Conclusion

Use the spread operator for modern applications as it's more readable and performant. The concat() method remains useful for broader browser compatibility. Choose push() with spread when you need to modify the original array.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

312 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next