Open In App
Related Articles

JavaScript Array flat() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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 array
const numbers = [['1', '2'], ['3', '4',
                ['5',['6'], '7']]];
 
const flatNumbers= numbers.flat(Infinity);
console.log(flatNumbers);

                    

Output
[
  '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 passed
let 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}`);

                    

Output
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);

                    

Output
[ 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.



Last Updated : 20 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads