Javascript remove duplicate elements from Array

Introduction

This article is going to talk about how to remove duplicate elements from array in JavaScript.

Use `filter()`

The filter() method in Array filter array to elements by condition.

const arr = ['a', 'b', 'c', 'c']
console.log(arr) // ["a", "b", "c", "c"]
const uniqueArr = arr.filter((el, index) => arr.indexOf(el) === index)
console.log(uniqueArr) // ["a", "b", "c"]

Pass the element if element is not matched with index. The filter() method returns new copied array, so it doesn't change the original array.

Remove elements by property

Its good idea if you want to remove duplicated element by property in Object

const arr = [{ name: 'John', age: 20 }, { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }]
console.log(arr) // { name: 'John', age: 20 }, { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }
const uniqueArr = arr.filter((el, index) => arr.findIndex(el2 => el2.age === el.age) === index)
console.log(uniqueArr) // { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }

In this case, you have to use findIndex() method instead of indexOf() method.

Use `Set()`

The Set() object only can be stored unique values of any type including primitive values and object.

const arr = ['a', 'b', 'c', 'c']
console.log(arr) // ["a", "b", "c", "c"]
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr) // ["a", "b", "c"]

Although I mentioned that the Set() object can store object, it doesn't filter duplicated object which has different references (memory address).

const uniqueArr = new Set()
uniqueArr.add({ name: 'John', age: 20 })
uniqueArr.add({ name: 'John', age: 20 })
uniqueArr.add({ name: 'Arthur', age: 42 })
console.log(Array.from(uniqueArr))

=> Not working!

Hashmap

The Map() object holds key-value pairs and remembers the original insertion order of the keys.

const arr = ['a', 'b', 'c', 'c']
console.log(arr) // ["a", "b", "c", "c"]
const hashMap = new Map()
arr.map(el => {
  if (hashMap.get(el.age)) return
  hashMap.set(el.age, el)
})
console.log(Array.from(hashMap.keys())) // ["a", "b", "c"]

If hashMap already has element as key, continue to next element.

Property by Object

const arr = [{ name: 'John', age: 20 }, { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }]
console.log(arr) // // { name: 'John', age: 20 }, { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }
const hashMap = new Map()
arr.map(el => {
  if (hashMap.get(el.age)) return
  hashMap.set(el.age, el)
})
console.log(Array.from(hashMap.values())) // { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }

We put boolean type as a value in primitive value. On the other hand, you need to add object as a value and then make values to array

Property by Object 2

There is one more way using hashmap

const arr = [{ name: 'John', age: 20 }, { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }]
const uniqueArr = [...new Map(arr.map((m) => [m.age, m])).values()];
console.log(uniqueArr);// { name: 'John', age: 20 }, { name: 'Arthur', age: 42 }

If you would like to remove elements by "name", replace m.age to m.name