| by Arround The Web | No comments

How to Remove Duplicate Elements From JavaScript Array?

In JavaScript, we can perform various tasks on arrays such as popping/pushing array elements, removing duplicate elements, concatenating array elements, and so on. Removing duplicate elements from an array is a very simple but very crucial task in the programmer’s life. Therefore, JavaScript offers numerous approaches for removing duplicate elements from an array such as the use of JavaScript Set, indexOf() method, filter() method, and so on.

This post will explain the below-given methods to delete the duplicate array elements in JavaScript:

So, without a further delay, let’s get started!

How to use Set in JavaScript to remove duplicate array elements?

A Set in JavaScript allows us to store the unique elements of any data type such as primitive, or object references. This means each value will occur only once in a collection.

Example: Remove Duplicate elements using Set

Let’s consider the below code snippet where we have an array named “languages” that consists of some duplicate elements. The task is to remove those duplicate elements using JavaScript Set:

1
2
3
4
var languages = ["Java", "JavaScript", "Java", "C++", "C", "Java", "C++", "JavaScript", "C++", "Java"];
console.log("Original Array: ", languages);
var uniqueLanguages = [new Set(languages)];
console.log("Filtered Array: ", uniqueLanguages);

In this program, we performed the following functionalities:

  • Created an array that contains duplicate elements.
  • Utilized console.log() method to print original array elements.
  • Created a Set using the new Set() method named “uniqueLanguages”, and passed it an array i.e. “languages”.
  • Consequently, the “uniqueLanguages” Set removed the duplicated languages and returned only unique elements:

In this way, we can utilize the JavaScript Set to remove duplicate elements from an array.

How to remove duplicate array elements using indexOf() method?

It is a predefined function in JavaScript that is used to get first occurrence of an array element. It is a case-sensitive method and it returns -1 if it fails to identify a specific value. In JavaScript, we can use the indexOf() method along with the push() method to remove the duplicate elements from an array.

Example: Remove duplicate elements using indexOf() method

In this example we will utilize the indexOf() method along with the push() method to delete the duplicate elements from the given array:

1
2
3
4
5
6
7
8
9
10
11
12
13
var languages = ["Java", "JavaScript", "Java", "C++", "C", "Java", "C++", "JavaScript", "C++", "Java"];

 function findUniqueElements(languages) {
 var uniqueLanguages = [];
    for(i=0; i< languages.length; i++)
    {
       if(uniqueLanguages.indexOf(languages[i]) === -1) {
       uniqueLanguages.push(languages[i]);
      }
    }
     return uniqueLanguages;
  }  
  console.log("Resultant Array: ", findUniqueElements(languages));

This example program will serve the below-given functionalities:

  • Firstly, we created an array named “languages” that consists of duplicate elements.
  • Next, we created a function named “findUniqueElements” and we passed the “languages” array to the “findUniqueElements” function as an argument.
  • Next, we created an empty array and named it “uniqueLanguages”.
  • Afterward, we utilized the for loop to traverse through the “languages” array.
  • Next, we utilized the indexOf() method within the if-statement.
  • Within if-statement, the indexOf() method will check whether the value present at the current index of the “languages” array is already there in the “uniqueLanguages” array or not. If yes, then the body of the if-statement doesn’t get executed.
  • While if the value present at the current index of the “languages” array doesn’t exist in the “uniqueLanguages” array then the body of the if-Statement will execute in such a case.
  • Within the body of the if-statement, we utilized the push() method to add the unique elements in the “uniqueLanguages” array.
  • Finally, we utilized the console.log() method to print the array of unique elements:

This is how we can get an array of unique elements using the indexOf() and Push() methods.

How to remove duplicate elements using JavaScript filter() method?

The filter() method in JavaScript creates a new array of only those elements that pass a specific test.

Example: Remove duplicate elements using the filter() method

In this program, we will utilize the filter() method along with the indexOf() method to remove the duplicate elements from an array:

1
2
3
4
5
6
var languages = ["Java", "JavaScript", "Java", "C++", "C", "Java", "C++", "JavaScript", "C++", "Java"];

function findUniqueElements(languages) {
   return languages.filter((element, position) => languages.indexOf(element) === position);
}
console.log("Resultant Array: ", findUniqueElements(languages));

The above program will perform the following functionalities:

  • Firstly, created an array of duplicate elements.
  • Next, we created a function named finduniqueElements, and passed it the given array i.e., languages.
  • Within the function, we utilized the filter method along with the indexOf() method to get an array of unique elements.
  • Finally, we utilized the console.log() method to print the filtered array on the console as shown in the below-given array:

This is how we can remove the duplicate elements from an array using the filter method.

Conclusion

In JavaScript, several methods can be used to remove duplicate array elements for example, the instanceOf(), filter(), and new Set(). For example, A Set in JavaScript allows us to store the unique elements of any data type such as primitive, or object references. So, we can use the JavaScript Set() to delete the duplicate array elements. Similarly, the filter() method in JavaScript creates a new array of only those elements that pass a specific test. So, the filter() method can be used to get an array of unique elements.

This article explained different methods to remove duplicate elements from an array using some suitable examples.

Share Button

Source: linuxhint.com

Leave a Reply