Merging two arrays in javascript

How to Merge Arrays in JavaScript (5 Easy Ways)

In JavaScript, one of the fundamental data types is the array. Array is a collection of elements, such as numbers, strings, or other types of objects. It’s a data store that lets you store and access data easily in your JavaScript programs.

Because every program deals with data, you need arrays all the time.

One common necessity when dealing with arrays is the ability to merge one or arrays together to combine data.

This guide teaches you 5 different approaches to merging arrays in JavaScript. Besides, you will learn what is the best and worst way to do it.

1. The for Loop Approach

The first thing that comes to mind when merging arrays is a for loop.

The idea is to loop through the elements of both arrays and push them into the new merged array one by one. You can do this with two for loops.

For example, let’s merge arrays arr1 and arr2 into a new array called result:

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let result = [] for (elem of arr1) < result.push(elem) >for (elem of arr2) < result.push(elem) >console.log(result)

This is a hard-coded way to merge two arrays. But if you want to use the loop approach more than once, then you should create a function for merging arrays.

Here’s a function merge() that takes two arrays and results the merged arrays:

const merge = (arr1, arr2) => < for (elem of arr2) < arr1.push(elem) >return arr1 > // Example use let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let merged = merge(arr1, arr2) console.log(merged)

This function works such that:

1. It takes two arrays arr1 and arr2 as arguments.
2. It loops through the second array and adds each element to the arr1.
3. It then returns the arr1 with both the original arr1 elements and the arr2 elements.

Notice that this function does not modify the original array arr1. Instead, it takes a copy of the input arrays and returns a new array.

Now, let’s think about the practicality of this approach to merging arrays. If there’s more than two arrays to merge, the code gets complicated. You’d have to do something like:

merge(merge(merge(arr1, arr2), arr3), arr4)

Also, having to implement the merging functionality seems redundant. It’s such a common operation there must be better ways to do it.

This leads to the second approach.

2. The Spread Operator (…)

As of ES6, it’s been possible to use the three dots spread operator (…) to pull apart values from arrays and JavaScript objects.

Thanks to the spread operator, merging arrays is much easier with a convenient syntax.

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let merged = [. arr1, . arr2] console.log(merged)

Here’s an illustration of how the spread operator works in the above code example:

The spread operator takes a copy of each value from the arrays and places them into the merged array.

This also highlights the fact that the original arrays remain untouched.

The cool part in using hte spread operator is that you’re not limited to two arrays. You can merge as many arrays as you like. Also, the arrays don’t need to be of the same size.

For example, let’s combine three arrays:

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = [7, 8, 9, 10] let merged = [. arr1, . arr2, . arr3] console.log(merged)

The spread operator approach is much more convenient approach to merging the arrays than the traditional for loop approach you saw earlier.

3. The concat() Method

In JavaScript, the array data type comes with a bunch of native methods. These methods help developers deal with arrays in a streamlined fashion.

One of the built-in array methods in JavaScript is the concat() method. You can call this method on any JavaScript array and pass it another array as an argument. This method call creates a new array that merges the two arrays.

For example, let’s merge two arrays arr1 and arr2:

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let merged = arr1.concat(arr2) console.log(merged)

This is a pretty straightforward way to merge arrays in JavaScript. The only problem is in the syntax. Please, take a look at this line of code:

Doesn’t it look like you’re adding the elements of arr2 to arr1 and thus modify arr1?

Because this is what it does NOT do!

Instead, the above line of code creates a new merged array with the contents of arr1 and arr2.

If you prefer to use the concat() method, a much cleaner way to call it is by calling it on an empty array and passing the two arrays as arguments:

const merged = [].concat(arr1, arr2)

When you look at this solution, its much easier to see you’re merging two arrays into an empty array to create a new one.

4. The push() Method

Another popular array method in JavaScript is the push() method.

The push() method pushes any number of argument values to the original array. In other words, this method modifies the original array unlike other approaches you’ve seen so far.

In the very first example, you already saw how to use the push() method to push elements to an array one by one.

But the push() method can take an arbitrary number of arguments.

You also learned you can use the spread operator (…) to pull apart values from an array. So you can use the spread operator to give the push() method all the array elements as arguments.

For instance, let’s add the arr2 elements to the arr1:

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] arr1.push(. arr2) console.log(arr1)

5. The reduce() Method

The last approach to merging arrays is by using the reduce() method.

The idea of the reduce() function is to implement what’s called folding in maths. Typically, you reduce an array into a single value, such as the sum or the product of the elements. But you can also use the reduce() method to merge two arrays.

For example, let’s merge arr1 and arr2 by adding the arr2 elements to the end of arr1:

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] arr2.reduce((arr, item) => < arr.push(item); return arr; >, arr1) console.log(arr1)

The above code works such that it takes each element of arr2 and pushes it to arr1. This approach is very similar to the for loop one you saw earlier. But because it’s the reduce() method, the syntax is more complex. Thus, you should stay away from using the reduce() method in merging arrays.

