Unite Unique Values With JavaScript

The journey to becoming an algorithm master can be long and, sometimes, very frustrating. Hopefully, we’ll keep overcoming our doubts and learning all about data structures and algorithms. A few days ago, I did a good exercise on arrays. The goal of this exercise was to unite all the content from more than one array into a single one. The example got three of the aforementioned arrays with random numbers like this:

[0, 1, 3, 2, 8, 1], [5, 2, 9, 1, 4, 7, 4], [2, 1, 6, 10, 6]

The goal was to unite them into a single array.

[0, 1, 3, 2, 8, 5, 9, 4, 7, 6, 10]

One way to access the content in an argument was by using no other than the keyword arguments. That’s right, arguments don’t unite humans, but literally using the word arguments will unite computer data. So let’s dive into some code and find out how to get some data on a single array.

Solution 1: Nested For Loops

In this solution above, we create the result variable and continue with a “brute force” approach to solving the problem. In this case, we need to implement two For loops as we are working with more than one array.

for (let i = 0; i < arguments.length; i++) {
   let arrayArguments = arguments[i];

In the first loop, we’ll create the arrayArguments variable by iterating the index of the arguments by using arguments. In that line of code, we’re accessing the arrays we are trying to unite. In simpler words, that array that we are declaring in our function’s argument (function uniteUnique1(arr)).

for (let j = 0; j < arrayArguments.length; j++) {
   let indexValue = arrayArguments[j]

After we loop through all arrays in the argument, we’ll use the inner loop to take care of the individual elements. That’s why I’m calling this new variable indexValue as it’s iterating the exact values in an array’s index.

if (result.indexOf(indexValue) < 0) {
   result.push(indexValue);

Now that we looped through each array and its values, we’re going to check if the value is in the final result array and add it if it’s not yet in there.

After pushing those values, we end the function by returning the result array.

console.log(uniteUnique1([0, 1, 3, 2, 8, 1], [5, 2, 9, 1, 4, 7, 4], [2, 1, 6, 10, 6]));
//output: [0, 1, 3, 2, 8, 5, 9, 4, 7, 6, 10]

Solution 2: While Loop

We start the second solution by declaring concatArray as that’s going to be the array that we’ll concatenate in the while loop:

while(arguments[i]) {
   concatArray = concatArray.concat(arguments[i]);
   i++;
}

After concatenating the array, it’s time to create the result variable by filtering the single items and their positions. That way, we can return the concatArray with their items index being equal to each of their positions:

result = concatArray.filter(function(item, pos) {
   return concatArray.indexOf(item) === pos;
})

Then, it’s finally time to return result.

console.log(uniteUnique2([1, 3, 2, 8, 3], [2, 1, 4, 7, 9, 6, 9], [2, 1, 6, 9]));
//output: [1, 3, 2, 8, 4, 7, 9, 6]

Solution 3: One Line Spread Syntax

In this solution, we’re using the powerful spread syntax to expand the iterable arrays that will be united. We’ll use Set to store each unique value and .flat() to create a new array out of the values we stored by using Set. In order for this solution to work, the argument should also be spread:

function uniteUniqueOneLine(…arr)

As Set works with any primitive data type, let’s try using some strings instead of numbers:

console.log(uniteUniqueOneLine([“Earth”, “Fire”], [“Wind”, “Water”], [“Heart”, “Heart”]));

//Output:

So there we have it, we have a few methods for our reference when solving any JavaScript problem. I hope you learned something new and it helps in the future. The power is yours!

Happy coding!

Summary:

1. Introduction
2. Nested Loops
3. While Loop
4. Spread Syntax

References:

1. MDN Web Docs, The Arguments Object
2. MDN Web Docs, Spread Syntax
3. MDN Web Docs, Set
4. MDN Web Docs, Flat