Skip to content

How to get the unique properties of a set of objects in a JavaScript array

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

Given an array of objects, here's what you can do if you want to get the values of a property, but not duplicated.

Suppose you have a bills array with this content:

const bills = [
  { date: '2018-01-20', amount: '220', category: 'Electricity' },
  { date: '2018-01-20', amount: '20', category: 'Gas' },
  { date: '2018-02-20', amount: '120', category: 'Electricity' }
]

and you want to extract the unique values of the category attribute of each item in the array.

Hereโ€™s what you can do:

const categories = [...new Set(bills.map(bill => bill.category))]

Explanation

Set is a new data structure that JavaScript got in ES6. Itโ€™s a collection of unique values. We put into that the list of property values we get from using map(), which how we used it will return this array:

['Electricity', 'Gas', 'Electricity']

Passing through Set, weโ€™ll remove the duplicates.

... is the spread operator, which will expand the set values into an array.

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)