Remove duplicates from an array (JavaScript)

In this post, we will see how to remove duplicates from an array in JavaScript.

We will look into two methods - ES6 and Vanilla JavaScript.

ES6 Method

In ES6, this is very simple using the Set constructor and the Spread syntax as below -

let array = [1, 3, 4, 1, 2, 4, 3, 4, 5, 7, 6, 5, 8];
let unique = [...new Set(array)];
console.log(unique);

The output of this code will be -

[ 1, 3, 4, 2, 5, 7, 6, 8 ]

Set - lets you store unique values of any type, whether primitive values or object references.
Spread - allows an iterable to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Using Vanilla JavaScript

If you want to use vanilla JavaScript, you can utilize Array.indexOf() and Array.filter() methods as follows -

var sandwiches = [
 "turkey",
 "ham",
 "turkey",
 "tuna",
 "pb&j",
 "ham",
 "turkey",
 "tuna"
];
var uniqueSandwiches = sandwiches.filter(function(sandwich, index) {
 return sandwiches.indexOf(sandwich) === index;
});
console.log(uniqueSandwiches);

The output of this code snippet will be -

[ 'turkey', 'ham', 'tuna', 'pb&j' ]

But how does this work? For example, “turkey” shows up at 0, 2, and 6 index. The line

sandwiches.indexOf(sandwich)

returns the first matching index of “turkey” always, hence when the index of “turkey” is 0, it is returned but for indexes 2 and 6, the condition becomes false and hence they are ignored. This is true for all the other duplicates.

Conclusion

In this post, we discussed two approaches of removing duplicates from an array in JavaScript - ES6 and Vanilla JS.

I would love to hear your thoughts on this post and would like to have suggestions from you to make this post better. 

Feel free to befriend me on Facebook, Twitter or Linked In or say Hi by email.

Happy Learning 😊