Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

Question

Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

I'm attempting to transform a method into a generic method for use with arrow functions in JavaScript, but I'm struggling to determine the correct way to do so.

  groupBy: <Map>(predicate: (item: T) => Map[]) => Map[];

Array.prototype.groupBy = function (predicate) {
return this.reduce(
    (entryMap, e) => entryMap.set(e.status, [...entryMap.get(e.status) || [], e]),
    new Map()
)};

The predicate I am receiving in this method looks like ƒ (x) { return x.status; }.

I would like to replace e.status with something more generic so that I can use it like

arrayData.groupBy(x=>x.status)

. As a beginner, I am unsure of how to proceed. I came across a method in a post @ , shared by @Arthur Tacca

Thank you in advance

javascript arrays typescript ecmascript-6 reduce

Answer 1

Answer №1

The code provided in the linked question is organizing the objects based on e.status. However, in your scenario, the property is dynamic. If you pass x => x.status as the predicate argument, how can you access the e.status for each object within the reduce function? Simply invoke the predicate with the e parameter instead of using e.status

Array.prototype.groupBy = function(predicate) {
  return this.reduce(
    (entryMap, e) => entryMap.set(predicate(e), [...entryMap.get(predicate(e)) || [], e]),
    new Map()
  )
};

const arr = [{ status: 10, id: 1 }, { status: 10, id: 2 }, { status:20, id: 3 }],
      map = arr.groupBy(e => e.status)

console.log(map.get(10))
console.log(map.get(20))
console.log(map.get(30))

It's important to remember that expanding native objects is considered a poor practice. Even if you extend prototypes with new items, ensure you do so using Object.defineProperty like shown below:

Object.defineProperty(Array.prototype, "groupBy", {
  value: function(predicate) {
    return this.reduce(
      (entryMap, e) => entryMap.set(predicate(e), [...entryMap.get(predicate(e)) || [], e]),
      new Map()
    )
  },
  configurable: true,
  writable: true
});

If you define it in this manner, enumerable will be set to false. Adding

Array.prototype.groupBy = function(predicate){}

directly will result in enumerable being set to true, causing it to be included in for..in loops.

Answer 2

The code provided in the linked question is organizing the objects based on e.status. However, in your scenario, the property is dynamic. If you pass x => x.status as the predicate argument, how can you access the e.status for each object within the reduce function? Simply invoke the predicate with the e parameter instead of using e.status

Array.prototype.groupBy = function(predicate) {
  return this.reduce(
    (entryMap, e) => entryMap.set(predicate(e), [...entryMap.get(predicate(e)) || [], e]),
    new Map()
  )
};

const arr = [{ status: 10, id: 1 }, { status: 10, id: 2 }, { status:20, id: 3 }],
      map = arr.groupBy(e => e.status)

console.log(map.get(10))
console.log(map.get(20))
console.log(map.get(30))

It's important to remember that expanding native objects is considered a poor practice. Even if you extend prototypes with new items, ensure you do so using Object.defineProperty like shown below:

Object.defineProperty(Array.prototype, "groupBy", {
  value: function(predicate) {
    return this.reduce(
      (entryMap, e) => entryMap.set(predicate(e), [...entryMap.get(predicate(e)) || [], e]),
      new Map()
    )
  },
  configurable: true,
  writable: true
});

If you define it in this manner, enumerable will be set to false. Adding

Array.prototype.groupBy = function(predicate){}

directly will result in enumerable being set to true, causing it to be included in for..in loops.

Using arrow functions in Typescript e6 allows for the utilization of Array.groupBy

Answer №1

Similar questions

Delete JavaScript functions and events from memory once the JavaScript code has been removed from the HTML file

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

Tips for paginating a Laravel collection without using keys:

Implementing NPM commands in Jenkins using shell scripting

Exploring the isolate scope within a compiled directive

When using Mongoose with Ejs, I am unable to view the comment I made when I navigate back to the post using GET. The comment only becomes visible after I have submitted it

Should front-end and back-end share Typescript data modeling through classes or interfaces?

AngularJS toaster doesn't seem to be appearing

When the down key is pressed in a textarea, choose the list item

Using scrollIntoView() in combination with Angular Material's Mat-Menu-Item does not produce the desired result

Loading SVG templates dynamically in Angular can be done by utilizing a string

Vue.js component mismatch in the layout

Display temporary image until real image loads within ng-repeat angularjs

Eliminate nested object properties using an attribute in JavaScript

Encounter a Socket.io connection error due to net::ERR_CONNECTION_REFUSED when trying to access from multiple devices

Adjust google maps to fill the entire vertical space available

Slide in the Toggle Effect to Your Navigation Menu

How to update the state of a component in the root layout from its child components in Next JS 13 with the app router?

Scroll effect for read-only text input with long content inside a div

The process of linking a Json response to a table