Skip to main content

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 😊

Comments

Popular posts from this blog

Threads in Java - Masterclass (Part 0)

Multithreading is a way to introduce concurrency in a program. In any case, if there are parallel paths in our program (parts which do not depend on the result from another part), we can make use of multithreading.
One should exploit this feature, especially with all these multiple core machines nowadays.

Below are a few reasons why we should use multithreading -
1. Keep a process responsive There was once a time when you would print a document in MS Word and the application would freeze for an annoyingly long amount of time until the job finished. Eventually, Microsoft solved this problem by running a printing job parallel to the main thread/ GUI thread.  To be clear though, not only GUI apps but Network services have to keep an ear to the ground for new clients, dropped connections and cancellation requests. In either case, it is critical to do the heavy lifting on a secondary thread to keep the user satisfied. 2. Keep a processor busy Keeping a processor busy can be a tough task e…

Parsing XML using Retrofit

Developing our own type-safe HTTP library to interface with a REST API can be a real pain as we have to handle many aspects -
making connectionscachingretrying failed requeststhreadingresponse parsingerror handling, and more.  Retrofit, on the other hand, is a well-planned, documented and tested library that will save you a lot of precious time and headaches. In this tutorial, we are going to discuss how we can parse the XML response returned from https://timesofindia.indiatimes.com/rssfeedstopstories.cms using the Retrofit library.

To work with Retrofit, we need three classes -  Model class to map the JSON dataInterfaces which defines the possible HTTP operationsRetrofit.Builder class - Instance which uses the interface and the Builder API which allows defining the URL endpoint for the HTTP operation. Every method of the above interface represents on possible API call. The request type is specified by using appropriate annotations (GET, POST). The response is returned as a Call object…

Threads in Java - Basics (Part 1)

Hello everyone, today we are going to discuss one of the most important concepts in Java - Multithreading.
In the first part of this multi-part blog series, we will be discussing the basics of threads, how can we create them? which is the best approach? and many other questions like these. So without further ado, let's get started.
What are threads? Let's say you are Batman (pretty cool, eh? 😊) and your arch-enemy, the master alchemist Ra's al Ghul has brewed a dangerous potion from the Lazarus Pit. To avenge his earlier defeats by the hands of The Dark Knight, he has spread the potions all over the Gotham city.  Now, the only way to save citizens of Gotham is to find the cure of the potion (hidden in the city somewhere) and find Ra's as well before he can devise a new plan to destroy the city.  Batman calls Nightwing (the original Robin) and asks his help in finding Ra's. Batman decides to find the cure of the deadly potion. In the end, both Batman and Robin wer…