Why no Array.prototype.flatMap in javascript?

Question

flatMap is incredibly useful on collections, but javascript does not provide one while having Array.prototype.map. Why?

Is there any way to emulate flatMap in javascript in both easy and efficient way w/o defining flatMap manually?

"Why?" Because no one made a proposal yet? Here is how to propose a new feature. "Is there any way to emulate flatMap ... w/o defining flatMap manually?" Uh? I don't understand. You mean like arr.reduce((arr, v) => (arr.push(...v), arr), [])? — Felix Kling
– Felix Kling, Commented Oct 3, 2016 at 18:04
(^that's only the flatten part, so I guess it should be arr.map(...).reduce(...)). — Felix Kling
– Felix Kling, Commented Oct 3, 2016 at 18:10
Hmm, you want to "emulate" it but not "define" it. What might that mean? — user663031
– user663031, Commented Oct 3, 2016 at 19:00
It is going to be part of JS soon. tc39.github.io/proposal-flatMap — Vijaiendran
– Vijaiendran, Commented Nov 1, 2017 at 20:57

Mulan · Accepted Answer · 2021-01-09 01:04:15Z

120

Update: Array.prototype.flatMap made it into ES2019

It is widely supported in many environments. See if it works in your browser using this snippet below -

const data =
  [ 1, 2, 3, 4 ]
  
console.log(data.flatMap(x => Array(x).fill(x)))
// [ 1, 2, 2, 3, 3, 3, 4, 4, 4, 4 ]

"Why no Array.prototype.flatMap in javascript?"

Because programming isn't magic and every language doesn't have features/primitives that every other language has. What matters is JavaScript gives you the ability to define it on your own -

const concat = (x,y) =>
  x.concat(y)

const flatMap = (f,xs) =>
  xs.map(f).reduce(concat, [])

const xs = [1,2,3]

console.log(flatMap(x => [x-1, x, x+1], xs))

Or a rewrite that collapses the two loops into one -

const flatMap = (f, xs) =>
  xs.reduce((r, x) => r.concat(f(x)), [])

const xs = [1,2,3]

console.log(flatMap(x => [x-1, x, x+1], xs))

If you want it to extend the Array.prototype, nothing is stopping you -

if (!Array.prototype.flatMap) {
  function flatMap (f, ctx) {
    return this.reduce
      ( (r, x, i, a) =>
          r.concat(f.call(ctx, x, i, a))
      , []
      )
  }
  Array.prototype.flatMap = flatMap
}

const ranks =
  [ 'J', 'Q', 'K', 'A' ]
  
const suits =
  [ '♡', '♢', '♤', '♧' ]

const result =
  ranks.flatMap(r =>
    suits.flatMap(s =>
      [[r, s]]
    )
  )

console.log(JSON.stringify(result))
// [ ['J','♡'], ['J','♢'], ['J','♤'], ['J','♧']
// , ['Q','♡'], ['Q','♢'], ['Q','♤'], ['Q','♧']
// , ['K','♡'], ['K','♢'], ['K','♤'], ['K','♧']
// , ['A','♡'], ['A','♢'], ['A','♤'], ['A','♧']
// ]

edited Jan 9, 2021 at 1:04

answered Oct 3, 2016 at 18:46

Mulan

136k35 gold badges240 silver badges276 bronze badges

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

10 Comments

Fengyang Wang Over a year ago

It is considered better to namespace any additions to prototypes (e.g. Array.prototype._mylib_flatMap), or even better use ES6 symbols, instead of simply defining Array.prototype.flatMap.

Mulan Over a year ago

@FengyangWang "considered better" is highly subjective. If this is your own app and you have a reason for extending your prototypes, there is nothing wrong with it. If it is an library/module/framework that you are distributing for others' use, then I would agree with you. Comments however are not the place to discuss this - the matter deserves more explanation and detail than should be provided in comments.

Mulan Over a year ago

@SergeyAlaev re: "imagine map as a global function" haha I do exactly that on lots of my utility functions. I curry them too using sequences of arrow functions. "Ugly" is subjective. And you've made no argument to support your "bad practice" comment. Your remarks indicate to me you have little experience with functional programming. Take a language like Haskell where prelude include heaps of "globals"... no one is saying it's "ugly" or a "bad practice". You're just not familiar with it.

Mulan Over a year ago

@SergeyAlaev or consider Racket that has append, map, filter, foldl, foldr among countless others in the default namespace. It doesn't make it a bad practice because you heard someone say "globals are bad" or "extending natives is bad" - racket is amongst the best designed languages. You just don't know how/when to do it appropriately.

Elliott Jones Over a year ago

@user633183 ""considered better" is highly subjective." No, it's not. It's conditional. Subjective isn't a synonym for conditional. Anyway, you outline those conditions in your first reply: "If it is your own app [...] there is nothing wrong with it." "If it is an library/module/framework that you are distributing for others' use, then I would agree with you." I feel like this info should be in the body of the answer, as it's kinda important?

|

CertainPerformance · Accepted Answer · 2019-06-25 04:58:23Z

52

flatMap has been approved by the TC39 as part of ES2019 (ES10). You can use it like this:

[1, 3].flatMap(x => [x, x + 1]) // > [1, 2, 3, 4]

Here's my own implementation of the method:

const flatMap = (f, arr) => arr.reduce((x, y) => [...x, ...f(y)], [])

MDN Article on flatMap

edited Jun 25, 2019 at 4:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

answered Nov 29, 2017 at 9:44

Kutyel

9,1644 gold badges35 silver badges64 bronze badges

3 Comments

Carl Walsh Over a year ago

In particular, flapMap is officially in Node 11.0.0 according to MDN: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

ErikE Over a year ago

@CarlWalsh I'm sorry, I cannot resist. What the heck is flapMap? i want to flatten my map, not flap it!

Kutyel Over a year ago

On another subject, this finally turns JavaScript Array's into Monads™️ 🙃

Alan Mimms · Accepted Answer · 2016-10-06 15:42:58Z

11

I know you said you didn't want to define it yourself, but this implementation is a pretty trivial definition.

There's also this from the same github page:

Here is a bit of shorter way using es6 spread, similiar to renaudtertrais's - but using es6 and not adding to the prototype.

var flatMap = (a, cb) => [].concat(...a.map(cb))

const s = (v) => v.split(',')
const arr = ['cat,dog', 'fish,bird']

flatMap(arr, s)

Would either of these help?

It should be noted (thanks to @ftor) that this latter "solution" suffers from "Maximum call stack size exceeded" if called on a really large (e.g., 300k elements) array a.

edited Oct 6, 2016 at 15:42

answered Oct 3, 2016 at 18:10

Alan Mimms

70311 silver badges23 bronze badges

4 Comments

user6445533 Over a year ago

This implementation may blow up the stack for large arrays.

Alan Mimms Over a year ago

Just to be clear, if I understand you correctly, @ftor, you're talking about the recursive implementation in the link I gave, not the one I show in the code block at the end of my answer, right?

user6445533 Over a year ago

Try [].concat(...(new Array(300000).fill("foo").map(x => x.toUpperCase()))). Sure, it's a corner case. But you should at least mention it.

Alan Mimms Over a year ago

Thanks. I added a note to this effect.

Matthew Marichiba · Accepted Answer · 2017-10-13 20:53:36Z

7

Lodash provides a flatmap function, which to me is practically equivalent to Javascript providing it natively. If you're not a Lodash user, then ES6's Array.reduce() method can give you the same result, but you have to map-then-flatten in discrete steps.

Below is an example of each method, mapping a list of integers and returning only the odds.

Lodash:

_.flatMap([1,2,3,4,5], i => i%2 !== 0 ? [i] : [])

ES6 Reduce:

[1,2,3,4,5].map(i => i%2 !== 0 ? [i] : []).reduce( (a,b) => a.concat(b), [] )

answered Oct 13, 2017 at 20:53

Matthew Marichiba

2,1121 gold badge27 silver badges25 bronze badges

Comments

JLRishe · Accepted Answer · 2017-11-14 18:07:50Z

4

One fairly concise approach is to make use of the Array#concat.apply:

const flatMap = (arr, f) => [].concat.apply([], arr.map(f))

console.log(flatMap([1, 2, 3], el => [el, el * el]));

answered Nov 14, 2017 at 18:07

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Comments

serhii · Accepted Answer · 2017-07-31 14:27:59Z

1

I did somthing like this:

Array.prototype.flatMap = function(selector){ 
  return this.reduce((prev, next) => 
    (/*first*/ selector(prev) || /*all after first*/ prev).concat(selector(next))) 
}

[[1,2,3],[4,5,6],[7,8,9]].flatMap(i => i); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

[{subarr:[1,2,3]},{subarr:[4,5,6]},{subarr:[7,8,9]}].flatMap(i => i.subarr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

edited Jul 31, 2017 at 14:27

answered Jul 31, 2017 at 7:58

serhii

715 bronze badges

1 Comment

Johnny Over a year ago

Hi serhii, I have tried this code, when parent only one object will gives unexpected result. ``` Array.prototype.flatMap = function(selector){ if (this.length == 1) { return selector(this[0]); } return this.reduce((prev, next) => (/*first*/ selector(prev) || /*all after first*/ prev).concat(selector(next))) }; ```

bigInt · Accepted Answer · 2019-06-13 18:19:23Z

1

We now have a flatMap() in Javascript! And it is supported pretty well

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1

const dublicate = x => [x, x];

console.log([1, 2, 3].flatMap(dublicate))

answered Jun 13, 2019 at 18:19

bigInt

2235 silver badges16 bronze badges

4 Comments

SolutionMill Over a year ago

Getting error when running the posted code

{   "message": "Uncaught TypeError: [1,2,3].flatMap is not a function",   "filename": "https://stacksnippets.net/js",   "lineno": 15,   "colno": 23 }

bigInt Over a year ago

What broser are you using? Edge, IE and Samsung Internet does not support it yet, thoug, Edge will soon run on V8. So to support those, you could use a polyfil

SolutionMill Over a year ago

Chrome Version 67.0.3396.87 (Official Build) (64-bit)

bigInt Over a year ago

Your browser is outdated.. You should update it or set to update itself automaticly.

Willem van der Veen · Accepted Answer · 2019-12-04 13:21:49Z

0

Array.prototype.flatMap() has now arrived in JS. However, not all browser might support them check for the current browser compatibility the Mozilla web docs.

What the flatMap() method does is first maps each element using a callback function as argument, then flattens the result into a new array (the 2d array is now 1d since the elements are flattened out).

Here is also an example of how to use the function:

let arr = [[2], [4], [6], [8]]

let newArr = arr.flatMap(x => [x * 2]);

console.log(newArr);

edited Dec 4, 2019 at 13:21

answered Dec 4, 2019 at 13:16

Willem van der Veen

37k19 gold badges208 silver badges177 bronze badges

Collectives™ on Stack Overflow

Why no Array.prototype.flatMap in javascript?

8 Answers 8

10 Comments

3 Comments

4 Comments

Comments

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

10 Comments

3 Comments

4 Comments

Comments

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related