In this short tutorial, we will outline 4 methods that help remove duplicate elements from an array in Javascript.
Using Array.filter
One of the most direct ways to remove elements from an array is to use:
Array.filter
Array.filter returns a new array with the elements that meet the condition implemented by the function used as an argument.
The method filter iterates over the elements of the array and applies the argument function to each item, returning a boolean value. If the element passes the condition, it returns true indicating that it will be added to the new array.
Read: How to delete values from an array in Javascript
To remove duplicate elements, we use the function Array.indexOf which returns the first index of the array where a given element is found.
let data = [11,3,4,7,3,11,45,7];
let result = data.filter((item,index)=>{ // filter javascript array
return data.indexOf(item) === index;})
console.log(result); //[11,3,4,7,45]
In this case, we can identify a duplicate when the index is not equal to the result of indexOf.
data.indexOf(item) === index, will always return the first occurrence of the item.
Or otherwise, if you do not want to use filter, you can proceed as follows:
var data = [11,3,4,7,3,11,45,7];
for(var i = data.length -1; i >=0; i–){
if(data.indexOf(data[i]) !== i) data.splice(i,1);}
console.info(data) ;//[11,3,4,7,45]
This method should not be used when dealing with large arrays.
Read: How to remove a property from a Javascript Object
Using Set
Using Set, all duplicate values will therefore be trimmed out naturally.
let data = [11,3,4,7,3,11,45,7];
let result = […new Set(data)];
console.log(result); //[11,3,4,7,45]
This method can be used when dealing with large arrays which contain few duplicates.
Read: JavaScript’s Reduce Method Explained By Going On a Diet
Using Reduce
The method Array.reduce can also be used for the same purpose. It executes a function on each element of the array and returns a value as a single result.
let data = [11,3,4,7,3,11,45,7];
const result = data.reduce((acc,item)=>{
if(!acc.includes(item)){
acc.push(item);}
return acc;},[])
console.log(result); //[11,3,4,7,45] remove duplicates from array
In this case, the function used simply checks if the current item is within the result identified by the variable acc, if not, it simply adds the value to the accumulator.
Read: How to convert a JSON object to String in Javascript
Using ForEach
Here we are iterating over the array to remove the duplicates. A conditional block is used to check the existence of the item and Array.includes determines whether or not an element exists within the array.
let data = [11,3,4,7,3,11,45,7];
var uniqueArr = [];
data.forEach((item)=>{ //pushes only unique element
if(!uniqueArr.includes(item)){
uniqueArr.push(item);}})
console.log(uniqueArr); //[11,3,4,7,45] unique javascript Array
If you like the content, we would appreciate your support by buying us a coffee. Thank you so much for your visit and support.