Conclusion

Today you learned five ways to merge arrays in JavaScript.

To recap, here are the solutions:

1. The traditional for loop
2. The spread operator (…)
3. The concat() method
4. The push() method
5. The reduce() method

The most convenient and neat way to merge arrays in JavaScript is by using the second approach, that is, the spread operator. Also, the concat() method can do the job but its syntax is a bit misleading.

Avoid using the traditional for loop approach. It’s just excess work (unless you’re practicing the basics of JavaScript).

Also, don’t do that reduce() method approach. Even though it works, it’s very similar to the for loop approach. Yet it’s pretty unreadable and can cause some headaches.

Thanks for reading! Happy coding!

Further Reading

Источник

How to Merge Arrays in JavaScript – Array Concatenation in JS

Dillion Megida

There are multiple ways to merge arrays in JavaScript. You can use long or short approaches. I’ll be showing 3 of them in this article.

When working with arrays in JavaScript, there are cases where you want to combine multiple arrays together. For example, arrays with related data coming from different sources can be merged into one single array.

You can merge arrays in different ways. Let’s look at some of them, from my favorite to my least favorite.

Here’s a video version of this article if you’d like to use it to supplement your learning.

1. How to Use the Spread Operator in JavaScript

The spread operator allows you to spread an iterable collection (object or array) into another collection. Using this operator on arrays, you can merge the contents of arrays together.

const array1 = [1, 2, 3] const array2 = [4, 5, 6] const merged = [. array1, . array2] // [1, 2, 3, 4, 5, 6] 

For the merged variable, we create a new array and then spread the values of array1 followed by array2 in it. Now you can see the merged array containing the values from these arrays.

You can use this operator for multiple arrays:

const array1 = [1, 2, 3] const array2 = [4, 5, 6] const array3 = [7, 8, 9] const merged = [. array2, . array3, . array1] // [4, 5, 6, 7, 8, 9, 1, 2, 3] 

In the merged array here, we first spread array2 , then array3 , and lastly, array1 .

You can learn more about this operator in this article: Spread Operator Simplified.

2. How to Use Array.concat in JavaScript

You use the concat method of arrays to combine the contents of an array with new values to form a new array.

These new values can be numbers, strings, booleans, objects, or even, arrays.

The method accepts a list of values as arguments:

array.concat(value1, value2, . valueN) 

By specifying an array as an argument, you can merge an existing array with the specified array to form a new array. Here’s an example:

const array1 = [1, 2, 3] const array2 = [4, 5, 6] const merged = array1.concat(array2) // [1, 2, 3, 4, 5, 6] 

As you can see, the contents of array1 are concatenated with the contents of array2 to form a new array assigned to merged .

You can pass multiple arrays for merging also:

const array1 = [1, 2, 3] const array2 = [4, 5, 6] const array3 = [7, 8, 9] const merged = array2.concat(array3, array1) // [4, 5, 6, 7, 8, 9, 1, 2, 3] 

In this example, we use the concat method on array2 which means the contents of array2 are first in the merged array.

For the arguments, we pass array3 first, which means the contents of array3 are next in the merged array, then followed by the contents of array1 .

You can learn more about concat in this article: Array concat simplified.

3. How to Use Array.push in JavaScript

The push method of arrays allows you to «push» (add) new values to the end of an array.

array.push(value1, value2, . valueN) 

Using this method, you can push a new array to an existing array to create a merge process. Unlike the previous approaches I mentioned, the push approach modifies the array it is used on.

const array1 = [1, 2, 3] const array2 = [4, 5, 6] for(let i = 0; i < array2.length; i++) < array1.push(array2[i]) >console.log(array1) // [1, 2, 3, 4, 5, 6] 

Here, we use a for loop to loop through the values of array2 , and on each loop, we push the value at the index to array1 .

At the end of the loop, you see array1 modified, containing the values from array2 .

Instead of a for loop, you can also use the spread operator with the push method. Since the push method accepts a list or arguments separated by a comma, you can spread another array in this method, and they will all be pushed to the array the method is applied to:

const array1 = [1, 2, 3] const array2 = [4, 5, 6] array1.push(. array2) console.log(array1) // [1, 2, 3, 4, 5, 6] 

You can do this for multiple arrays:

const array1 = [1, 2, 3] const array2 = [4, 5, 6] const array3 = [7, 8, 9] array3.push(. array2, . array1) console.log(array3) // [7, 8, 9, 4, 5, 6, 1, 2, 3] 

Here, we call push on array3 , then spread the values of array2 followed by array1 as arguments to be pushed into array3 .

Wrapping Up

In this article, we’ve seen three approaches for merging arrays in JavaScript. I especially love the spread operator as it’s easier and simpler to use.

When using push , beware, as I mentioned, that it modifies the array it is used on (unlike concat that returns a new array instead). This can cause unexpected results if you do not use it intentionally and carefully.

Dillion Megida

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник