JavaScript: How to return mapped array from Array.reduce() function?

Question

Why does Code Snippet 1 work while Code Snippet 2 doesn't?

Code Snippet 1:

var firstEvents = events.reduce(function(ar, e) {
  var id = e.getId();
  if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
    ar.push({eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()});
  }
  return ar;
}, []);
firstEvents = new Map(firstEvents.map(entry => [entry.eventTitle, entry.startDate]));

Code Snippet 2:

var firstEvents = events.reduce(function(ar, e) {
  var id = e.getId();
  if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
    ar.push({eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()});
  }
  return (new Map(ar.map(entry => [entry.eventTitle, entry.startDate])));
}, []);

How would I shorten Code Snippet 1 correctly?

Bergi · Accepted Answer · 2020-03-24 15:54:04Z

1

Why does Code Snippet 1 work while Code Snippet 2 doesn't?

Because the callback is executed multiple times, and the new Map you are returning becomes the ar accumulator value in the next call.

How would I shorten Code Snippet 1 correctly?

To make it a single expression, you would use

const firstEvents = new Map(events.reduce(…).map(…));

But really the correct solution would be not to use reduce and push at all, but just map and filter. To remove duplicate ids, keep track of them in a Set, or even better just key another map by them:

const firstEventsById = new Map(events.filter(e =>
  e.isRecurringEvent() && e.isAllDayEvent()
).map(e => {
  var id = e.getId();
  return [id, {
    eventTitle: e.getTitle(),
    // eventId: id,
    startDate: e.getAllDayStartDate(),
    // endDate: e.getAllDayEndDate()
  }];
}).reverse());
const startDatesByTitle = new Map(Array.from(firstEventsById.values(), entry =>
  [entry.eventTitle, entry.startDate]
));

edited Mar 24, 2020 at 15:54

answered Mar 24, 2020 at 15:47

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

Thank you! Could you give me a live example using map and filter?

Ben Over a year ago

Thank you very much!

Collectives™ on Stack Overflow

JavaScript: How to return mapped array from Array.reduce() function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related