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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

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!