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.