Why no Array.prototype.flatMap in javascript?

by

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','♧']
// ]

More Related Contents:

  1. What is ‘Currying’?
  2. Javascript equivalent of Python’s zip function
  3. map function for objects (instead of arrays)
  4. Does JavaScript have a method like “range()” to generate a range within the supplied bounds?
  5. How do I replace while loops with a functional programming alternative without tail call optimization?
  6. How to call reduce on an array of objects to sum their properties?
  7. Uncaught TypeError: Illegal invocation in JavaScript
  8. Why is immutability so important (or needed) in JavaScript?
  9. How to adapt trampolines to Continuation Passing Style?
  10. Merge two arrays with alternating values
  11. RxJS Promise Composition (passing data)
  12. How to chain map and filter functions in the correct order
  13. How can I pre-set arguments in JavaScript function call? (Partial Function Application)
  14. Why are Promises Monads?
  15. Difference between declarative and imperative in React.js?
  16. What is context in _.each(list, iterator, [context])?
  17. Removing elements with Array.map in JavaScript
  18. What is the in-place alternative to Array.prototype.filter()
  19. What object javascript function is bound to (what is its “this”)?
  20. Functional approach to basic array construction
  21. Get a function’s arity
  22. Split JavaScript array in chunks using Lodash
  23. Is it good to call subscribe inside subscribe?
  24. Currying a function that takes infinite arguments
  25. Why can I not pass a function call (rather than a function reference or an anonymous function) to setTimeout()?
  26. functional way to iterate over range (ES6/7) [duplicate]
  27. whats the difference between function foo(){} and foo = function(){}? [duplicate]
  28. How to use Math.max, etc. as higher-order functions
  29. How do I make a callable JS object with an arbitrary prototype? [duplicate]
  30. Explain bindbind() function

Leave a Comment