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

11–20 of 97 posts

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

#11

Post by beardedetim »

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…

Let's say I have a list of friend objects:

myFriends: { name: string, friends: friend[] }[]

If I wanted to get a list of friends of friends, I could do something like

myFriends.map(prop('friends')).flatten()

Or

myFriends.flatMap(prop('friends'))

My data is a list of lists but I really want a list of friends so I flatten.

Maybe the Friend object is poorly created/designed but often times you'll just have to deal with whatever the API gives you.

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

#12

Post by [deleted] »

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…

[deleted]

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

#13

Post by rak1507 »

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…

Some sort of function that returns a variable number of arguments.

It's basically the same as the list monad in haskell, and there are examples here https://en.wikibooks.org/wiki/Haskell/Understanding_monads/L... that can be followed even if you don't know any Haskell.

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

#14

Post by piaste »

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…

> What is a realistic scenario where an array needs to be flattened?

Concatenating the result of a paginated API.

Showing all the objects two or more 1:N steps away from you in the object graph. The events your friends are attending, the issues your coworkers are working on, the people belonging to any of your same groups. Basically any time you would do a SELECT... JOIN in SQL.

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

#16

Post by nicoburns »

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…

It occurs commonly any time you are dealing with nested data.

For example: at work we deal with "roles" (professions), and underneath those there can be different specialisms. In some of our views we have filters that users can use to show a subset of the data. There is a filter for roles, and a filter for specialisms. But the specialisms filter should only show options that are relevant given the roles selected in the roles filter. So the code for generating the options to display in the specialisms filter dropdown is something like:

    const availableSpecialisms = roles
      .filter(role => selectedRoles.includes(role.id))
      .flatMap(role => role.specialisms)

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

#17

Post by ReleaseCandidat »

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…

When `x => [x * 2]` is a function that returns an array, but you do not want an array of arrays. Doesn't make much sense with such a lambda, of course.

And of course you could call `flatmap` bind, if you prefer ;)

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

#19

Post by ReleaseCandidat »

beaconstudios wrote: post #5
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?

probably because flatMap (also called chain) is an important array (or monads in general) function in functional programming. If anything, .flat() is the aberration.

> If anything, .flat() is the aberration.

Same as `flatmap` (`bind`), `flat` is 'part' of a monad (as `join`).

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

#20

Post by beaconstudios »

ReleaseCandidat wrote: post #19
beaconstudios wrote: post #5

Earlier quoted context omitted.

probably because flatMap (also called chain) is an important array (or monads in general) function in functional programming. If anything, .flat() is the aberration.

> If anything, .flat() is the aberration. Same as `flatmap` (`bind`), `flat` is 'part' of a monad (as `join`).

good point, I didn't think of that equivalence.
Post reply on HN