Object.groupBy polyfill

object-group-by.js

const hasGroup = typeof Object.groupBy === typeof undefined || typeof Array.groupToMap === typeof undefined || typeof Array.group === typeof undefined;
if (!hasGroup) {
  const groupBy = (arr, callback) => {
    return arr.reduce((acc = {}, ...args) => {
      const key = callback(...args);
      acc[key] ??= []
      acc[key].push(args[0]);
      return acc;
    }, {});
  };

  if (typeof Object.groupBy === typeof undefined) {
    Object.groupBy = groupBy;
  }

  if (typeof Array.groupToMap === typeof undefined) {
    Array.groupToMap = groupBy;
  }

  if (typeof Array.group === typeof undefined) {
    Array.group = groupBy;
  }
}

// There are better approaches using loops directly instead of reduce

// Example:
console.log(
  Object.groupBy(
    [1, 2, 3, 4, 5, 6],
    (v) => v % 2 === 0 ? 'even': 'odd'
  )
);

This should not be with prototype. Just Object.groupBy

This should not be with prototype. Just Object.groupBy

Updated. Thank you.

Can you explain why or give a link to know the explanation? 🙏

The original API is without prototype. Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

Here is basic usage from documentation:

Object.groupBy(items, callbackFn)

Anyway, by removing prototype your code works very well. I have used it as a polyfill for Google Chrome >= v116.

Thank you!

I also update to check first if no defined to avoid forget it as I did in my project 😅

For Safari, you need to use Array.prototype.groupToMap.

And you could also add another check for Array.prototype.group.

const hasGroup = typeof Object.groupBy === typeof undefined || typeof Array.groupToMap === typeof undefined || typeof Array.group === typeof undefined;
if (!hasGroup) {
  const groupBy = (arr, callback) => {
    return arr.reduce((acc = {}, ...args) => {
      const key = callback(...args);
      acc[key] ??= []
      acc[key].push(args[0]);
      return acc;
    }, {});
  };

  if (typeof Object.groupBy === typeof undefined) {
    Object.groupBy = groupBy;
  }

  if (typeof Array.groupToMap === typeof undefined) {
    Array.groupToMap = groupBy;
  }

  if (typeof Array.group === typeof undefined) {
    Array.group = groupBy;
  }
}

I would do it in this way @jdegand

Thanks for the info =)

I think the code should negate the hasGroup condition:

const noGroup = ....

if(noGroup) {

}

As we're checking for undefined.

In other words:

const noGroup = typeof Object.groupBy === typeof undefined || typeof Array.groupToMap === typeof undefined || typeof Array.group === typeof undefined;
if (noGroup) {
  const groupBy = (arr, callback) => {
    return arr.reduce((acc = {}, ...args) => {
      const key = callback(...args);
      acc[key] ??= []
      acc[key].push(args[0]);
      return acc;
    }, {});
  };

  if (typeof Object.groupBy === typeof undefined) {
    Object.groupBy = groupBy;
  }

  if (typeof Array.groupToMap === typeof undefined) {
    Array.groupToMap = groupBy;
  }

  if (typeof Array.group === typeof undefined) {
    Array.group = groupBy;
  }
}

  if (typeof Object.groupBy === typeof undefined) {
    Object.groupBy = groupBy;
  }

This can be omitted because at least first condition must match to be inside the first if.