Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find duplicates in an array using set() and filter() methods in JavaScript?
Finding duplicates in JavaScript arrays is a common task that can be accomplished using modern JavaScript methods. The Set() constructor and filter() method provide elegant solutions for removing duplicates without complex logic.
Using Set() Method
The Set() constructor automatically stores only unique values, making duplicate removal straightforward. When combined with the spread operator, it creates a new array with duplicates removed.
Syntax
let uniqueArray = [...new Set(originalArray)];
Example
<html>
<body>
<div id="output"></div>
<script>
var dupNames = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
var uniArr = [...new Set(dupNames)];
document.getElementById('output').innerHTML =
"Before removing: " + dupNames + "<br>" +
"After using Set() method: " + uniArr;
</script>
</body>
</html>
Output
Before removing: John,Ram,Rahim,Remo,Ram,Rahim After using Set() method: John,Ram,Rahim,Remo
Using filter() Method
The filter() method removes duplicates by checking if the current element's first occurrence index matches its current index. This approach preserves only the first occurrence of each element.
Example
<html>
<body>
<div id="filterOutput"></div>
<script>
var dupNames = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
var removeDuplicates = (arr) => arr.filter((v, i) => arr.indexOf(v) === i);
var uniqueNames = removeDuplicates(dupNames);
document.getElementById('filterOutput').innerHTML =
"Before removing: " + dupNames + "<br>" +
"After filter() method: " + uniqueNames;
</script>
</body>
</html>
Output
Before removing: John,Ram,Rahim,Remo,Ram,Rahim After filter() method: John,Ram,Rahim,Remo
How filter() Works
The filter method uses indexOf() to find the first occurrence of each element. If the current index matches the first occurrence index, the element is kept; otherwise, it's filtered out.
<html>
<body>
<div id="explanation"></div>
<script>
var arr = ['a', 'b', 'a', 'c', 'b'];
var result = arr.filter((item, index) => {
var firstIndex = arr.indexOf(item);
var keep = firstIndex === index;
return keep;
});
document.getElementById('explanation').innerHTML =
"Original: " + arr + "<br>" +
"Unique: " + result;
</script>
</body>
</html>
Output
Original: a,b,a,c,b Unique: a,b,c
Performance Comparison
| Method | Performance | Readability | Best For |
|---|---|---|---|
Set() |
Faster | High | Simple duplicate removal |
filter() |
Slower for large arrays | Medium | When you need more control over filtering |
Conclusion
Both Set() and filter() methods effectively remove duplicates from arrays. The Set() approach is more concise and performant, while filter() offers more flexibility for complex filtering logic.
1K+ Views
