Arrays are a fundamental data structure in JavaScript, and they store collections of values in a single variable. Often, these arrays may contain duplicate items, which can cause problems.
In this situation, it is important to remove all the duplicate items from our JavaScript array. There are many different ways to accomplish this in JavaScript.
In this post, I will walk you through some of the most popular methods to remove duplicates from an array. We will use some built-in array methods like filter(), forEach(), map(), reduce(), etc, as well as the for loop and Set object.
By the end of this post, you'll have a clear understanding of how each of these methods works, and you'll be able to choose the best method for your specific use case.
So, let's get started!
Remove Duplicate Items From a JavaScript Array Using Set Object
The Set object in JavaScript allows us to store unique values of any type. That means, if we create a Set using an array that has duplicate items, it will only keep unique items by removing the duplicates.
Let's see an example of how to create a Set from an array to get rid of identical values.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = [...new Set(colors)]
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
Here, I have a colors array with some names of colors. This array has some duplicate names. create a new Set object using the original array. The Set object automatically removes any duplicates, leaving only the unique items.
Call the Set constructor function with the new keyword and pass the colors array to it. To convert the Set object back to an array, we use the spread operator (...) to spread the items of the Set object into a new array.
Using the Set object is one of the easiest and most efficient ways to remove duplicate items from an array in JavaScript.
Remove Duplicate Items Using filter() and indexOf() Methods
If you have an array that contains duplicates and want to remove them, you can use the filter() method in JavaScript. This method creates a new array by filtering out elements that do not meet a certain condition.
In this case, we will use the filter() method to create a new array of unique colors from the colors array.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = colors.filter((color, index) => {
return colors.indexOf(color) === index
})
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
To remove the duplicates, I am creating a new array called uniqueColors by calling the filter() method on the colors array.
This method takes in a callback function that is executed for each element in the array. In this example, I pass a callback function that takes two parameters – the current element and its index in the array.
Use the indexOf() method to check if the current item's index is equal to the first occurrence of that item in the array.
If they are equal, you know it is the first item in the array, and you return true to keep it in the filtered array. Otherwise, you return false to remove it from the filtered array.
Also Read: How to Remove Elements From an Array in JavaScript
Remove Duplicate Items Using forEach() and includes() Methods
The forEach() method iterates over each element in an array, while the includes() method checks if a value exists in an array. Combining these two methods, we can remove duplicate items from an array while preserving the original order.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = []
colors.forEach((color) => {
if (!uniqueColors.includes(color)) {
uniqueColors.push(color)
}
})
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
To do this, I have declared an empty array called uniqueColors that I will use to store the unique colors. I then use the forEach method to loop through each item in the colors array.
In the loop, you check if the uniqueColors array already includes the current color name using the includes method. If it does not, you push the current color to the uniqueColors array using the push method.
When the loop completes, you will have unique items inside the uniqueColors array.
Also Read: In-Depth Guide to Shuffle Any Type of JavaScript Array
Remove Duplicate Items Using for…of Loop and includes() Methods
The for...of loop is a modern and concise way of iterating over elements of an array, and the includes() method checks if a value exists in an array.
It is similar to the previous technique. Instead of using the forEach() method, I am using the for...of loop to iterate over an array.
By combining this loop with the includes() method two methods, we can easily remove duplicate items from an array.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = []
for (let color of colors) {
if (!uniqueColors.includes(color)) {
uniqueColors.push(color)
}
}
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
I have used a for...of loop to iterate over each item in the colors array. Inside the loop, I have access to each color name. The includes() method checks whether the uniqueColors array contains a specific element or not.
if the uniqueColors array does not include the current color, you will push it to this array using the push() method.
Also Read: 6+ Ways to Find an Object in an Array of Objects Using JavaScript
Remove Duplicate Items Using for Loop and indexOf() Methods
You can use a for loop to iterate over an array in combination with the indexOf() method to remove duplicate items from an array.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = []
for (let i = 0; i < colors.length; i++) {
if (uniqueColors.indexOf(colors[i]) === -1) {
uniqueColors.push(colors[i])
}
}
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
You use a for loop to iterate over each element in the colors array. For each element, check whether it already exists in the uniqueColors array by calling the indexOf method on uniqueColors and passing in the current element from colors array.
If indexOf returns -1, it means that the element is not found in uniqueColors, so you can add it to the array using the push() method.
Also Read: All Methods to Loop Through Objects in JavaScript
Remove Duplicate Items Using reduce() and includes() Methods
The reduce() method is a powerful function that allows us to transform an array into a single value by applying a callback function to each element of the array.
Using reduce(), you can also remove duplicate items from an array by applying a filter function that checks if an item already exists in the result array.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = colors.reduce((acc, color) => {
if (!acc.includes(color)) {
acc.push(color)
}
return acc
}, [])
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
The reduce() method iterates over each element in the colors array, and executes a function to each element. It also passes the result of each iteration as an argument to the next iteration.
The callback function takes two parameters: the accumulator (which is an empty array in this case), and the current item in the array.
For each color in the colors array, you check if the acc array (the accumulator) already includes the color name. If it doesn't, you add the color name to the acc array.
Finally, this method returns the acc array at the end of the iteration, which gives you an array of unique colors.
Also Read: Best Ways to Access Object Properties Dynamically in Javascript
Remove Duplicate Items Using map() and indexOf() Methods
The map() method returns a new array with the results of calling the function on each element. You also have to use the indexOf() and filter() methods with it to remove duplicate items from an array.
const colors = ['white', 'green', 'black', 'red', 'blue', 'green', 'black', 'red']
const uniqueColors = colors
.map((color, index) => {
return colors.indexOf(color) === index ? color : null
})
.filter((color) => color !== null)
console.log(uniqueColors)
// [ 'white', 'green', 'black', 'red', 'blue' ]
You use the map() method to loop through each item of the colors array with a callback function that takes two parameters: the current item in the array, and its index.
Inside the callback function, you can use the indexOf() method to check if the current item's index is equal to the first occurrence of that item in the array.
If they are equal, you will return the current color name from the map() method to the new array. Otherwise, you will return null.
After that, you use the filter() method to remove all the null values from the resulting array and get only the unique color names.
Note: I personally don't like this technique to separate unique items. Because you have to loop over the array twice for map() and filter() methods. It can be time-consuming if the array is large.
Also Read: How to Get Scrollbar Position in JavaScript of a Page or div
Conclusion
We have discussed multiple techniques to take out duplicate items from an array. The best technique to use will depend on the specific situation.
For small arrays, any of the techniques we discussed will work fine. For larger arrays, the for...of, for loops or reduce() method may be the most efficient.
Additionally, we also should consider the readability of the code. Often, we choose a technique that is easy to understand and maintain for your specific use case.
It's important to understand the different techniques available to get a unique array by removing duplicate items from an array in JavaScript so that you can choose the best technique for their specific situation.
