Removing duplicate elements from a JavaScript array can be achieved using various methods like using set object, foreach loop, reduce and filter().
In this tutorial, we will show you some methods on how to remove duplicate elements/items from an array in javascript with and without using built-in methods.
How to Remove Duplicate Elements from an Array in JavaScript
There are many approaches to removing duplicates from an array using javascript array methods. Here are some methods include:
- Using Set
- Using filter()
- Using forEach()
- Using reduce()
1. Using Set
A set is like a group of special items with no duplicate items. If you want to remove duplicate items in an array, just change the array into a set, and then turn the set back into an array.
Here is an example using the Set Object Method:
We have a number array in javascript, and it has duplicate elements in it. You can use the set object to remove duplicate numbers from array in javascript. You can see the below example:
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
var unique = [...new Set(number)];
document.write( "Output :- " + unique );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript remove duplicate numbers from array</title>
</head>
<body>
<script type = "text/javascript">
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
var unique = [...new Set(number)];
document.write( "Output :- " + unique );
</script>
</body>
</html>
Result of the above code is: Output :- 1,2,3,4,5,6
2. Using filter()
The filter() method creates a refreshed array by selecting elements that satisfy a condition. To remove duplicate elements, simply provide a function to filter() that verifies whether an element is already in the new array.
Here is the first example using array filter() and indexof() method to remove duplicates elements or values from array in javascript:
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
var x = (number) => number.filter((v,i) => number.indexOf(v) === i)
document.write( "Output :- " + x(number) );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript remove duplicate elements or values from array using filter() function</title>
</head>
<body>
<script type = "text/javascript">
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
var x = (number) => number.filter((v,i) => number.indexOf(v) === i)
document.write( "Output :- " + x(number) );
</script>
</body>
</html>
Result of the above code is: Output :- 1,2,3,4,5,6
Here is a second example using javascript filter method():
We have an array with duplicate values in javascript. And if you want to remove duplicate elements or values from string array in javascript. So you can use the below example:
var array = ['John','Make','Mac', 'David', 'Smith', 'John', 'Mac', 'Make']
var filterArray = array.filter(function(item, index){
return array.indexOf(item) >= index;
});
document.write( "Output :- " + filterArray );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Remove duplicate elements from string array</title>
</head>
<body>
<script type = "text/javascript">
var array = ['John','Make','Mac', 'David', 'Smith', 'John', 'Mac', 'Make']
var filterArray = array.filter(function(item, index){
return array.indexOf(item) >= index;
});
document.write( "Output :- " + filterArray );
</script>
</body>
</html>
Result of the above code is: Output:- John, Make, Mac, David, Smith
3: Using forEach()
You can remove duplicate elements from an array by looping through it with forEach() and checking if each element is already in a new array using indexOf(). If not, add it to the new array
Here is an example using the forEach() method:
You can see the example of remove duplicates from array javascript using forEach:
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
function removeDuplicateFromArray(number) {
var uniqueVal = {};
number.forEach(function(i) {
if(!uniqueVal[i]) {
uniqueVal[i] = true;
}
});
return Object.keys(uniqueVal);
}
document.write( "Output :- " + removeDuplicateFromArray(number) );
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using foreach method of javascript, to remove duplicate elements or values from array</title>
</head>
<body>
<script type = "text/javascript">
var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
function removeDuplicateFromArray(number) {
var uniqueVal = {};
number.forEach(function(i) {
if(!uniqueVal[i]) {
uniqueVal[i] = true;
}
});
return Object.keys(uniqueVal);
}
document.write( "Output :- " + removeDuplicateFromArray(number) );
</script>
</body>
</html>
Result of the above code is: Output :- 1,2,3,4,5,6
4. Using reduce()
The reduce() method loops through each element in the array, building a new uniqueArray. It checks if the element is already in the accumulator to ensure only unique elements are included.
Here is an example using reduce method:
// Method 4: Using reduce()
const arrayWithDuplicates = [1, 2, 3, 4, 2, 5, 6, 3, 7, 8, 9, 1];
const uniqueArray = arrayWithDuplicates.reduce((accumulator, currentValue) => {
if (!accumulator.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(uniqueArray);
