DEV Community

Cover image for Array.flat() in JavaScript
capscode
capscode

Posted on • Updated on • Originally published at capscode.in

Array.flat() in JavaScript

Hello Devs,

In this article i will walk you through one of the important methods of Array in JavaScript i.e Array.flat method.

Table of content

  1. Theory
  2. Syntax
  3. Return Value
  4. Examples

So without wasting any time lets get into the article

Theory

The flat() method is used to flatten the array of arrays. The process of flatten depends on the depth we want to flattened the array of arrays.

What this method do is, it takes out the array element from an array of arrays and concat them in the main array.
it will repeat this process till the depth value.

Syntax

Syntax:
flat(depth)
// The depth level specifying how deep a nested array structure should be flattened.
// Defaults to 1.
Enter fullscreen mode Exit fullscreen mode

Return Value

return value:
A new array with the sub-array elements concatenated into it.
Enter fullscreen mode Exit fullscreen mode

Examples

NOTE: IF YOU WANT TO FLATTEN THE ARRAY UPTO ITS LAST DEPTH THEN PUT depth AS Infinity

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

arr.flat(0) // [1, 2, [3, 4, [5, 6]]];
arr.flat(1) // [1, 2, 3, 4, [5, 6]]
arr.flat(2) // [1, 2, 3, 4, 5, 6]
arr.flat(3) // [1, 2, 3, 4, 5, 6] 
arr.flat( ) // [1, 2, 3, 4, [5, 6]]
// if no depth is provided then it will take the default value i.e 1.
arr.flat(Infinity) //[1, 2, 3, 4, 5, 6]


arr.flat(0).length //3
arr.flat(1).length //5
arr.flat(2).length //6

Enter fullscreen mode Exit fullscreen mode

Thank you for reading this far. This is a brief introduction of Array.flat() method in JavaScript .
If you find this article useful, like and share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to comment below.

Hope its a nice and informative read for you.
VISIT https://www.capscode.in/#/blog TO LEARN MORE...
See you in my next Blog article, Take care!!

IF MY ARTICLE HELPED YOU

Buy Me A Coffee

Thanks,
@capscode

Discussion (9)

Collapse
mondal10 profile image
Amit Mondal • Edited on

Great!
Just wanted to add one more

arr.flat(Infinity); // to flatten the whole array upto it's last depth.

Collapse
capscode profile image
capscode Author

Wow, i didnt know that..
nice add
thank you :)

Collapse
capscode profile image
capscode Author

i am going to add this in this blog itself :)

Collapse
cjsmocjsmo profile image
Charlie J Smotherman

Idk this article seemed a little flat 😆

Couldn't resist
Short and sweet nice 👍

Collapse
capscode profile image
capscode Author

hahaha
Thank You :)

Collapse
jashgopani profile image
Jash Gopani

wow, nice article ! short and to the point 👌

Collapse
capscode profile image
capscode Author

Thank you so much :)

Collapse
andrewbaisden profile image
Andrew Baisden

Good explanation thanks for taking the time to create and share this info.

Collapse
capscode profile image
capscode Author

You are most welcome, and thanks to you as well for liking my post and found this valuable.
:)