Javascript Remove Duplicates from Array

Using Javascript Set() Method

Another efficient method to remove duplicates from an array in Javascript is by using the Set object. A Set is a collection of values where each value must be unique.

Here’s how you can use a Set to remove duplicates from an array:

• JavaScript

JavaScript

let numbers = [1, 2, 2, 3, 4, 4, 5];

let uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[1, 2, 3, 4, 5]

In this code:

• We create a new Set by passing our array numbers to it. The Set object automatically removes any duplicate values.
   
• We then convert the Set back into an array using the spread operator ..., which extracts elements from the Set.
   
• The result is uniqueNumbers, an array without any duplicates.
   

Note -: This method is particularly useful for larger arrays or when performance is a concern, as it is generally faster than using filter() and indexOf(). It’s also very concise and easy to implement.

Using Javascript forEach() Method

The forEach() method in Javascript provides another approach to remove duplicates from an array. This method allows us to execute a function on each item in an array. To remove duplicates, we can combine forEach() with a helper object to track seen values.

Here's an example of this:

• JavaScript

JavaScript

let numbers = [1, 2, 2, 3, 4, 4, 5];

let seen = {};

let uniqueNumbers = [];

numbers.forEach(item => {

    if (!seen[item]) {

        seen[item] = true;

        uniqueNumbers.push(item);

    }

});

console.log(uniqueNumbers);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[1, 2, 3, 4, 5]

In this code:

• We start with an empty object seen that will store each unique number as a property.
   
• We also prepare an empty array uniqueNumbers to store our results.
   
• As we loop through numbers using forEach(), we check if an item has already been added to seen.
   
• If it hasn’t, we add it to seen and also push it to uniqueNumbers.
   
• By the end of the loop, uniqueNumbers contains all unique values from the original array.
   

Note -: This method is useful for its readability and the control it offers over the process, which can be important in more complex scenarios.

Using Javascript reduce() Method

The reduce() method in Javascript is another powerful tool that can be used to remove duplicates from an array. This method reduces the array to a single value, but it can be cleverly used to build up a new array consisting only of unique items.

Example : 

• JavaScript

JavaScript

let numbers = [1, 2, 2, 3, 4, 4, 5];

let uniqueNumbers = numbers.reduce((unique, item) => {

    return unique.includes(item) ? unique : [...unique, item];

}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[1, 2, 3, 4, 5]

Explanation:

• We start the reduce() method with an empty array as the initial value.
   
• For each element in the numbers array, we check if it is already included in the unique array.
   
• If the item is not included, we add it to unique using the spread operator ... to ensure we're not modifying the existing array but rather creating a new one with the added item.
   
• The final result is stored in uniqueNumbers, which contains only unique values.
   

Note -: This method is particularly effective for handling larger datasets as it processes items in a single pass through the array, minimizing overhead. Additionally, the use of reduce() can make your code look more professional and less cluttered.

Using Javascript indexOf() Method

The indexOf() method in Javascript is straightforward for identifying the first occurrence of a specific element in an array. This characteristic makes it suitable for removing duplicates from an array when used in combination with the filter() method.

Example : 

• JavaScript

JavaScript

let numbers = [1, 2, 2, 3, 4, 4, 5];

let uniqueNumbers = numbers.filter((item, index) => {

    return numbers.indexOf(item) === index;

});

console.log(uniqueNumbers);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[1, 2, 3, 4, 5]

Explanation:

• indexOf() returns the first index at which a given element can be found in the array.
   
• We use filter() to create a new array, adding elements only if their index matches the index returned by indexOf().
   
• This ensures that each element added to uniqueNumbers is the first of its kind in the original array, effectively removing duplicates.
   

Note -: This method is very intuitive and easy for beginners to understand. It’s best used on smaller arrays where performance is less of a concern, as indexOf() can be slower with larger data sets due to its need to search through the array.

Using Third-Party Libraries

In addition to native Javascript methods, several third-party libraries offer straightforward solutions to remove duplicates from an array. One popular library is Lodash, which provides a variety of utility functions that make coding easier and cleaner.

Here’s how you can use Lodash to remove duplicates:

• JavaScript

JavaScript

const _ = require('lodash');

let numbers = [1, 2, 2, 3, 4, 4, 5];

let uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

[1, 2, 3, 4, 5]

Explanation:

• First, we include the Lodash library using require('lodash').
   
• We use the _.uniq() function from Lodash, which automatically filters out duplicate values from the array.
   
• The result is stored in uniqueNumbers, which now contains only unique elements.
   

Note -: Using a third-party library like Lodash can save time and effort, especially in more complex projects where you might need additional utility functions. Lodash optimizes several operations internally, which can also enhance performance for operations involving large datasets.

This approach is best for those who want to maintain readable and maintainable code and might be working in environments where adding external dependencies is acceptable.

Frequently Asked Questions

What is the fastest method to remove duplicates in Javascript?

The Set method is typically the fastest way to remove duplicates from an array in Javascript, especially for larger data sets due to its inherent properties that automatically ensure uniqueness.

Can I use these methods on arrays containing types other than numbers?

Yes, these methods work on arrays containing any type of data, including strings, numbers, and even objects. You may need to modify the comparison logic slightly for complex data types like objects.

Are there any limitations to using third-party libraries for removing duplicates?

While third-party libraries like Lodash simplify development with convenient functions, they add an external dependency to your project, which might be unnecessary for smaller projects or could affect load times for web applications.

Conclusion

In this article, we have learned various methods to remove duplicates from arrays in Javascript. From using simple loops with methods like filter() and indexOf(), to modern Javascript features like Set, and even employing third-party libraries like Lodash. Each approach has its own benefits depending on the context and situation we want to use them in. 

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.