A common task required in JavaScript when dealing with arrays is the ability to preserve the array and at the same time remove duplicates from the array.
Remove Duplicates from Array in ES5
If you required older browser support, here’s a solution that uses ES5’s Array.reduce() method to remove duplicates from an array:
let items = ['a', 1, 'a', 'beachfront', 'avenue'];
let unique = items.reduce(function(a,b) {
if (a.indexOf(b) < 0 ) {
a.push(b);
}
return a;
},[]);
console.log(items); // ['a', 1, 'a', 'beachfront', 'avenue']
console.log(unique); // ['a', 1, 'beachfront', 'avenue']
Code language: JavaScript (javascript)Remove Duplicates from Array in ES6
Starting with ES6, doing this is much easier using the new Set() constructor. The following example uses Set() along with ES6’s spread operator to remove duplicates from an array:
let items = ['a', 1, 'a', 'beachfront', 'avenue'];
let unique = [...new Set(items)];
console.log(items); // ['a', 1, 'a', 'beachfront', 'avenue']
console.log(unique); // ['a', 1, 'beachfront', 'avenue']
Code language: JavaScript (javascript)Solutions for More Complex Examples
Some solutions to this require more complex code. For example, what if you want to remove two objects that are identical? Or what if you want to sort the items while removing the duplicates? These are beyond the scope of this brief snippet, but you can view the following Stack Overflow threads for a number of different answers that work in older browsers:
