Everyone has to remove duplicates from an array in JavaScript at some point. It’s even a common coding challenge asked during interviews.
How to Remove Duplicates From a JavaScript Array
- Filter method
- Sets
- forEach method
- Reduce method
- Adding a unique method to the array prototype
- Underscore JS
- Removing duplicate objects using the property name
With that in mind, here are some different ways to filter out duplicates from an array and return only the unique values.
7 Methods to Remove Duplicates From JavaScript Arrays
There are several ways to remove duplicates from a JavaScript array and clean up your code. Below are seven methods for eliminating repeated data from your JavaScript arrays.
1. Filter Method
The filter
method creates a new array of elements that pass the conditional we provide. And any element that fails or returns false
, it won’t be in the filtered array.
![Filter method code example for JavaScript array.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/1_remove_duplicates_from_array_javascript.jpg)
We can also use the filter
method to retrieve the duplicate values from the array by simply adjusting our condition.
![A second example for removing duplicates from JavaScript array with the filter method.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/2_remove-duplicates-from-array-javascript.jpg)
2. Sets
Sets
are a new object type with ES6 (ES2015) that allows you to create collections of unique values.
![Sets method code to remove duplicates from array in JavaScript.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/3_remove-duplicates-from-array-javascript.jpg)
3. forEach Method
By using forEach
, we can iterate over the elements in the array, and we will push into the new array if it doesn’t exist in the array.
![forEach method code to remove duplicates in an array.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/4_remove-duplicates-from-array-javascript.jpg)
4. Reduce Method
Reduce
is always a bit trickier to understand. The reduce
method is used to reduce the elements of the array and combine them into a final array based on the reducer function that you pass.
![Removing duplicates from a JavaScript array using the reduce method code.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/5_remove-duplicates-from-array-javascript.jpg)
Here is the same reduce
method with a different approach:
![Reduce method code to remove duplicates from JavaScript array.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/6_remove-duplicates-from-array-javascript.jpg)
5. Adding a Unique Method to the Array Prototype
In JavaScript, the array prototype constructor allows you to add new properties and methods to the Array
object.
![Another code example for removing duplicates from an array in JavaScript.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/7_remove-duplicates-from-array-javascript.jpg)
Sets
will work much faster when you compare with the normal approach.
![Sets method code using array prototype to remove duplicates.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/8_remove-duplicates-from-array-javascript.jpg)
6. Underscore JS
_.uniq
method produces a duplicate-free version of the array. We can also sort this array by passing the second parameter is true
.
![Underscore JS method code to remove duplicates from a JavaScript array.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/9_remove-duplicates-from-array-javascript.jpg)
7. Removing Duplicate Objects Using the Property Name
Sometimes you have to remove duplicate objects from an array of objects by the property name. We can achieve this by:
![Removing duplicate objects from an array code example.](https://builtin.com/sites/www.builtin.com/files/styles/ckeditor_optimize/public/inline-images/10_remove-duplicates-from-array-javascript.jpg)