Merge with unique values using lodash union method

Let's learn about the union() method of the JavaScript library lodash.

# The lodash union() method is?

The union() method is one of the methods used for arrays in the lodash library. It is a method that can be used with multiple arrays to merge them into a single unique value. In other words, it can combine arrays while ensuring that only one instance of each value is included. This method performs two functions at once, as shown below.

- Combine multiple arrays into one array.
- Keeping only unique values in the combined total.

If you need to exclude identical values ​​after merging, you can simply use union().

Next, let's take a look at the syntax for union().

_.union([arrayA, arrayB, ...])


The basic grammar is as follows. You can pass one or more arrays as arguments and merge them into one array. Let's learn more about union() below.

! union() Examples

Let's create a simple example.


@ Merge two arrays into a single unique value
Let's consider the case where there are two arrays, arrayA and arrayB, as shown below.

Now, we want to merge two arrays while keeping only unique values that do not exist in both. How can we do that? One of the simplest ways is to use the union() function in lodash. We have written the following code to merge the two arrays:

Now when you run the code, the merged result will appear in a new variable called arrayC as shown below.

After checking the output, it can be seen that two arrays have been merged into one and only one value of 3, which is the same in both arrays, remains.

In this way, the function union(), which performs two roles very easily, can be used.


@Merging multiple arrays into a single array.
This time, we are trying to combine more than two arrays into one. We will merge various array values into one and see the result as shown below.

Upon checking the results, it appears to be the same as expected.


[ Reference ] Merge a N-dimensional array into a 1-dimensional array.
The above example combined a one-dimensional array into another one-dimensional array, but if multiple n-dimensional arrays need to be merged into a one-dimensional array, _.flatten() can also be used together as shown below.

Depending on the situation, merging may also be necessary in the case mentioned above, so it would be helpful to keep in mind.


[Reference 2] Is it possible to use union() on an array that has reference values?
If it is not a primitive value array like 1, 2, 3..., can we use union() for collections? Let's try once. We will merge two arrays with object values like the following.

The values of the objects are identical.

If we check the execution results, we can see that even though the object values are the same, they are not merged. This is because they are reference values, so the condition arrayA === arrayB is false, which is the expected result. In other words, it cannot be used to merge collection values.

! Using JavaScript to obtain unique values after merging.

Is there a way to use pure JavaScript? There could be several ways, but one possible way is to use Set(). Set() only holds unique values! Now let's write the code below to merge and return only unique values.

Upon reviewing the results, the desired outcome was achieved. If you check the code above, it performs the following steps in order to return the result.

• Merge multiple arrays into one using the spread operator.
• Transform to keep only unique values ​​by applying new Set().
• Convert a Set type to an Array type using new Array().

It would be great to know how to use union() function!


We have learned about lodash's union() up to here. With lodash's union(), we can obtain only unique values like this.