DEV Community

Dom Habersack
Dom Habersack

Posted on • Originally published at domhabersack.com

3 1

Plucking properties from object arrays in JavaScript

One of the more common tasks when mapping over arrays in JavaScript is extracting properties from objects. Instead of using individual arrow functions, we can create a reusable helper function that does the plucking for us.

const countries = [
  { name: 'France', capital: 'Paris'  },
  { name: 'Spain',  capital: 'Madrid' },
  { name: 'Italy',  capital: 'Rome'   }
]

// we can extract the attributes with individual arrow functions
countries.map(country => country.name)     // ⇒ ['France', 'Spain', 'Italy']
countries.map(country => country.capital)  // ⇒ ['Paris', 'Madrid', 'Rome']

// this function allows us to write that arrow function shorter
const pluck = property => element => element[property]

countries.map(pluck('name'))     // ⇒ ['France', 'Spain', 'Italy']
countries.map(pluck('capital'))  // ⇒ ['Paris', 'Madrid', 'Rome']
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
heyrohit profile image
Rohit Gupta • Edited

How about this,

const getKey = (array,key) => array.map(a => a[key]);

const countries = [
  { name: 'France', capital: 'Paris'  },
  { name: 'Spain',  capital: 'Madrid' },
  { name: 'Italy',  capital: 'Rome'   }
]

getKey(countries,'name') // even shorter
Enter fullscreen mode Exit fullscreen mode
Collapse
 
domhabersack profile image
Dom Habersack

Very nice. I usually use the other one because that way it’s easier to chain with other array methods: .filter() an array, .map() some values out of its elements, .sort() the result, maybe run a .reduce() over it, all in the same chain.

If that’s not the scenario, I like your solution better.

Collapse
 
iamaamir profile image
mak

The magic of partial application

Collapse
 
wni5378 profile image
William N. Irwin

Thank you @domhabersack

This is exactly what I was looking for and I was able to make quick work of large datasets without any use of loops.

Thanks :)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay