{

Best ways to remove duplicate elements from array in javascript


Sometimes, Array contains duplicate data, the developer has to write a code to remove duplicates and return an array with unique elements.
There are many ways we can remove duplicates from an array.

In this blog post, You will learn 5 ways of duplicate items of the array in javascript/Typescript.

  • using array filter and indexOf method
  • ES6 using set with spread expression
  • Jquery each and inArray method
  • forEach loop implementation
  • UnderscoreJS and lodash with uniq method

Given an array of numbers.

let array=[4,12,3,4,1,3]  
output is [ 4, 12, 3, 1 ]  

Delete duplicates using array filter and indexOf method example

  • Array filter provides filters the original array and returns an array of elements
  • elements in an array are iterated using the filter method
  • filter() has a callback that accepts element and index position in an array
  • callback is called for each element
  • consider array element and check if each element is index against an array
  • finally returned array of values without duplicates

here is an example

let uniqueArray = arrayNumbers.filter(function(element, index) {  
    return arrayNumbers.indexOf(index) == index;  
})  
console.log(uniqueArray);  

Remove duplicates using set with spread expression in ES6?

ES6 release of JavaScript introduced Set type and spread operator Set type stores data of any type. Set does not allow duplicate elements.

Please see here .
Spread operator […expression] allows the array to expand the array of elements. Please see more about spread operator.

var uniqueArray = [ ...new Set(arrayNumbers) ];  
console.log(uniqueArray)  

Jquery each and in Array method

  • JQuery library has each and inArray method
  • Created empty uniqueArray to hold the unique elements
  • iterated the array using each function and accepts an array as the first argument, the second argument is a callback
  • Callback is called for each element
  • Check each element present in uniqueArray using inArray() function
  • if not present in uniqueArray, add the element
var uniqueArray = [];  
$.each(arrayNumbers, function(index, item){  
    if($.inArray(item, uniqueArray) === -1) uniqueArray.push(item);  
});  
console.log(uniqueArray);  

Using forEach loop.

forEach in javascript provides iteration + callback for each element filter duplicates using indexOf method push unique elements to the new array.

var uniqueArray = [];  
arrayNumbers.forEach(function(element) {  
     if(uniqueArray.indexOf(element) < 0) {  
         uniqueArray.push(element);  
     }  
});  
console.log(uniqueArray);  

UnderscoreJS and lodash with uniq method

With third-party libraries, It is very easy and simple, UnderscoreJS and Lodash provide the uniq method. uniq function accepts three arguments -

_.uniq(originalArray, [isAlreadySorted], [iterator]  

OriginalArray - input array to remove duplicates.
isAlreadySorted - true - for already sorted array, which improves performances.
Iterator - custom logic for each element applied during iteration

console.log(_.uniq(arrayNumbers, false));  

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.