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

Running a Python script through a Javascript event

Ways to dynamically link a JSON response object to an entity?

What could be causing the vue-property-decorator @Emit to malfunction in my Vue TypeScript file?

I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties

Searching for multiple lines of text within a PHP document

Is JavaScript's setTimeout 0 feature delaying the rendering of the page?

Fade in elements individually with the jQuery Waypoints plugin

What is the best way to locate an item reference for a specific DOM element?

Tips for executing a callback function when triggering a "click" event in jQuery?

Using Javascript to create bold text within a string

How can I apply and delete a css class only while scrolling in a React application?

What is the best way to generate a random string output from an object in JavaScript?

Experiencing a blank page error when trying to render a partial view using Angular.js

Matching only the specified Records in an array of Typescript generic objects

Tips for troubleshooting when document.queryselector isn't functioning properly in NextJS for server-side rendering (SSR)

Tips for retaining the value of a variable in JavaScript

Version 5 of angularfie2 is encountering an issue where the type 'Observable<{}[]>' cannot be assigned to the type 'Observable<any[]>'

What could be causing the returned promise value to not refresh?

Tap to navigate to queued sections on click

Construction of jQuery Events