JavaScript Array flat() Method

29 Oct, 2021
Below is the example of the Array flat() method.
Example:<script>    // Creating multilevel array    const numbers = [['1', '2'], ['3', '4',                     ['5',['6'], '7']]];      const flatNumbers= numbers.flat(Infinity);    document.write(flatNumbers);</script>
<script>    // Creating multilevel array    const numbers = [['1', '2'], ['3', '4',                     ['5',['6'], '7']]];      const flatNumbers= numbers.flat(Infinity);    document.write(flatNumbers);</script>
Ourtput:1,2,3,4,5,6,7
1,2,3,4,5,6,7
The arr.flat() method was introduced in ES2019. It is used to flatten an array, to reduce the nesting of an array.
The flat() method is heavily used in functional programming paradigm of JavaScript. Before flat() method was introduced in JavaScript, various libraries such as underscore.js were primarily used.
Syntax:
arr.flat([depth])
Parameters: This method accepts a single parameter as mentioned above and described below:
depth: It specifies, how deep the nested array should be flattened. The default value is 1 if no depth value is passed as you guess it is an optional parameter.
Return value: It returns an array i.e. depth levels flat than the original array, it removes nesting according to the depth levels.
More codes for the above function are defined as follows:
Program 1: The following code snippet shows, how flat() method works.
<script>    let nestedArray = [1, [2, 3], [[]],                       [4, [5]], 6];      let zeroFlat = nestedArray.flat(0);      document.write(      `Zero levels flattened array: ${zeroFlat}`);    document.write("<br>");      // 1 is the default value even    // if no parameters are passed    let oneFlat = nestedArray.flat(1);      document.write(      `One level flattened array: ${oneFlat}`);    document.write("<br>");      let twoFlat = nestedArray.flat(2);      document.write(      `One level flattened array: ${twoFlat}`);    document.write("<br>");      // No effect when depth is 3 or    // more since array is already    // flattened completely.    let threeFlat = nestedArray.flat(3);    document.write(      `Three levels flattened array: ${threeFlat}`);</script>
Output:
Zero levels flattened array: [1, [2, 3], [[]], [4, [5]], 6]
One level flattened array: [1, 2, 3, [], 4, [5], 6]
Two levels flattened array: [1, 2, 3, 4, 5, 6]
Three levels flattened array: [1, 2, 3, 4, 5, 6]

Note: For depth greater than 2, array remains the same, since it is already flattened completely.
Program 2: We can also remove empty slots or empty values in an array by using flat() method.
<script>    let arr = [1, 2, 3, , 4];    let newArr = arr.flat();    document.write(newArr);</script>
Output:
[1, 2, 3, 4]
Supported Browsers:
Google Chrome 69 and above
Edge 79 and above
Firefox 62 and above
Opera 56 and above
Safari 12 and above
ysachin2314
javascript-array
JavaScript-Methods
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?