DEV Community

Giulia Chiola
Giulia Chiola

Posted on • Updated on • Originally published at giuliachiola.dev

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' ],
}
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode

that will return

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

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)
Enter fullscreen mode Exit fullscreen mode
console.log(unique) // (6) ["a", "b", "c", "d", "e", "f"]
Enter fullscreen mode Exit fullscreen mode

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 = [...new Set(allItems)]
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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

console.log(unique) // (6) ["a", "b", "c", "d", "e", "f"]
Enter fullscreen mode Exit fullscreen mode

To sum up

/* ==========================================================================
  OBJECT ARRAYS, REMOVE DUPLICATES
========================================================================== */

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 = [...new 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"]
Enter fullscreen mode Exit fullscreen mode

📚 More info

How to Remove Array Duplicates in ES6

Top comments (0)