;

How to Combine or Merge Two or More Arrays in Javascript


Tutorialsrack 28/03/2022 Jquery Javascript

In this article, you’ll learn how to combine or merge two or more arrays in javascript. There are various ways to combine or merge two or more arrays: Using for loop, (...) spread operator, concat() method, and push() method.

Here are the examples to combine or merge two or more arrays in Javascript

Example 1: Using for Loop

In this example, we used the traditional for loop with the push() method to merge or combine two or more arrays. 

Here is an example of a JavaScript function for merging or combining two or more arrays:

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];

//Function To Combine or Merge Two or More Arrays
const merge = (first, second) => {
    for (let i = 0; i < second.length; i++) {
        first.push(second[i]);
    }
    return first;
};

console.log(merge(FirstArray, SecondArray));
// Output ==> [1, 2, 3, 4, 5, 6]

And you can also merge more than two arrays as given below example:

merge(merge(FirstArray, SecondArray),ThirdArray);
// Output ==> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Example 2: Using (...) Spread operator

In this example, We can use the spread (...) operator on arrays within an array literal([]) to merge two or more arrays. 

Here is an example of a (...) spread operator for merging or combining two or more arrays:

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];

// Merge arrays Using spread operator
const merged = [...FirstArray, ...SecondArray];

console.log(merged); 
// Output ==> [1,2,3,4,5,6]

As you can see how you can merge two arrays using the spread operator. Now in the below example, we merged more than two arrays into one as given below: 

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];
const ThirdArray = [7, 8, 9];

// Merge arrays Using spread operator
const merged = [...FirstArray, ...SecondArray, ...ThirdArray];

console.log(merged);
// Output ==> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Example 3. Using concat() Array Method

In this example, we used the javascript array concat() method. JavaScript Array object has various practical methods. And one of them is the concat() method in which the primary usage the concat() method is to merge two arrays into one.

Here is an example of a JavaScript array concat() function for merging or combining two or more arrays:

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];

// Merge arrays Using concat() method
const merged = FirstArray.concat(SecondArray);

console.log(merged);
// Output ==> [1, 2, 3, 4, 5, 6]

Like we used the (...) spread operator, the concat() method will not change the input arrays. Rather, it merges all the input arrays and returns them to a new array. So, the better way of using the concat() method to merge arrays is as given in the below example:

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];
const ThirdArray = [7, 8, 9];

// Merge arrays Using concat() method
const merged = [].concat(FirstArray, SecondArray, ThirdArray);

console.log(merged);
// Output ==> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Here, you can see that we can concatenate multiple arrays to an empty array and return a new merged array. And You can pass as many arrays as an argument as you can see above where pass three arrays as arguments to the concat() method.  

Example 4. Using push() Array Method

In this example, we can use the push() method to insert an element at the end of an array. Here, we used the push() method to combine or merge two or more arrays into one. 

Here is an example of a JavaScript array push() function for merging or combining two or more arrays:

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];
const ThirdArray = [7, 8, 9];

// Merge arrays Using push() method
const merged = FirstArray.push(...SecondArray, ...ThirdArray);

console.log(FirstArray);
// Output ==> [1, 2, 3, 4, 5, 6, 7, 8, 9]

As you can see we used the (...) spread operator with the push() method to merge arrays into one, because if you miss (...) spread operator with the push() method, will insert the entire array into the other array.

Let's take an example to merge an array without using the spread operator with the push() method and what will be the output?

const FirstArray = [1, 2, 3];
const SecondArray = [4, 5, 6];
const ThirdArray = [7, 8, 9];

// Merge arrays Using push() method
const merged = FirstArray.push(SecondArray, ThirdArray);

console.log(merged);
//Output ==> length of the array is 5 

console.log(FirstArray);
// Output ==> [1, 2, 3, [4, 5, 6], [7, 8, 9]]

As you see in the above example, when the spread operator is missing with the push() method, the entire array is inserted into the other array.

When to Use Spread (...) operator,  concat() Method

If you are sure about the inputs are all arrays, then, you use the spread operator. It is a very straightforward way to merge arrays. But if you are unsure about the input element type, then you must use the concat() method.

I hope this article will help you to understand how to combine or merge two or more arrays in javascript.

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!


Related Posts



Comments

Recent Posts
Tags