Array 'map' vs 'forEach' - functional programming

Question

I have an array of objects:

let reports = [{ inbound_calls: [...], outbound_calls: [...],  outbound_national_calls: [...] },...];

What is the best way to create a new array and assign into a variable:

1st approach - one loop:

let inbound_calls = []; outbound_national_calls = [], outbound_calls = [];

reports.forEach((e) => {
 inbound_calls.push(e.inbound_calls);
 outbound_national_calls.push(e.outbound_national_calls);
 outbound_calls.push(e.outbound_calls);
})

2nd approach:

let inbound_calls = this.reports.map((report) => report.inbound_calls)
let outbound_national_calls = this.reports.map((report) => report.outbound_national_calls)
let outbound_calls = this.reports.map((report) => report.outbound_calls)

I'm starting to learn functional programming, and want to apply it to my code, I would go with first approach (one loop), but as I did research about functional programming I think the second one is the right way (much cleaner) but, I'm not sure, what is less expensive operation?

The forEach() loop will be the less expensive operation. If performance is an absolute necessity, the traditional for() loop is the fastest loop in the JS runtime. — Randy Casburn
– Randy Casburn, Commented May 14, 2018 at 16:10
@MátéSafranka yeah. Technically, with this code, the easiest thing would be to do inbound_calls = reports.inboundCalls.slice(). However, I think the question still has merit, probably it would make more sense if reports contains something like [ { inbound_calls: ...} ] — VLAZ
– VLAZ, Commented May 14, 2018 at 16:14

31piy · Accepted Answer · 2018-05-14 16:15:33Z

3

If your ultimate goal is to create three variables out of the object, you may use object destructuring as follows. No loops required.

let reports = {
  inbound_calls: [1, 2, 3],
  outbound_calls: [4, 5, 6],
  outbound_national_calls: [7, 8, 9]
};

let {inbound_calls, outbound_calls, outbound_national_calls} = reports;
console.log(inbound_calls);
console.log(outbound_calls);
console.log(outbound_national_calls);

answered May 14, 2018 at 16:15

31piy

23.9k6 gold badges51 silver badges69 bronze badges

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

6 Comments

Randy Casburn Over a year ago

And the least expensive operation yet! Nice answer.

ibrahim mahrir Over a year ago

Note that this doesn't copy the arrays. Any mutation to the variables will also mutate the original arrays.

31piy Over a year ago

@ibrahimmahrir -- What OP has coded, does the same thing. OP didn't mention anywhere that he wants to create a copy. Still, if the copy is needed, using slice is obviously preferred.

ibrahim mahrir Over a year ago

@31piy No, it doesn't. OP's code is wrong anyway. Also OP is clearly intending to copy the items. Not sure if that is really what he wants but sure not what his code is aiming for.

Klark Over a year ago

Thanks for that but I had mistake in my question reports is array, so I can't use destruction like this there...

|

ibrahim mahrir · Accepted Answer · 2018-05-14 16:27:30Z

1

If you want to copy the arrays, just use Array#slice (the 0 passed is optional as it is the default start index so you can omit it if you want) like:

let inbound_calls = reports.inbound_calls.slice(0),
    outbound_national_calls = reports.outbound_national_calls.slice(0), 
    outbound_calls = reports.outbound_calls.slice(0);

or Array.from like:

let inbound_calls = Array.from(reports.inbound_calls),
    outbound_national_calls = Array.from(reports.outbound_national_calls), 
    outbound_calls = Array.from(reports.outbound_calls);

edited May 14, 2018 at 16:27

answered May 14, 2018 at 16:23

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

3 Comments

VLAZ Over a year ago

You don't need to supply 0 to .slice() - that's the default value. Calling it without an argument is enough.

ibrahim mahrir Over a year ago

@vlaz Right. I've added a note regarding it. I still think providing it is better as it is much clearer.

VLAZ Over a year ago

I can see your point. I did actually use to do that but at some point I stopped. I can definitely see merits for either way of calling this. In the beginning I did it because something else required a start parameter and it was less confusing to me to always supply it to .slice(). Later on, I came back to JS after doing something else and I actually forgot to add the index for a while until I came across some older code. It's not a big deal either way, so as long as you're consistent, it should be fine.

Aadit M Shah · Accepted Answer · 2018-05-14 19:42:12Z

What you're essentially doing is a matrix transposition:

const report = (inbound_calls, outbound_calls, outbound_national_calls) =>
    ({ inbound_calls, outbound_calls, outbound_national_calls });

const reports = [report(1,2,3), report(4,5,6), report(7,8,9)];

const transpose = reports =>
    report( reports.map(report => report.inbound_calls)
          , reports.map(report => report.outbound_calls)
          , reports.map(report => report.outbound_national_calls) );

console.log(transpose(reports));

Now, depending upon your application the fastest way to transpose a matrix might be not to transpose it at all. For example, suppose you have a matrix A and its transpose B. Then, it holds that for all indices i and j, A[i][j] = B[j][i]. Consider:

const report = (inbound_calls, outbound_calls, outbound_national_calls) =>
    ({ inbound_calls, outbound_calls, outbound_national_calls });

const reports = [report(1,2,3), report(4,5,6), report(7,8,9)];

// This is equivalent to transpose(reports).outbound_calls[1]
const result = reports[1].outbound_calls;

console.log(result);

That being said, your second approach is IMHO the most readable.

Collectives™ on Stack Overflow

Array 'map' vs 'forEach' - functional programming

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related