The Javascript 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 the functional programming paradigm of JavaScript. Before the 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.
Below is an example of the Array flat() method.
Example 1: In this example, we will see the basic implementation of the Array flat() method.
javascript
// Creating multilevel arrayconst numbers = [['1', '2'], ['3', '4', ['5',['6'], '7']]];const flatNumbers= numbers.flat(Infinity);console.log(flatNumbers); |
[ '1', '2', '3', '4', '5', '6', '7' ]
Example 2: The following code snippet shows, how the Array flat() method works.
javascript
let nestedArray = [1, [2, 3], [[]], [4, [5]], 6];let zeroFlat = nestedArray.flat(0);console.log(`Zero levels flattened array: ${zeroFlat}`);// 1 is the default value even// if no parameters are passedlet oneFlat = nestedArray.flat(1);console.log(`One level flattened array: ${oneFlat}`);let twoFlat = nestedArray.flat(2);console.log(`Two level flattened array: ${twoFlat}`);// No effect when depth is 3 or// more since array is already// flattened completely.let threeFlat = nestedArray.flat(3);console.log(`Three levels flattened array: ${threeFlat}`); |
Zero levels flattened array: 1,2,3,,4,5,6 One level flattened array: 1,2,3,,4,5,6 Two level flattened array: 1,2,3,4,5,6 Three levels flattened array: 1,2,3,4,5,6
Note: For depth greater than 2, the array remains the same, since it is already flattened completely.
Example 3: We can also remove empty slots or empty values in an array by using the flat() method.
javascript
let arr = [1, 2, 3, , 4];let newArr = arr.flat();console.log(newArr); |
[ 1, 2, 3, 4 ]
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.
Supported Browsers:
- Google Chrome 69 and above
- Edge 79 and above
- Firefox 62 and above
- Opera 56 and above
- Safari 12 and above
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
