Flatten Arrays in Vanilla JavaScript with Flat() and FlatMap() • Hacker News Board

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

#21

Post by heydenberk » Wed, Jan 05, 2022, 4:32 PM UTC

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's interesting since the generality is not obvious (to me)

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

#22

Post by saranshk » Wed, Jan 05, 2022, 4:35 PM UTC

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"]

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

#23

Post by saranshk » Wed, Jan 05, 2022, 4:39 PM UTC

yawnxyz wrote: post #7

I've made it a habit to check Mozilla's JS docs once in a while for functions like Flat() and FlatMap(). Sometimes if I find myself reaching for underscore/lodash, I'll check Mozilla docs first to see if there's some new function that can let me omit using lodash. I'm often delighted to find new convenience functions I can just use without adding another dependable.

there have been a lot of those added to the ES spec lately and a lot more coming soon. So it is always good to check MDN because I usually end up learning something new mostly.

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

#24

Post by ReleaseCandidat » Wed, Jan 05, 2022, 4:41 PM UTC

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…

Yes, but you could also use `fold`^H^H^H^H`reduce`.

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

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

#25

Post by niek_pas » Wed, Jan 05, 2022, 4:44 PM UTC

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…

You could do that, but I’d argue using filter then map is more readable. What do empty arrays have to do with doubling even integers?

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

#26

Post by [deleted] » Wed, Jan 05, 2022, 4:48 PM UTC

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…

[deleted]

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

#27

Post by christophilus » Wed, Jan 05, 2022, 4:49 PM UTC

ReleaseCandidat wrote: post #24

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…

Yes, but you could also use `fold`^H^H^H^H`reduce`. [1, 2, 3, 4, 5].reduce((acc, n) => n % 2 === 1 ? acc.push(2*n) : acc, [])

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

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

#28

Post by ReleaseCandidat » Wed, Jan 05, 2022, 4:53 PM UTC

christophilus wrote: post #27

ReleaseCandidat wrote: post #24

Earlier quoted context omitted.

Yes, but you could also use `fold`^H^H^H^H`reduce`. [1, 2, 3, 4, 5].reduce((acc, n) => n % 2 === 1 ? acc.push(2*n) : acc, [])

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, [])

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

#29

Post by Vanit » Wed, Jan 05, 2022, 4:57 PM UTC

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 array.

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

#30

Post by Spivak » Wed, Jan 05, 2022, 4:57 PM UTC

piaste wrote: post #14

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.

If you’re doing that aren’t you kinda defeating the point of pagination? Paginated APIs to me are a contract that says the size of the results can be arbitrarily large and there be dragons if you try to fit them in memory.

With how many wrappers around paginated APIs to unpaginate them I must be wrong but it still bugs me.