JavaScript Array flat() Method

Below is the example of the Array flat() method.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        // Creating multilevel array
        const numbers = [['1', '2'], ['3', '4',
                         ['5',['6'], '7']]];
      
        const flatNumbers= numbers.flat(Infinity);
        document.write(flatNumbers);
    </script>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    • 

  • Ourtput:

    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.













                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<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> 



















                        chevron_right







                        filter_none










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.













                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<script> 


    let arr = [1, 2, 3, , 4]; 


    let newArr = arr.flat(); 


    document.write(newArr); 


</script> 



















                        chevron_right







                        filter_none










Output:


[1, 2, 3, 4]


Supported Browsers:


    

  • Google Chrome
    • 

  • Mozilla Firefox
    • 

  • Safari
    • 

  • Opera
    • 

  • Microsoft Edge
    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
prerak_jain
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.