Remove Duplicate Elements from JavaScript Array

While working with Arrays in JavaScript, sometimes there is a need to get all unique values or remove duplicate values from them. In this blog, we will explore all the methods to remove duplicate values from an array using JavaScript.

Table of Contents:

• Different Ways to Get All Unique Values in a JavaScript Array
  • Method 1: Using Set() to Remove Duplicates
  • Method 2: Using filter() to Remove Duplicates
  • Method 3: Using reduce() to Remove Duplicates
  • Method 4: Using map() to Remove Duplicates
  • Method 5: Using a for() Loop to Remove Duplicates
• Performance Comparison Table
• Conclusion

Different Ways to Remove Duplicate Elements From JavaScript Array

JavaScript provides several methods to remove duplicate elements from an array. Here are some of them:

Method 1: Using Set() to Remove Duplicates

The Set object in JavaScript only allows unique values, it doesn’t allow duplicate values to be stored. Converting an Array to Set automatically removes duplicates.

Example:

Output:

Explanation: This example uses the Set() method to convert an Array into a Set. The Set() method works well with primitive data types like numbers or strings.

Method 2: Using filter() to Remove Duplicates

The filter() method is used to create a new array of those elements that passed a test condition. So the filter() method can be combined with indexOf() to get unique elements from an array.

Example:

Output:

Explanation:

In this example, multiple methods are used let’s understand each one by one:

• filter() method iterates through each element over an array.
• self.indexOf(value) returns the first position where elements appear.
• index is the current position of a number in the array.
• self.indexOf(value) === index is used to keep the first occurred elements only in an array and remove duplicates.

Method 3: Using reduce() to Remove Duplicates

The reduce() method can also be used to remove duplicates from an array. But, this can build a new array while checking for duplicates.

Example:

Output:

Explanation: reduce() method combined with includes() and push() used to to remove duplicates from an array in JavaScript.

Method 4: Using map() to Remove Duplicates

Map object is a special type of data structure that stores elements in key-value pairs. When we map an array into a map(). each value becomes a key in the Map. Since keys in the map are unique thus duplicate values automatically get removed.

Example:

Output:

Explanation: map() method works well with objects and key-value pairs. This is one of the best ways to track unique values. Here, you use .map() to create key-value pairs like [10,10], [20,20], [20,20], etc. Now the Map stores only unique values, so duplicate values are removed. Finally, you use .values() to get unique values and convert them into the array.

Method 5: Using a for() Loop to Remove Duplicates

Using for() loop also helps you to remove the duplicate values from an array. It can check each value of the original array with each value of the output array if the match is found it doesn’t include that value in the output array.

Example:

Output:

Explanation: In this example, outputCourses.includes(courses[i]) checks for each element of the courses array. If an element is present in the outputCourses already then there is no need to add an element again. But, if an element is not present then, the .push() method adds elements at the last index.

Performance Comparison Table

Here is the comparison between all JavaScript methods that are used to remove duplicate elements from an array:

Conclusion

Removing duplicate elements from an array in JavaScript is easy because of these built-in methods like Set(), filter(), reduce(), and map(). By choosing the right method, you can efficiently get an array with unique values.

Remove Duplicate Elements From JavaScript Array – FAQs