Remove Duplicate Elements from JavaScript Array
JavaScript arrays are the data structures that can store multiple values. However, there may be many cases where an array contains duplicate elements. This guide will walk you through various methods to remove these duplicates and create an array with unique elements.
Note: Learn More about JavaScript Arrays
Methods to Remove Duplicate Elements from JavaScript Array
Table of Content
- Using Javascript filter() Method
- Using Javascript set() Method
- Using Javascript forEach() Method
- Using Javascript reduce() Method
- Using Javascript indexOf() Method
- Using third-party Library
Using JavaScript filter() Method
The filter() method creates a new array of elements that matches the passed condition through the callback function. It will include only those elements for which true is returned.
Example: The below code uses the filter() method to remove duplicate of an element in JavaScript array.
let arr = ["apple", "mango", "apple",
"orange", "mango", "mango"];
function removeDuplicates(arr) {
return arr.filter((item,
index) => arr.indexOf(item) === index);
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using JavaScript set() Method
This method sets a new object type with ES6 (ES2015) that allows you to create collections of unique values.
Example: This example uses the JavaScript set() method to remove duplicates from an array.
let arr = ["apple", "mango", "apple",
"orange", "mango", "mango"];
function removeDuplicates(arr) {
return [...new Set(arr)];
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using JavaScript forEach() Method
By using the forEach() method, we can iterate over the elements in the array, and we will push into the new array if it doesn’t exist in the array.
Example: The forEach() method is used to remove the elements from the JavaScript array in the below code.
let arr = ["apple", "mango",
"apple", "orange", "mango", "mango"];
function removeDuplicates(arr) {
let unique = [];
arr.forEach(element => {
if (!unique.includes(element)) {
unique.push(element);
}
});
return unique;
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using JavaScript reduce() Method
The reduce() method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.
Example: The reduce() method is used to remove duplicates from an array in JavaScript.
let arr = ["apple", "mango",
"apple", "orange", "mango", "mango"];
function removeDuplicates(arr) {
let unique = arr.reduce(function (acc, curr) {
if (!acc.includes(curr))
acc.push(curr);
return acc;
}, []);
return unique;
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using JavaScript indexOf() Method
The indexOf() method is used to find the first index of occurrence of an array element. we can iterate over the elements in the array, and we will push into the new array if it doesn’t exist in the resultant array.
Example: The below code example uses the indexOf() method method to remove duplicates from an array.
let arr = ["apple", "mango",
"apple", "orange", "mango", "mango"];
function removeDuplicates(arr) {
let unique = [];
for (i = 0; i < arr.length; i++) {
if (unique.indexOf(arr[i]) === -1) {
unique.push(arr[i]);
}
}
return unique;
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using third-party Library
We can also use a third-party library such as Lodash or Underscore.js to remove duplicate elements from a Javascript array. The _.uniq() function returns the array which does not contain duplicate elements.
Example: The _.uniq() function of the underscore.js library is used in the below code to remove elements from an array.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>
</head>
<body>
<script type="text/javascript">
console.log(_.uniq([1, 2, 3, 4, 5, 4, 3, 2, 1]));
</script>
</body>
</html>
Output:
Using JavaScript Map
The Map object holds key-value pairs and remembers the original insertion order of the keys. We can leverage this property to remove duplicate elements from an array.
Example:
let arr = ["apple", "mango", "apple", "orange", "mango", "mango"];
function removeDuplicates(arr) {
let map = new Map();
arr.forEach(item => {
map.set(item, true);
});
return Array.from(map.keys());
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Using JavaScript every() Method
The every() method tests whether all elements in the array pass the test implemented by the provided function. We can use this to remove duplicates by maintaining a temporary array and adding elements only if they are not already present.
Example: In this example The removeDuplicates function iterates through the array, pushing unique elements into a new array. It returns an array containing only unique elements.
let arr = ["apple", "mango", "apple", "orange", "mango", "mango"];
function removeDuplicates(arr) {
let unique = [];
arr.every(element => {
if (!unique.includes(element)) {
unique.push(element);
}
return true;
});
return unique;
}
console.log(removeDuplicates(arr));
Output
[ 'apple', 'mango', 'orange' ]
Contact Us