How to Remove Duplicates From An Array in JavaScript

Sharing is Caring

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.

Sharing is Caring

Brian is a programmer and technology leader living in Niagara Falls with more than ten years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.