Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript Array flat() Method

  • Last Updated : 29 Oct, 2021

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Example:




    <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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!