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

Incredible Demos

  • By
    Create Twitter-Style Buttons with the Dojo Toolkit

    I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static...

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

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!