JavaScript Array Group

By  on  

Managing, sorting, and manipulating data with JavaScript is a skill we've often delegated to third party libraries like lodash. As the JavaScript language progresses, however, these features eventually get. added to the JavaScript specification. Two such APIs for grouping of Array data are `Array.prototype.group and Array.prototype.groupToMap.

Array.prototype.group

To group an array of objects by a given property, call the group method with function that returns the grouping string:

const teams = [
  { name: "Arsenal", origin: "London", tier: "legendary" },
  { name: "Manchester United", origin: "Manchester", tier: "legendary" },
  { name: "Liverpool", origin: "Liverpool", tier: "legendary" },
  { name: "Newcastle United", origin: "Newcastle", tier: "mid" },
  // Lol, awful club
  { name: "Tottenham", origin: "London", tier: "lol" },
];

const tieredTeams = teams.group(({ tier }) => tier);

The result of the array's group is an object with keys that match the grouping key:

{
  legendary: [
    {name: "Arsenal", origin: "London", tier: "legendary"},
    {name: "Manchester United", origin: "Manchester", tier: "legendary"},
    {name: "Liverpool", origin: "Liverpool", tier: "legendary"}
  ], 
  mid: [
    {name: "Newcastle United", origin: "Newcastle", tier: "mid"}
  ], 
  lol: [
    {name: "Tottenham", origin: "London", tier: "lol"}
  ]
}

Array.prototype.groupToMap

groupToMap returns a Map instance instead of an object literal:

const tieredTeamsMap = teams.group(({ tier }) => tier);

tieredTeamsMap.has('lol') // true

tieredTeamsMap.get('lol') // [{name: "Tottenham", origin: "London", tier: "lol"}]

As of the time of publish, group and groupToMap are only available in Safari. These two methods are crucial to data management moving forward. Whether you're manipulating data on client or server side, these newly added native methods are much welcomed.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

Discussion

  1. The groupToMap() example might have an error – it’s still calling group()

    I didn’t know about these functions though, very useful!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!