DEV Community

KenjiGoh
KenjiGoh

Posted on

Filter unique array members (remove duplicates)

#set #javascript

METHOD 1 - Using filter:

indexOf will return the first index (position) that a specific value first appear in the array. By checking indexOf(item)=== index, we can get the unique values.

let array = ["🐑", "😁", "🐑", "🐑", "😁", "😁"];
const filterArr = array.filter((item, index) => array.indexOf(item) === index);
console.log(filterArr); //[ '🐑', '😁' ]
Enter fullscreen mode Exit fullscreen mode

Instead of checking for duplicates using array.filter() method, we can make use of the Set Data Structure that by definition only allows unique values.

METHOD 2 - Using Set: 

const unique = (arr) => {
  const nameSet = new Set();
  for (let i = 0; i < arr.length; i++) {
    nameSet.add(arr[i]); //add element to Set
  }
  Array.from(nameSet)
};
console.log(unique(values)); //[ '🐑', '😁' ]
Enter fullscreen mode Exit fullscreen mode

Shorter Method 

const unique = (arr) => {
   return Array.from(new Set(arr));
}
Enter fullscreen mode Exit fullscreen mode

Set with Array Destructuring 

const unique = (arr) => {
   return [...new Set(arr];
}
Enter fullscreen mode Exit fullscreen mode

METHOD 3 - Using Reduce: 

const uniqueVal = array.reduce((unique, item) =>
  unique.includes(item) ? unique : [...unique, item]
);

console.log(uniqueVal); //[ '🐑', '😁' ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

plsankar profile image

Clip-Path Circle Reveal Animation With Mouse Movement

Lakshmi Sankar -

ujjwal_kr_gupta profile image

Express 5 is here, what’s new?

UJJWAL GUPTA -

velan profile image

EchoAPI vs Bruno: A Comprehensive Comparison from Design to Testing 💡

Velan<> -

vladyusha profile image

What’s New in React 19? A Quick Guide with Code Examples

Vladyusha -