How to remove duplicates from Arrays in Javascript

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.

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.

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.

 

Marianne elanotta

As a graduate in communication technologies, Marianne likes to share the latest technological advances in various fields. She likes to program in Java OO and Javascript and prefers to work on Open source operating systems. She likes to play chess and computer games in her spare time along with her 2 kids.

Leave a Reply