JavaScript - Print Unique Elements From Two Unsorted Arrays

In real-world applications, we often need to compare data from two or more arrays to extract unique values that exist between them. This task can be particularly useful when dealing with data merging, deduplication, or when identifying elements that appear exclusively in one of the arrays.

In this article, we will discuss how to print the unique elements from two unsorted arrays in JavaScript. We will go through an efficient solution to achieve this using modern JavaScript features.

Problem Statement

Given two unsorted arrays, the goal is to find all elements that appear in one array but not in the other. The solution should output the unique elements from both arrays, excluding the duplicates.

let array1 = [1, 2, 3, 4, 5];
let array2 = [4, 5, 6, 7, 8];

[1, 2, 3, 6, 7, 8]

Approach

We can use several methods to find unique elements from two unsorted arrays in JavaScript. Below, we'll go through a few common approaches.

Approach 1: Using Set and Spread Operator

A Set is a collection of unique values. It automatically removes duplicates, making it an ideal data structure for this problem.

Steps:

1. Combine the arrays: First, combine the two arrays into one.
2. Create a Set: Create a new Set from the combined array to remove duplicates.
3. Convert back to Array: Convert the Set back into an array and return the result.

function uniqueElements(array1, array2) {
// Combine both arrays and create a Set to remove duplicates
let combinedArray = [...array1, ...array2];
let uniqueArray = [...new Set(combinedArray)];
return uniqueArray;
}

let array1 = [1, 2, 3, 4, 5];
let array2 = [4, 5, 6, 7, 8];

console.log(uniqueElements(array1, array2));

[1, 2, 3, 4, 5, 6, 7, 8]

While this solution works well, it doesn't yet provide the unique elements from both arrays individually, excluding the shared ones.

Approach 2: Using filter() and indexOf() to Identify Unique Elements

To get the unique elements that are present only in one array, but not in both, we need a more refined approach.

Steps:

1. Filter out common elements: We will loop through both arrays and use the indexOf() method to check if the element from the first array exists in the second array and vice versa.
2. Collect unique elements: If an element exists only in one of the arrays, we add it to the result.

function uniqueElements(array1, array2) {
// Filter unique elements from array1 (not in array2)
let uniqueInArray1 = array1.filter(item => array2.indexOf(item) === -1);

// Filter unique elements from array2 (not in array1)
let uniqueInArray2 = array2.filter(item => array1.indexOf(item) === -1);

// Combine both unique arrays and return the result
return [...uniqueInArray1, ...uniqueInArray2];
}

let array1 = [1, 2, 3, 4, 5];
let array2 = [4, 5, 6, 7, 8];

console.log(uniqueElements(array1, array2));

[1, 2, 3, 6, 7, 8]

In this solution, we first find the unique elements in array1 that do not exist in array2, and then find the unique elements in array2 that are not in array1. Finally, we combine the two arrays to return the result.

Approach 3: Using Set for More Efficient Lookups

If performance is a concern, especially when dealing with large arrays, we can use the Set object for faster lookups. By converting one of the arrays into a Set, we can perform the check for the uniqueness in constant time, O(1).

function uniqueElements(array1, array2) {
let set1 = new Set(array1);
let set2 = new Set(array2);

// Filter elements from array1 that are not in array2
let uniqueInArray1 = array1.filter(item => !set2.has(item));

// Filter elements from array2 that are not in array1
let uniqueInArray2 = array2.filter(item => !set1.has(item));

return [...uniqueInArray1, ...uniqueInArray2];
}

let array1 = [1, 2, 3, 4, 5];
let array2 = [4, 5, 6, 7, 8];

console.log(uniqueElements(array1, array2));

[1, 2, 3, 6, 7, 8]

This approach is more efficient, especially for large datasets, as the Set allows for faster membership checks than using indexOf() on an array.

Conclusion

Printing unique elements from two unsorted arrays is a common task in JavaScript, and the best approach depends on your specific requirements, such as performance and the size of the data.

• Using a Set is a quick and easy way to get unique values, but if you're interested in only the elements that are unique to each array, a more involved filtering approach is necessary.
• By combining Set for efficient lookups with the filter() method, we can ensure that the solution is both clear and performant.

Choose the approach that best fits your needs depending on the problem you're solving!