Remove Duplicates from Array JavaScript
by Vincy. Last modified on August 24th, 2022.
In JavaScript, there are many options to removing duplicates. We shall see them one by one with examples below.
This example provides all those options from easy to complex solutions to achieve this. You can save this into your application’s common client-side assets to use in your projects.
1) Remove duplicates using JavaScript Set
This quick example uses the JavaScript Set class. This class constructs a unique elements array.
If you pass an input array with duplicate elements, the Set removes the duplicate and returns an array of unique elements.
Quick example
// best and simple solution
// when creating a JavaScript Set, it implicitly removes duplicates
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
let uniqueElements = [...new Set(arrayElements)];
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
Output
[ 'a', 'b', 'c', 'd' ]
2) Fastest method to remove duplicates from an array
This is the fastest method to remove duplicates from an array.
The removeDuplicates() custom function runs a loop on the input array.
It defines an array seen[] to mark that the element is found already.
It checks if it is already set in the seen[] array during the iteration. If not, it will be added to the resultant unique array.
<html>
<body>
<h1>Remove Duplicates from Array JavaScript - fastest method</h1>
<script>
function removeDuplicates(arrayElements) {
var seen = {};
var resultArray = [];
var length = arrayElements.length;
var j = 0;
for (var i = 0; i < length; i++) {
var element = arrayElements[i];
if (seen[element] !== 1) {
seen[element] = 1;
resultArray[j++] = element;
}
}
return resultArray;
}
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
uniqueElements = removeDuplicates(arrayElements);
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>3) Remove duplicates from an array using filter()
The JavaScript filter is used with an arrow function to narrow down the array output. It filters the array of elements based on their uniqueness.
The filter condition uses JavaScript indexOf() method to compare. The indexOf() always returns the first index of the element. It is regardless of its multiple occurrences in an array.
This filter condition compares the first index with the current index of the original array. If the condition is matched then the arrow function returns the element to the output array. Refer this for filtering an array in PHP of elements to get rid of duplicates.
<html>
<body>
<h1>Remove Duplicates from Array JavaScript using filter()</h1>
<script>
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
let uniqueElements = arrayElements.filter((element, index) => {
return arrayElements.indexOf(element) === index;
});
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>
4) Remove Duplicates from Array using JavaScript Hashtables
In this method, the JavaScript hashtable mapping is created based on the data type of the input array element. It defines a JavaScript primitive data type object mapping array.
It applies the filter to do the following steps.
- It gets the array element’s data type.
- If the element is the type one among the primitive array defined, then it applies the filter condition.
- Condition checks if the hashtable has an entry as same as the current element’s property. If a match is found, then it returns the current element.
- If the array element is not a primitive data type, then the filter will be based on the JavaScript objects’ linear search.
<html>
<body>
<h1>Remove Duplicates from Array JavaScript using Hashtables</h1>
<script>
// uses hash lookups for JavaScrip primitives and linear search for objects
function removeDuplicates(arrayElements) {
var primitives = {
"boolean": {},
"number": {},
"string": {}
}, objects = [];
return arrayElements
.filter(function(element) {
var type = typeof element;
if (type in primitives)
return primitives[type]
.hasOwnProperty(element) ? false
: (primitives[type][element] = true);
else
return objects.indexOf(element) >= 0 ? false
: objects.push(element);
});
}
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
uniqueElements = removeDuplicates(arrayElements);
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>
5) Remove Duplicates from Array using includes() and push()
This method uses JavaScript forEach() to iterate the input array. It defines an empty array to store the unique elements uniqueElements[].
In each iteration, it checks if the uniqueElements[] array already has the element. It uses JavaScript includes() to do this check.
Once the includes() function returns false, then it will push the current element in to the uniqueElements[].
<html>
<body>
<h1>Remove Duplicates from Array JavaScript using includes()
and push()</h1>
<script>
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
let uniqueElements = [];
arrayElements.forEach((element) => {
if (!uniqueElements.includes(element)) {
uniqueElements.push(element);
}
});
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>
6) Remove Duplicates from Array using reduce()
Like the JavaScript filter() function, the reduce() function also applies conditions to narrow down the input array.
This function has the current element and the previous result returned by the callback of the reduce().
Each callback action pushes the unique element into an array. This array is used in the next callback to apply includes() and push() to remove the duplicates.
<html>
<body>
<h1>Remove Duplicates from Array JavaScript using reduce()</h1>
<script>
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
let uniqueElements = arrayElements.reduce(function(pass,
current) {
if (!pass.includes(current))
pass.push(current);
return pass;
}, []);
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>
7) Remove Duplicates from Array using JavaScript Sort
It sorts the input array and removes the duplicates by successive elements comparison.
After sorting, the filter functions condition checks if the current and the previous element are not the same. Then, filters the unique array out of duplicates.
<html>
<body>
<h1>Remove Duplicates from Array JavaScript using Sort</h1>
<script>
// sort the JavaScript array, and then
// remove each element that's equal to the preceding one
function removeDuplicates(arrayElements) {
return arrayElements.sort().filter(
function(element, index, ary) {
return !index || element != ary[index - 1];
});
}
const arrayElements = ['a', 'b', 'c', 'a', 'b', 'd'];
console.log(arrayElements);
uniqueElements = removeDuplicates(arrayElements);
// result array after remove is [ 'a', 'b', 'c', 'd' ]
console.log(uniqueElements);
</script>
</body>
</html>
Output:
Array(6)
0: "a"
1: "b"
2: "c"
3: "a"
4: "b"
5: "d"
length: 6
Array(4)
0: "a"
1: "b"
2: "c"
3: "d"
length: 4
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Comments to “Remove Duplicates from Array JavaScript”
Leave a Reply
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.
Hi Vincy, This question might be sounds silly but just curious to know, Is it possible to remove the duplicates from the below one,
const arrayElement = [‘Naveen’, ‘naveen’, ‘naveeN’,’NaveeN’,’NAveen’];
Came across situation on my project.
Hi Naveen,
JavaScript comparator is case sensitive. So it will consider “Naveen” and “naveen” as two different strings.
If you are asking for case in-sensitive duplicate removal, than just before the duplicate removal steps, change them to all lower case. Like, data.toLowerCase(), then to do the comparison and removal.