JavaScript: How to filter out Non-Unique Values from an Array?

To filter out non-unique values from an array in JavaScript, you can use the filter() method, a for loop, the Set and filter() method, and the reduce() method. In this article, we will filter out non-unique values and return an array that only contains unique non-repeating elements.

Arrays are data structures used to store data in a structured format. We can store the data in an array and retrieve them using their indexes. These indexes serve as a key for these values.

Table of Content

Filtering non-unique values from an array can be done in the following ways:

• Using the filter() method
• Using for loop
• Using Set and filter
• Using the reduce() Method

Using the filter() method

The filter() method returns the elements that satisfy the one occurrence conditions. We will use the indexOf() and lastIndexOf() methods to identify elements that appear only once in the array.

Syntax

var newArr = initialArr.filter((value, index) => {
    // conditions with return
});

Example

In the following example, we use filter() method with indexOf() and lastIndexOf() methods. We check if the first and last occurrence of an element are at the same position, which means it appears only once.

var array = [1, 1, 2, 3, 3, 5, 6, 7, 7, 7, 8, 9];
console.log("Before filtering non unique values: " + array);

var unique = array.filter((value, index) => {
    return array.indexOf(value) === array.lastIndexOf(value);
});

console.log("After filtering non unique values: " + unique);

Output

Before filtering non unique values: 1,1,2,3,3,5,6,7,7,7,8,9
After filtering non unique values: 2,5,6,8,9

Using for loop

Using the for() loop will only push the unique elements into the array. We will use the indexOf() method to check if the first and the last occurrence of the element are the same.

Example

In the following example, we iterate through the array and check each element's first and last occurrence positions. If they match, the element appears only once.

var array = [1, 1, 2, 3, 3, 5, 6, 7, 7, 7, 8, 9];
console.log("Before filtering: " + array);

var unique = [];
for (let i = 0; i < array.length; i++) {
    if (array.lastIndexOf(array[i]) === array.indexOf(array[i])) {
        unique.push(array[i]);
    }
}

console.log("After filtering: " + unique);

Output

Before filtering: 1,1,2,3,3,5,6,7,7,7,8,9
After filtering: 2,5,6,8,9

Using Set and filter

To remove duplicate values using a Set and the filter method, we first filter items that appear only once, then use Set to ensure uniqueness in the final result.

Example

In the following example, we use filter to count occurrences and Set to maintain uniqueness. We check how many times each element appears and keep only those that appear exactly once.

function filterNonUniqueUsingSet(arr) {
    // Use filter to find unique items and create a Set to ensure uniqueness
    const uniqueItems = new Set(arr.filter(item => 
        arr.filter(x => x === item).length === 1
    ));
    
    // Convert the Set back to an array and return it
    return [...uniqueItems];
}

const array = [5, 6, 6, 7, 8, 8, 9, 10];
console.log("Original array:", array);
console.log("Filtered unique values:", filterNonUniqueUsingSet(array));

Output

Original array: [ 5, 6, 6, 7, 8, 8, 9, 10 ]
Filtered unique values: [ 5, 7, 9, 10 ]

Using the reduce() Method

The reduce() method can help us create a frequency map that counts how many times each element appears in the array. After we create this map, we can easily filter out elements that appear only once.

Example

In the following example, we use reduce() to create a frequency map, then filter elements that have a frequency of 1.

const array = [1, 1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 8, 8];
console.log("Before filtering non-unique values: " + array);

// Create frequency map
const frequencyMap = array.reduce((acc, value) => {
    acc[value] = (acc[value] || 0) + 1;
    return acc;
}, {});

// Filter elements that appear only once
const uniqueValues = array.filter(value => frequencyMap[value] === 1);

// Remove duplicates from the result
const result = [...new Set(uniqueValues)];

console.log("After filtering non-unique values: " + result);

Output

Before filtering non-unique values: 1,1,2,2,3,4,5,6,6,7,7,8,8,8
After filtering non-unique values: 3,4,5

Comparison

Conclusion

All methods effectively filter out non-unique values from arrays. The reduce() approach offers the best performance for large datasets, while filter() with indexOf() provides the most readable solution for smaller arrays.