Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

wisdomgeek.com

Post reply on HN
Print view View original

41–50 of 97 posts

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#41

Post by Tuna-Fish »

Waterluvian wrote: post #2

I've always found `flatMap` to be interesting because it feels like a convenience function, combining .map(fn).flat() into one function. It's interesting because JS doesn't really have a lot of convenience functions that are this shallow (ie. that provide just minimal cleanup compared to the functions they're wrapping). Is there some specific reason that `flatMap` made the cut?

For a lot of common cases (where the returned lists from the fn are short, but the complete list is long), a combined flatMap can be optimized to be much faster than doing the functions one by one.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#42

Post by spiralx »

ReleaseCandidat wrote: post #28
christophilus wrote: post #27

Earlier quoted context omitted.

Push returns the length of the array, though, so that won't work.

Ah, sorry, so you have to concat the arrays using `concat`. [1, 2, 3, 4, 5].reduce((acc, n) => n % 2 === 1 ? acc.concat([2*n]) : acc, [])

Surely the spread operator is nicer here?

    [1, 2, 3, 4, 5].reduce((acc, n) => n % 2 === 1 ? [ ...acc, 2 * n ] : acc, [])

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#43

Post by kaba0 »

heydenberk wrote: post #21

Something that people may not see immediately is that flatMap is more general than map and filter. Say, for a contrived example, that you'd like to filter out the even numbers in an array, and then double the odd numbers that remain. Instead of: [1, 2, 3, 4, 5].filter(n => n % 2 === 1).map(n => n * 2) You can do: [1, 2, 3, 4, 5].flatMap(n => n % 2 === 1 ? [n * 2] : []) Again, this is a contrived example, but I think…

It is also much less readable.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#44

Post by khalilch2 »

saranshk wrote: post #22
Rygian wrote: post #8

I have very little experience with arrays in JS, but I always have a nagging feeling that, if my algorithm needs me to flatten an array, then there is something wrong with the data structures I am using. Example in the article is meaningless to me: array.map(x => [x \* 2]); // [[2], [4], [6], [8]] array.flatMap(x => [x * 2]); // [2, 4, 6, 8] because the right way would be array.map(x => x *2); anyway. What am I missi…

added this to the post as well, a place where there is an array inside an array of objects and you want all those. For example, if we want to extract all roles from the array: [ { name: "Saransh Kataria" , roles: ['system-admin', 'developer'] }, { name: "Wisdom Geek" , roles: ['basic'] }, ].flatMap(x => x.roles); // Output => ["admin", "system-admin", "developer"]

wouldn't the output be ['basic', 'system-admin', 'developer'] rather than array[0] being 'admin'?

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#45

Post by jacobolus »

ReleaseCandidat wrote: post #35
jasonkillian wrote: post #34

Earlier quoted context omitted.

Wouldn't recommend doing this - if the original array is of significant length this'll get quite slow because `acc.concat` has to create a brand new array of slightly longer length on each iteration it's called. Better to just use `push` like you suggested before and then return the array if you want to use `reduce`.

Yes, of course, that's why I used `push` at first.

Use the comma operator: (acc.push(2*n), acc) will return acc. Or e.g.

  [1, 2, 3, 4, 5].reduce((acc, n) => (n % 2 ? acc.push(2*n) : null, acc), [])

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#46

Post by wk_end »

jacobolus wrote: post #45
ReleaseCandidat wrote: post #35

Earlier quoted context omitted.

Yes, of course, that's why I used `push` at first.

Use the comma operator: (acc.push(2*n), acc) will return acc. Or e.g. [1, 2, 3, 4, 5].reduce((acc, n) => (n % 2 ? acc.push(2*n) : null, acc), [])

If you're just iterating through the array and mutating an object on each iteration, just use a for loop.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#47

Post by jacobolus »

wk_end wrote: post #46
jacobolus wrote: post #45

Earlier quoted context omitted.

Use the comma operator: (acc.push(2*n), acc) will return acc. Or e.g. [1, 2, 3, 4, 5].reduce((acc, n) => (n % 2 ? acc.push(2*n) : null, acc), [])

If you're just iterating through the array and mutating an object on each iteration, just use a for loop.

Obviously you can alternately write:

  let input = [1, 2, 3, 4, 5], output = [];
  for (let i = 0; i
But in some circumstances the other style can be more convenient / legible. The immediate question was about pushing to an array and then returning the array, for which the comma operator can be handy.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#48

Post by hildjj »

Vanit wrote: post #29
heydenberk wrote: post #21

Something that people may not see immediately is that flatMap is more general than map and filter. Say, for a contrived example, that you'd like to filter out the even numbers in an array, and then double the odd numbers that remain. Instead of: [1, 2, 3, 4, 5].filter(n => n % 2 === 1).map(n => n * 2) You can do: [1, 2, 3, 4, 5].flatMap(n => n % 2 === 1 ? [n * 2] : []) Again, this is a contrived example, but I think…

For those wondering at home, the reason you shouldn't do this is immediately spelled out in the Mozilla docs for flatMap: > Note, however, that this is inefficient and should be avoided for large arrays: in each iteration, it creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of just adding the new elements to the existing a…

I just filed this issue on the MDN page: https://github.com/mdn/content/issues/11763

That note is misleading.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#49

Post by tzs »

khalilch2 wrote: post #44
saranshk wrote: post #22

Earlier quoted context omitted.

added this to the post as well, a place where there is an array inside an array of objects and you want all those. For example, if we want to extract all roles from the array: [ { name: "Saransh Kataria" , roles: ['system-admin', 'developer'] }, { name: "Wisdom Geek" , roles: ['basic'] }, ].flatMap(x => x.roles); // Output => ["admin", "system-admin", "developer"]

wouldn't the output be ['basic', 'system-admin', 'developer'] rather than array[0] being 'admin'?

You are right that it should be 'basic', not 'admin'. But the order should be 'system-admin', 'developer', and finally 'basic'.

Re: Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap()

#50

Post by [deleted] »

saranshk wrote: post #22
Rygian wrote: post #8

I have very little experience with arrays in JS, but I always have a nagging feeling that, if my algorithm needs me to flatten an array, then there is something wrong with the data structures I am using. Example in the article is meaningless to me: array.map(x => [x \* 2]); // [[2], [4], [6], [8]] array.flatMap(x => [x * 2]); // [2, 4, 6, 8] because the right way would be array.map(x => x *2); anyway. What am I missi…

added this to the post as well, a place where there is an array inside an array of objects and you want all those. For example, if we want to extract all roles from the array: [ { name: "Saransh Kataria" , roles: ['system-admin', 'developer'] }, { name: "Wisdom Geek" , roles: ['basic'] }, ].flatMap(x => x.roles); // Output => ["admin", "system-admin", "developer"]

[deleted]
Post reply on HN