3 Ways To Remove Duplicates From Arrays In JavaScript

Are you a web developer? Are you a programmer? Then you would be familiar with JavaScript & its different in-built functions, methods, etc for different implementations, problems & purposes.

 

One of those widely asked problems in interviews in any programming language (we will talk about JavaScript here) is finding unique elements in an array or removing duplicates from an array.

 

So, this article will teach you three simple methods to execute it from scratch. Here we go,

 

Before we start, just a suggestion, use Visual Studio Code as it is the best editor for everything, specifically for web development-related stuff. Let’s look over setup-related stuff that one should do. So, if you run any JavaScript program in it or if you are a beginner in it, you should do the following things to make things smooth,

1. Install this extension in Visual Studio Code.
2. To run your program, just “Open New Terminal” and then write node <filename>. Make sure you have installed node.js on your system.
3. For more reference, you can visit here.

Now, coming back to the point that those three simple ways to solve the widely asked question of removing duplicates in array in JavaScript are as follows,

First of all, we would declare an array with duplicate elements namely animals and an array with all unique elements namely unique in all methods we will discuss.

Using Sets

The Set object stores unique values of any type, whether primitive values or object references.

Here, to remove duplicates, we convert the animal array to a Set. The new Set will implicitly remove duplicate elements. Then we will convert this set back to the unique array.

You might be wondering what these … or three dots or technically spread syntax are in JavaScript. Well, it takes in an iterable entity like arrays or lists, etc, and expands it into individual elements.

// Remove duplicates in an array using Set.
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]
let unique = [...new Set(animals)]
console.log(unique)
Output: ['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

Using Filter

To under this method, let’s understand what & why of methods that have been used,

indexOf()

 

This method returns the index of the first occurrence of an element in an array. The logic we used that the duplicate item is the item whose index is different from its indexOf() value, from here what we returned that the element whose current index and indexOf() value is equal.

filter()

 

To remove the duplicates, we use the filter() method to include only elements whose current indexes match their indexOf() values. We stored those values in an array named unique and returned them by calling using the filter() function.

For better understanding, in our example, we have like this,

Format

 

Current Index -> indexOf(),

• For value “Lion”, we have: 0 -> 0, 4 -> 0. (Equality doesn’t holds)
• For value “Rabbit”, we have: 1 -> 1. (Equality holds, unique element)
• For value “Mouse”, we have: 2 -> 2. (Equality holds, unique element)
• For value “Monkey”, we have: 3-> 3. (Equality holds, unique element)
• For value “Ape”, we have: 5 -> 5. (Equality holds, unique element)

Filtered these unique elements and stored them in a unique array and returned them.

// Remove duplicates in array using filter method
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]
let usingFilter = () => {
return unique = animals.filter(function(item,index){
      return animals.indexOf(item) == index;
   });
}
console.log(usingFilter())
Output: ['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

Fun Fact

 

If we need to find duplicates in an array using this method, we just have to reverse that equality (==) condition to (!=) and there we go.

Using forEach

Let’s again understand what terminologies we used here,

1. forEach
   It is used to iterate each and every element of an animal's array.
   
   
2. includes()
   It returns true if an element is in an array or otherwise.
   
   
3. push()
   It adds the new items to the end of an array.

The logic behind this method is that we declared a null unique array, then we iterate each & every element of the animal array and then check if the unique array includes (or has) that element or not. If not, then if the condition becomes true, then we push that element into a unique array. So, through this process, we get all the unique elements in the unique array and printed them.

// Remove duplicates in array using forEach loop method
let animals = ["Lion", "Rabbit", "Mouse", "Monkey", "Lion","Ape"]
let unique = [];
animals.forEach((item) => {
   if(!unique.includes(item)){
      unique.push(item);
   }
});
console.log(unique);
Output: ['Lion', 'Rabbit', 'Mouse', 'Monkey', 'Ape']

You can find the source codes for all the above methods here.

Hence, we have learned three important, short & easily grasped methods to remove duplicates from an array or find duplicates or unique elements from an array. There are many other methods too to do the same stuff but these are easily remembered ones. If you find any more, then please drop down below in the comments.