JavaScript Duplicate Removal From Arrays: 3 Methods

Do you create websites? Are you an IT specialist? You would then be knowledgeable with JavaScript and its many built-in functions, methods, etc. for various implementations, issues, & purposes.

Finding unique items in an array or eliminating duplicates from an array is one of the often asked questions in programming language interviews (we’ll speak about JavaScript here).

Use of Sets

Whether they be raw values or object references, the Set object contains distinct values of any type.

Here, we transform the animal array to a Set in order to eliminate duplication. Duplicate items will automatically be removed by the new Set. Then, we’ll change this set back into the original unique array.

You could be curious as to what these three dots, spread syntax, or other terms in JavaScript mean. It extends an iterable entity—such as an array, a list, etc.—into its component pieces.

// Use Set to eliminate duplicates from an array.
    let animals = ["Lion", "Tiger", "Rabbit","Mouse", "Monkey", "Rabbit", "Fox"];
    let unique = [...new Set(animals)];
    console.log(unique);
    Output: ["Lion", "Tiger", "Rabbit", "Mouse", "Monkey", "Fox"];
Using Filter

To further grasp this strategy, let’s examine the what and why of previous approaches.

indexOf()

The index of an element’s first appearance in an array is returned by this function. The element whose current index and indexOf() value are same was returned using the reasoning that the duplicate item is the item whose index is different from its indexOf() value.

filter()

We employ the filter() technique to include just those items whose current indexes correspond to their indexOf() values in order to eliminate the duplicates. These data were saved in an array called unique, and we later called the filter() method to get them.

For easier comprehension, consider the following example:

Format

These distinct items were filtered, saved in a distinct array, and then returned.

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

Using this strategy, we can easily discover duplicates in an array by simply changing the equality (==) condition to (!=).

Using forEach

Let’s go through the terminology we used one again.

  1. forEach :It iterates over each and every component of an animal’s array.
  2. includes() :If an element is in an array or not, it returns true.
  3. push() :The additional items are added to the array’s tail.

The method’s approach is to declare a null unique array, cycle over every animal array element, and then determine if the unique array contains (or has) that element or not. If not, we insert that element into a special array if the condition turns out to be true. We are able to print all the unique items in the unique array as a result of this operation.

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

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories