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

    
    

  • 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


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


Output:

[1, 2, 3, 4]

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera
  • Microsoft Edge

full-stack-img




My Personal Notes arrow_drop_up

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.