Demystifying Array.prototype.flat

ES2019 is officially available for us all to play with. Caution ahead, make sure that if you use these features your browser and/or transpiler supports them.

Without further ado, let's dive into our first new feature. I give you Array.prototype.flat!

The Old Way

Embedded arrays exist in our code for any number of reasons, and to be honest, they're kind of a pain.

let arr = [1, 2, [3, 4, [5, 6]]]

Handling stuff like this used to require unintuitive trickery like the code below.

var merged = [].concat.apply([], arr);

And that would only result in one level of depth being flattened!

[1, 2, 3, 4, [5, 6]]

Boooooooo

The New Way!

Then along came flat(). And this is a game changer.

Doing the same thing we did above is a breeze.

var merged = arr.flat(1)

That argument is just the depth that we want to flatten. So one level deep gets us this, just like before.

[1, 2, 3, 4, [5, 6]]

Note that if you don't pass an argument it defaults to 1. That means these statements are equivalent.

arr.flat(1)
//is the same as
arr.flat()

Magic

But what is so incredibly powerful is that it doesn't stop there. We can flatten our entire array in a single line.

var merged = arr.flat(2)

Becomes

[1, 2, 3, 4, 5, 6]

Wait for It

We've even been gifted one more awesome feature. Let's say we don't know the depth of our array but we want to flatten it all the way.

var merged = arr.flat(Infinity)

In Summary

It's a miracle!!! Go forth and enjoy the awesomeness that ES2019 has gifted us.

Comments

[Tyler V.]

Just saw .flat(Infinity) in the wild for the first time - I only knew what it did because of this article.

Laurie once again saves me time 💕

[Laurie]

Someone used it?!? This is my white whale lol

[Tyler V.]

I can DM it to you - Idk how much it'll make sense without all the context (which I don't know how much I can share), but I was also excited to see it!

[Mohamed Anis MANI]

To flatten your code in JavaScript you can use the old recursive way.

const flatArray = (arr) => {
  let res = [];
  for (let item of arr) {
    if (item instanceof Array) {
      item = flatArray(item);
      res = res.concat(item);
    } else {
      res.push(item);
    }
  }
  return res;
}

[selbekk]

Really nice breakdown of this new function ❤️ Thanks for sharing

[Siddharath shankar bhardwaj]

wonderful awesome features.

[Wiltel492019]

That's a great argument. On array!!! C#, JavaScript, Python Computer Programming Language's Instruments Automation Technologies.
[e-mail]
AAS ITI MICHIGAN

[Fabio Russo]

This is pretty handy... I'm still waiting for modern JS in all Browsers (and IE death maybe)

[Zak Henry]

There's now a new way to create a stack overflow! 🎉

a = [1,2,3]

b = [4,5,6]

a.push(b)

b.push(a)

a.flat(Infinity) 

// VM185:9 Uncaught RangeError: Maximum call stack size exceeded
//    at Array.flat (<anonymous>)
//    at <anonymous>:9:3

[Laurie]

I'm not even sure how you triggered that! I tried the same and ended up with a Circular reference warning and then

[1] 5163 segmentation fault node

when node crashed haha.

Well done!

[Zak Henry]

Oh interesting, I just tried this in the Chrome console, thanks for the inspiration :)

[rhymes]

Infinity Flatterers

[Brad]

Does anyone know why the arr.flat() doesn't automatically use Infinity as the default value? Is it a performance thing or something?

Also, could you ever shoot yourself in the foot with this call, or does it protect me from my own shenanigans?

[Zak Henry]

could you ever shoot yourself in the foot with this call, or does it protect me from my own shenanigans?

Yep you can shoot yourself in the foot - if for some reason your array contains circular references .flat(Infinity) will cause a stack overflow.

demo:

a = [1,2,3]

b = [4,5,6]

a.push(b)

b.push(a)

a.flat(Infinity) 

// VM185:9 Uncaught RangeError: Maximum call stack size exceeded
//    at Array.flat (<anonymous>)
//    at <anonymous>:9:3

[Laurie]

Depends what the shenanigans are! 🙃

And to be honest, I’m surprised so many people expected it to be infinity by default?

[rhymes]

It make sense, flat(N) means I have to know exactly how many levels of nesting there are. We're lazy, Infinity should have been the default :P

[Riva Yudha]

Indeed it’s a handy feature to work with. But please be careful when using it in production, as my app often crashes in some of my user’s mobile browser, most likely because the browser support is not really good.

This made me had to revert some functions back to use the old ways in order to flattening arrays. Hopefully the browser support is getting better, though.