Sorted Union Challenge in JavaScript

Introduction

Sorted Union is a coding challenge where we will have two or more arrays with numeric values. Our job is to merge all of the arrays and then remove all the duplicate elements from the final merged array. You might need clarification, but let me explain this.

We will be given two or more arrays like [1, 3, 2], [5, 2, 1, 4], [2, 1] so our first step is to merge all of them, after merging all of the arrays will have our final array like this [1, 3, 2, 5, 2, 1, 4, 2, 1]. Now our next step is to remove all the duplicate elements from our final array. After removing all of the duplicate elements, we will have our final efficient output [1, 3, 2, 5, 4].

Example:

let array1 = [1, 3, 2];
let array2 = [5, 2, 1, 4];
let array3 = [2, 1];

First Step: We need to merge all of them

[1, 3, 2] + [5, 2, 1, 4] + [2, 1]

After Merging the Arrays

[1, 3, 2, 5, 2, 1, 4, 2, 1]

Second Step: Remove all the duplicate elements from our final merged array.

[1, 3, 2, 5, 2, 1, 4, 2, 1] = [1, 3, 2, 5, 4]

Final Output: [1, 3, 2, 5, 4]

As we clearly understand this challenge with an example, now it is time to start solving. First we will solve this theoretically and then finally practically, so all of your doubts can go.

Theoretically Solve

• Step 1: We need to merge all of our given arrays
• Step 2: We need to remove all the duplicate elements from our merged array

Practically Solve

Now we are going to solve this problem with code

function uniteUnique(arr) {
 let args = [...arguments];
 let mergedArray = args.reduce((acc, curr) => acc.concat(curr, []));

 const removedDuplicate = [...new Set(mergedArray)]
 return removedDuplicate;
}

 console.log(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]));

Let’s break down this solution for a better understanding

We have a function named uniteUnique with a parameter arr, where the first array will be stored. Remember, not all the arrays are stored in one larger array, each array is passed separately as an argument. Therefore, there is only one parameter, despite there being multiple arguments. The function likely requires as many parameters as there are arguments.

So we can’t add the parameters each time manually, however, we have a method in JavaScript using this, we can easily achieve all the arguments in one array without passing any initial parameter in the function manually, as it is not recommended either.

let args = [...arguments];

As we can see in our first step, we declared a variable args where we will store all of arguments passed to the function.

...: is a spread operator in JavaScript for iterating all the elements of an array or string like a loop does.

arguments: is a special object in JavaScript used for getting the passed arguments. Arguments is an array-like object We can access each argument by using indexes like we do with real arrays in JavaScript. For instance, we have three arguments passed in the function (a, b, c), so we can access the first argument by using arguments[0], which will return a the first argument.

So, let args = [...arguments]; now the variable args has all the arguments within the bigger array, no matter whether the parameter is added within the function or not. So now the args variable is like that [ [1, 3, 2], [5, 2, 1, 4], [2, 1] ]. Now we can proceed with the function because function is ready now.

let mergedArray = args.reduce((acc, curr) => acc.concat(curr, []));

In our second step, we needed to merge all the arrays, and we did so by declaring a variable mergedArray for storing our final merged array. where we used a JavaScript built-in reduce method for iterating the args (arguments array), and within the reduce method, we used another built-in method concat() used for merging two or more arrays in JavaScript. Now the final merged array is stored in mergedArray ([1, 3, 2, 5, 2, 1, 4, 2, 1]).

As we have succeeded in merging all the arrays, now in our last step we need to remove all the duplicate elements without any additional changes.

const removedDuplicate = [...new Set(mergedArray)];

We were only left with removing duplicate elements for the array, so we declared a variable removedDuplicate where we stored all the unique elements without repetition and we used a JavaScript set() built-in method for getting a set of all the unique elements.

set() is a JavaScript built-in method used for creating a collection of unique values and each value in a Set can only occur once, We must use the new keyword with the set() method as it is mandatory it returns a set object.

So we used ...(spread operator) for the iteration of the set of unique values as we know set() returns an object so we need to return an array and due to this reason we enclosed the whole logic with array ( []). Now we have an array instead of the object.

Finally, we return the removedDuplicate variable where the final array is stored.