Filter Out Non-Unique Values from an Array in JavaScript

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() feature provided by JavaScript to remove all the repeating elements.

Syntax

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

Example

In the following example, we have used filter() method and indexOf() method. In the below example, we are going to remove all the repeating numbers

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 have used for() loop. In the below example, we are going to remove all the repeating numbers

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, start by using filter to find items where the first and last appearances are the same. Next, turn the result into a Set to keep only unique values. Finally, change the Set back into an array.

Example

In the following example, we have used set and filter method to filter out the non-unique values from an array. In the below example, we are going to remove all the repeating numbers

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(filterNonUniqueUsingSet(array));

Output

[ 5, 7, 9, 10 ]

Using the reduce() Method

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

Example

In the following example, we have used reduce() to filter out the non-unique values from an array. In the below example, we are going to remove all the repeating numbers

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

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

// Use reduce again to create an array of unique values
const uniqueValues = Object.keys(unique).reduce((acc, key) => {
    if (unique[key] === 1) {
        acc.push(Number(key)); // Convert key back to a number
    }
    return acc;
}, []);

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

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

Conclusion

In this article, we have seen simple methods of filtering out non-unique values from an array. We have implemented it by using methods such as the filter() method, the for loop, the reduce() method, and the set and filter method. All methods are simple and efficient to use.