How to remove duplicates in a JavaScript array?

General Discussions
#1

How to remove duplicates in a JavaScript array?

#2

In JavaScript 1.6 / ECMAScript 5, you can use the native filter method of an array to get an array with unique values. Here’s how you can do it:

function onlyUnique(value, index, array) {
  return array.indexOf(value) === index;
}

// usage example:
var a = ['a', 1, 'a', 2, '1'];
var unique = a.filter(onlyUnique);

console.log(unique); // ['a', 1, 2, '1']

The filter method loops through the array and keeps only those entries that pass the given callback function onlyUnique. The onlyUnique function checks if the given value is the first occurrence. If not, it must be a duplicate and will not be copied.

This solution works without any extra libraries like jQuery or prototype.js and handles arrays with mixed value types.

For old browsers (<IE9) that do not support the native filter and indexOf methods, you can find workarounds in the MDN documentation for filter and indexOf.

If you want to keep the last occurrence of a value, simply replace indexOf with lastIndexOf.

With ES6, this can be shortened to:

// usage example:
var myArray = ['a', 1, 'a', 2, '1'];
var unique = myArray.filter((value, index, array) => array.indexOf(value) === index);

console.log(unique); // unique is ['a', 1, 2, '1']

ES6 introduces a native Set object to store unique values. To get an array with unique values, you can do this:

var myArray = ['a', 1, 'a', 2, '1'];

let unique = [...new Set(myArray)];

console.log(unique); // unique is ['a', 1, 2, '1']

The constructor of Set takes an iterable object, like an array, and the spread operator ... transforms the set back into an array.

#3

In ES6/ES2015, you can achieve a one-liner solution using Set and the spread operator, which is more efficient than the previous method:

let uniqueItems = [...new Set(items)];

This creates a new Set from the items array, which automatically removes duplicates because Set only allows unique values. Then, the spread operator ... is used to convert the Set back into an array, resulting in uniqueItems containing only unique values from the items array.

#4

Using ES6 syntax, you can achieve a one-liner solution in pure JavaScript:

list = list.filter((x, i, a) => a.indexOf(x) == i);

In this code snippet, list is filtered to keep only the elements for which the index of the first occurrence (a.indexOf(x)) is equal to the current index (i), effectively removing duplicate values.

For compatibility with older browsers that do not support ES6, you can use the following ES5 syntax:

list = list.filter(function (x, i, a) { 
    return a.indexOf(x) == i; 
});

This accomplishes the same result as the ES6 version but is compatible with IE9 and newer browsers.

#5

Hello

To remove duplicates from a JavaScript array, here are three common methods:

  1. Using Set :

const uniqueArray = […new Set(arrayWithDuplicates)];

Converts the array to a Set (which removes duplicates) and then back to an array.

  1. Using filter and indexOf :

const uniqueArray = arrayWithDuplicates.filter((value, index, self) => self.indexOf(value) === index);

Filters the array to include only the first occurrence of each value.

  1. Using reduce :

const uniqueArray = arrayWithDuplicates.reduce((acc, value) => {

if (!acc.includes(value)) acc.push(value);

return acc;

}, []);

Uses reduce to accumulate unique values into a new array.

Hope it helps ! :slightly_smiling_face:

Thank you stevediaz

1 Like
#6

Thank you @stevediaz for the steps