Skip to content
Yesterday is not ours to recover,
but tomorrow is ours to win or lose
Lyndon B. Johnson

Remove duplicates in object arrays

We have an object with multiple arrays inside it, and we need to remove duplicates between these arrays.

const obj = {
arr1: ['a', 'b', 'c'],
arr2: ['a', 'b', 'd', 'e', 'f'],
  • First of all, we have to get the two arrays and merge their items with the Array.prototype.concat() method. As the documentation says, we can use this function on arrays only, not on objects!

  • We use this trick: we call an empty array [] and then we apply the concat() method to it

const allItems = [].concat(obj.arr1, obj.arr2)

that will return

// (8) ["a", "b", "c", "a", "b", "d", "e", "f"]

Remove duplicates from an array #

Method 1: filter() #

Let's filter our array with all items inside, just to be without duplicates.

Array.prototype.filter() method use this condition: "for every item I loop through, I will check if the current index (pos) is the same as the indexOf(item), and it this condition is true I will return the item.".

Array.prototype.indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present, so the filter condition is satisfied only for the first time the item pass the loop because loop index and indexOf are the same.

To be more clear let's make a table of the loop:

Item Loop index indexOf* Condition Saved into unique array
'a' 0 0 ok, 0 == 0 so this will return true yes
'b' 1 1 ok, 1 == 1 so this will return true yes
'c' 2 2 ok, 2 == 2 so this will return true yes
'a' 3 0 whoa, 3 != 0 so this will return false nope!
'b' 4 1 whoa, 4 != 1 so this will return false nope!
'd' 5 5 ok, 5 == 5 so this will return true yes
'e' 6 6 ok, 6 == 6 so this will return true yes
'f' 7 7 ok, 7 == 7 so this will return true yes

*indexOf = first position the item is present

const unique = allItems.filter((item, pos) => allItems.indexOf(item) === pos)
// (6) ["a", "b", "c", "d", "e", "f"]

Method 2: Set() #

Set() is an object lets you store unique values of any type.

  • create a new Set() to return the unique values
  • spread ... its items inside the Set object
  • wrap all in square brackets to return an array [object]
const unique = [ Set(allItems)]

or we can use this syntax (I prefer this one! It seems more clear to me that we are manipulating something that will become an array using the Array.from() method)

  • create a new Set() to return the unique values
  • convert the Set object to an array using Array.from()
const unique = Array.from(new Set(allItems))

and the result is exactly the same as above using filter().

// (6) ["a", "b", "c", "d", "e", "f"]

To sum up #

/* ==========================================================================
========================================================================== */

const obj = {
arr1: ['a', 'b', 'c' ],
arr2: ['a','b', 'd', 'e', 'f' ],

const allItems = [].concat(obj.arr1, obj.arr2)

// using filter()
const unique_filter = allItems.filter((item, pos) => allItems.indexOf(item) === pos)

// using Set()
const unique_set1 = [ Set(allItems)]
const unique_set2 = Array.from(new Set(allItems))

console.log(allItems) // (8) ["a", "b", "c", "a", "b", "d", "e", "f"]

console.log(unique_filter) // (6) ["a", "b", "c", "d", "e", "f"]
console.log(unique_set1) // (6) ["a", "b", "c", "d", "e", "f"]
console.log(unique_set2) // (6) ["a", "b", "c", "d", "e", "f"]

📚 More info

How to Remove Array Duplicates in ES6

View on GitHub

Comment on or Hashnode

Take me to the next post!