In this article, we will explore two different ways to remove duplicates from a JavaScript array: using the built-in JavaScript data structure Set
, and using the filter
array method. Let's take a look at each of them.
Using the ‘Set’
As you may know, a Set
in JavaScript stores unique values only. We can use this feature to remove duplicates from an array.
const ingredients = ['cheese', 'chicken', 'garlic', 'mayo', 'cheese'];
// Convert the array to a set
const ingredientsSet = new Set(ingredients);
// Convert the set to an array
const uniqueIngredients = Array.from(ingredientsSet);
console.log(uniqueIngredients); // [ 'cheese', 'chicken', 'garlic', 'mayo' ]
In the above example, we've converted the ingredients
array into a Set
, which removes the duplicate elements. However, the problem is that a Set
is not an array, so we lose the power to use the array methods on it.
Fortunately, we can convert a Set
back into an array by using the from
method on the Array
constructor, which makes uniqueIngredients
an array of distinct ingredients. That's it!
Using the ‘filter’ method
We can also use the filter
array method to achieve the same objective. This one is my personal favorite. Let's take a look.
const ingredients = ['cheese', 'chicken', 'garlic', 'mayo', 'cheese'];
// Remove duplicates
const uniqueIngredients = ingredients.filter(
(element, index, elements) => elements.indexOf(element) === index
);
console.log(uniqueIngredients); // [ 'cheese', 'chicken', 'garlic', 'mayo' ]
The filter
method returns an array containing the elements that satisfy the specified conditions in the callback function.
The callback function here has three parameters: element
, index
, and elements
where the element
and the index
are the current element and index in the loop, and the elements
is the array we are performing the filter
on (in this case, the ingredients
array).
In the return statement of the callback function, we've used the indexOf
array method on the elements
array, which takes an argument and returns the index of the first element found with the argument in the array.
For example, in the first iteration of the loop, the element
is ‘cheese’. So, elements.indexOf('cheese')
returns 0. In the second iteration, the element
is 'chicken', so it returns 1, and so on. Let's call this index the ‘found index’.
Moving on in the code, we check to see if the ‘found index’ matches with the current index. If it does, the condition is met, and we get the current element
returned. For instance, in the first iteration, both the ‘found index’ and the current index are 0, so we get ‘cheese’ returned.
However, in the last iteration of the loop, with the element
being ‘cheese’, the ‘found index’ is 0, but the current index is 4. So, the condition isn't met, and we don't get the element
returned. Following this pattern, we get an array without any duplicate elements in it.
This method may feel a bit confusing compared to the first one, and I agree with that. However, it has a few benefits:
- It works with slightly less code.
- You can chain other array methods for further processing.
- It allows you to get all duplicate elements in an array if needed.
These benefits, especially the second one, make the filter
method my personal favorite. However, you can use either method as you prefer. With these techniques, I hope you can now confidently remove duplicates from any JavaScript array.