Remove Duplicates from an Array in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 13 20213 min read

banner

Photo by Greg Raines

Remove Duplicates from an Array using a Set #

To remove all duplicates from an array, pass the array as a parameter to the Set constructor - [...new Set(arr)]. Each value in a Set has to be unique, so the Set object will automatically remove any duplicate values contained in the array.

index.js
const arr = ['one', 'two', 'one', 'two', 'three']; const unique = [...new Set(arr)]; console.log(unique); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three']

The parameter we pass to the Set constructor is an iterable, in our case an array.

All of the elements of the array get added to the newly created Set, however, the Set object can only store unique values, so any duplicates get automatically removed from the set.

The last step is to use the Spread operator (...) to unpack the values of the set into a new array.

Remove Duplicates from an Array using filter and indexOf #

To remove all duplicates from an array:

  1. Call the filter() method, passing it a function.
  2. On each iteration, the function should call the indexOf() method and check if the returned value is equal to the current index.
  3. The indexOf method returns the index of the first occurrence of an element in the array, so the condition will only be met if this is the first encounter of the element.
index.js
const arr = ['one', 'two', 'one', 'two', 'three']; const unique = arr.filter((element, index) => { return arr.indexOf(element) === index; }); console.log(unique); // ๐Ÿ‘‰๏ธ ['one', 'two' 'three']

The function we pass to the Array.filter method gets invoked with each element in the array.

On each invocation, we check if the index of the current iteration is equal to the index returned from calling the Array.indexOf method.

Since the indexOf method returns the index of the first occurrence of an element with the provided value, this check wouldn't pass for any of the duplicate elements in the array.

The filter method only adds elements to the results array if the test implemented by the function passes, so only unique elements will be contained in the results array.

Remove Duplicates from an Array using forEach and includes #

To remove all duplicates from an array:

  1. Create an empty array that will store the unique values.
  2. Call the forEach() method on the original array, passing it a function.
  3. The function should use the includes() method to check if the results array doesn't contain the current element.
  4. If the element is not contained in the results array, it is not a duplicate and should be added to the array using the push() method.
index.js
const arr = ['one', 'two', 'one', 'two', 'three']; const unique = []; arr.forEach(element => { if (!unique.includes(element)) { unique.push(element); } }); console.log(unique); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three']

The function we pass to the array.forEach method gets invoked with each element in the array.

On each iteration we have to check if the current element is not included in the results array.

If it's not included, then we know it's not a duplicate value and we push it into the results array.

Remove Duplicates from an Array using reduce and includes #

To remove all duplicates from an array:

  1. Call the reduce() method, passing it a function as the first parameter and an empty array as the second.
  2. On each iteration the function should check if the accumulated results array contains the current element.
  3. If the current element is not contained in the results array, it is not a duplicate and should be added to the array using the push() method.
index.js
const arr = ['one', 'two', 'one', 'two', 'three']; const unique = arr.reduce((accumulator, current) => { if (!accumulator.includes(current)) { accumulator.push(current); return accumulator; } return accumulator; }, []); console.log(unique); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three']

The function we passed to the Array.reduce method gets invoked for each element in the array.

The second parameter we passed to the method is the initial value for the accumulator, in our case an empty array.

On each iteration our function returns the accumulator that will be passed to the next invocation of the function.

The current parameter refers to the current element in the array.

For each element we check if it's not included in the accumulator array. If the value is not included, we know it's not a duplicate and should be pushed into the array.

The reduce method returns a new array, containing only the unique values from the original array.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee