Top 6 ways to remove duplicate elements from an array(javascript Examples)

Top 6 ways to remove duplicate elements from an array(javascript Examples)

Sometimes, Array contains duplicate data, the developer has to write code to remove duplicates, and it can return an array with unique elements. Multiple ways to remove duplicates from an array in javascript.

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
  • Use reduce and include a method
  • 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 ]

Use filter and indexOf method example

  • Array filter provides filters the original array, and returns an array of elements.
  • First, 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 iterated element.
  • check if the element is present in the array element using indexOf method, return true or false.
  • if present, return it, or else skip to the next iteration.
  • 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);

Notes:

  • filter with callback function is readable for functional programmers.
  • Code lines are easy to read with simple code
  • It is inefficient to iterate in case of a large array due to iteration multiple times.

Using Set and Spread Operator in ES6

ES6 introduced Set type and spread operator. Set type stores data of any type, and 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.

The set constructor takes an array as an argument and returns a new Set object. the passed array is converted back to an array of unique elements using the spread operator[…]

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

Notes:

  • Code lines are easy to read with simple code
  • Set does not preserve the order, so the result array might give a different order than the original array.
  • Duplicate elements are handled efficiently

uUsereduce and include in ES6

Array provides a reduced method in JavaScript. It iterates the array and calls a callback function for each item. The callback function accepts two arguments, accumulator and current accumulator is a temporary array, and current is the current item in the array. the current item is compared with the accumulator to check if it is already present in the accumulator using the includes method. If not present, the current item is pushed to the accumulator

Finally, the accumulator is returned as a result.

const result = array.reduce((accumulator, current) => {
  if (!accumulator.includes(current)) {
    accumulator.push(current);
  }
  return accumulator;
}, []);
console.log(result);// [ 4, 12, 3, 1 ]

Notes:

  • Code lines are Complex to understand for developers with no experience with ES6. to read with simple code
  • It provides a more efficient way to customize the logic
  • Readability is less compared with other approaches.

Use JJQueryeach and in Array method

  • JQuery library has each and inArray method
  • Created an empty unique array 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);

Notes:

  • Code is written in thirdparty library dependent, not methods provided by Native Javascript
  • Loop is inefficient to iterate in case of a large array
  • Hard to understand for developers with no experience in JQuery.

Use forEach loop

forEach in javascript is another way ttoloop elements in an array. It iterates each element, and calls call back for each element. The callback function checks if an element exists in an array using the indexOf method. It pushes unique elements to new arrays.

var uniqueArray = [];
arrayNumbers.forEach(function (element) {
  if (uniqueArray.indexOf(element) < 0) {
    uniqueArray.push(element);
  }
});
console.log(uniqueArray);
  • Code is well understood by users who have functional programming experience
  • Loop is inefficient to iterate in case of a large array
  • Space complex is high, as it creates a new array to store elements

Use UnderscoreJS and lodash with the uniq method

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

The uniq function accepts three arguments -

_.uniq(original array, [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));

Notes:

  • Code is written in thirdparty library dependent, not methods provided by Native Javascript
  • Simple to write and code
  • A learning curve exists for developers with no experience in Libraries.

Conclusion

In this blog post, I have discussed 6 different ways to remove duplicate elements from an array in jJavaScript Set is best interms of readability and space complexity, However, It does not maintain order.

You can choose any one of the ways based on your needs and preferences.