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 = [ Set(array)];
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 = [
var uniqueSandwiches = sandwiches.filter(function(sandwich, index) {
 return sandwiches.indexOf(sandwich) === index;
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
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.


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 😊


Popular posts from this blog

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 connections caching retrying failed requests threading response parsing error 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  using the Retrofit library. To work with Retrofit, we need three classes -  Model class to map the JSON data Interfaces which defines the possible HTTP operations Retrofit.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 respon

Threads in Java - Masterclass (Part 0)

Threads in Java 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 proc

Material design profile page in Android

Hey everyone, some days back I was working on one my personal Android project. In that project, I was supposed to create a simple profile page for a user. This profile page was supposed to show some basic details of a user. The output of this UI will be like this - Profile page screen I created the profile page using material design and in this post, I am going to discuss a step by step tutorial to create a simple yet elegant profile page. Without further ado, let's get started. Creating a new project Click on File ➤ New Project ➤ Empty Activity and fill the necessary details. Change styles.xml file Navigate to app\src\main\res\values\styles.xml Change the style value from DarkActionBar to NoActionBar as below <resources> <!-- Base application theme. --> <style name= "AppTheme" parent= "Theme.AppCompat.Light.NoActionBar" > <!-- Customize your theme here. --> <item name= "colorPr