Best ways to remove duplicate elements from an array in javascript

Best ways to remove duplicate elements from an array in javascript

Sometimes, Array contains duplicate data, the developer has to write 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 duplicating 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 ]

How to 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 the array element and check if each element is indexed against an array
  • finally returned an array of values without duplicates

here is an example

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

How to delete duplicates using a set with spread expression in ES6?

ES6 release of JavaScript introduced Set type and spread operator Set type stores data of any type. The 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);

How to delete duplicates using 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 in Array() 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);

How to delete duplicates using forEach loop

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

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

How to delete duplicates using 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));