ESNext: Sort arrays using array.groupBy() and array.groupByToMap()

An ECMAScript Proposal that recently made it to Stage-3 is array grouping. The proposal brings us the array.groupBy() and array.groupByToMap() methods to easily group arrays.

~

💁‍♂️ Stage-3?

The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.

~

The Proposal

The proposal offers two methods:

Two methods are offered, groupBy and groupByToMap. The first returns a null-prototype object, which allows ergonomic destructuring and prevents accidental collisions with global Object properties. The second returns a regular Map instance, which allows grouping on complex key types.

With these methods you’ll be able to stop using array.reduce() — a method not everyone likes — to achieve grouping.

~

Examples

Take this array as input:

const array = [1, 2, 3, 4, 5];>

With array.groupBy you can create groups using arbitrary keys. The result is an regular JavaScript object:

array.groupBy((num, index, array) => {
  return num % 2 === 0 ? 'even': 'odd';
});
// =>  { odd: [1, 3, 5], even: [2, 4] }>

The array.groupByToMap method does the same, but it allows you to use complex types (i.e. objects) as keys. The result is a Map:

const odd  = { odd: true };
const even = { even: true };
array.groupByToMap((num, index, array) => {
  return num % 2 === 0 ? even: odd;
});
// =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }>

~

Engine Support

The methods are currently not supported in any JavaScript Engine. A polyfill is available in the core-js library.

~

🔥 Like what you see? Want to stay in the loop? Here's how:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.