As a JavaScript developer, there’s occasionally a need to remove duplicates from an array of values.
By using our knowledge of advanced data sets we can write a lot less code and take advantage of built in features in JavaScript.
Use a Set to Remove Duplicates
The simplest and easiest way to remove a duplicate from an array in JavaScript is to use a Set.
Sets are guaranteed to be unique. In math, and computer science, a set is a well defined collection of distinct values.
let numbers = [1,3,1,3,2,4,7]
let uniquedNumbers = [...new Set(numbers)]
// 1, 3, 2, 4, 7
console.dir(uniquedNumbers);
ES6 introduced the set to JavaScript. As you can see, it works by accepting an array in the constructor and adding only the unique values to it. By using the spread operator, we can turn the set back into an array.
Filter() to Detect Duplicates
Using the filter method we can also detect duplicates using a check of indexOf() or find() because the filter method returns a brand new array with only true values.
Using functional programming techniques we could create a function like makeUnique:
'use strict'
let numbers = [1, 3, 1, 3, 2, 4, 7]
const makeUnique = (values) => values.filter((v, i) => values.indexOf(v) === i)
console.dir(makeUnique(numbers))
We then pass in our array to makeUnique and it will remove all of the potential duplicates.
Using a Second Array & Adding New Values
And finally, an old school technique is to use a for loop or a foreach and add the values to an array as you go. For each element, we make sure it isn’t already part of the list.
'use strict'
function makeUnique (values) {
let uniquedValues = {}
for (let i = 0; i < values.length; i++) {
if (!uniquedValues[values[i]]) {
uniquedValues[values[i]] = true
}
}
return Object.keys(uniquedValues)
}
console.dir(makeUnique([1, 3, 1, 3, 2, 4, 7]))
Summarizing
In this article, I’ve shown three different ways to remove duplicate items from an array using JavaScript.
I have avoided any third party libraries because they aren’t necessary.