How to Get Unique Values in JavaScript Array

Web developers commonly use JavaScript arrays to store different kinds of data. They offer tons of useful functions and capabilities. Often JavaScript developers need to remove duplicates and get unique values in JavaScript arrays. There are several simple ways to do this. In this article, we will learn how to get unique values in JavaScript array.

Why Remove Duplicate in JavaScript Array

Sometimes, you may receive data with duplicates in them. You may need to clean it up before you can analyze it further. Therefore, you will need to remove duplicates and get unique values in JavaScript array.

How to Get Unique Values in JavaScript Array

Here are some of the most popular ways to remove duplicates from JavaScript arrays.

1. Using Spread Operator & Set

In this solution, we first convert the array into a set. By definition, a set can have only unique items. Therefore this operation automatically drops all duplicate items. Then we convert this set into an array, using spread operator ‘…’ and array constructor.

a = [1, 2, 2, 3];
b = new Set(a);
a = [...b];
console.log(a); // output is [1, 2, 3]

In the above code, if do not prefix the set with spread operator, then it will not unpack the items of the set before storing them into an array. Here is what happens if you do not use spread operator above.

a = [1, 2, 2, 3];
b = new Set(a);
a = [b];
console.log(a); // output is [ Set(3) { 1, 2, 3 } ]

You can also use Array() constructor to create array from set. You will get the same output.

a = [1, 2, 2, 3];
b = new Set(a);
a = Array(...b);
console.log(a); // output is [1, 2, 3]

This is the most convenient and recommended way to get unique values from JavaScript array.

2. Using Filter Method

You can also use filter() method to remove duplicates from JavaScript array. Filter method allows you to create a new array from another array using items that satisfy one or more conditions specified in filter function.

a = [1, 2, 2, 3];
a = a.filter((x, i, a) => a.indexOf(x) == i)
console.log(a); // output is [1, 2, 3]

In the above code, we define a filter function, which loops through the array and checks if its index is equal to the index returned by indexOf() function. indexOf() function returns the index of first occurrence of an item in an array. So if an item is a duplicate then its index will not be equal to the result returned by indexOf() function, and it will not be returned by filter() method. Therefore, the result of filter method will contain only the first occurrence of each unique item in the array.

If you find the above code to be complicated, you can simplify it by separately defining a function check_index() that returns true if the index of said item is equal to its first occurrence, else it returns false.

function check_index(value, index, array) {
  return array.indexOf(value) === index;
}

a = [1, 2, 2, 3];
a = a.filter(check_index)
console.log(a); // output is [1, 2, 3]

The previous method removes all duplicates from the array. There is no way to customize it. But if you want to selectively remove only certain duplicates then you can modify your check_index function to exclude those duplicates.

3. Using Includes Method

The includes() method checks whether a given item is present in an array or not. If it is present, then it returns true, else it returns false. We can use it to get unique items from JS array. In this approach, we create an empty array to store the array items without duplicates. We loop through the original array and in each iteration, we check if the given item is present in the new array or not. For this, we use includes() function. If it is not present, then we add it to the new array.

a = [1, 2, 2, 3];
a1 = [];
for (let i = 0; i < a.length; i++) {
    
    // Check if item is present in new array
    if (!a1.includes(a[i])) {
    
        // If not then push item to new array
        a1.push(a[i]);
    }
}
console.log(a1); // output is [1, 2, 3]

4. Using Underscore library

Underscore is a popular JavaScript library that offers many functions for data manipulation. If you happen to use it in your website or application, then you can directly call its uniq() function to get unique values in array.

<script src="http://underscorejs.org/underscore-min.js"></script>
a = [1, 2, 2, 3];
console.log(_.uniq(a)); // output is [1, 2, 3]

5. Using Array Prototype

If you commonly need to remove duplicates from array, then you can create a Prototype function that can be called on all JS arrays.

Array.prototype.unique = function() {
    return [...new Set(this)];
}
a = [1, 2, 2, 3];

console.log(a.unique());

In the above function we simply call array constructor and set function on this that is the present Array under consideration. Once you define this in your JavaScript file, you can call it directly on any array on your web page..

Conclusion

In this article, we have learnt several simple ways to easily remove duplicates from JavaScript array. Using spread operator and set function is the easiest way to get unique items in JavaScript array. If you want to selectively remove only some duplicates from your array, then you can use filter() function where you specify the exclusion of certain duplicates. If you use third-party libraries like underscore, then you can use their built-in functions to remove duplicates. We have also learnt how to create prototype function for an array so that it can be directly called from every array. You can use any of these methods depending on your requirement.

Also read:

How to Copy Array in JavaScript
How to Empty Array in JavaScript
How to Merge Two JavaScript Objects