Open In App
Related Articles

Underscore.js _.flatten() Function

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

Underscore.js _.flatten() function is an inbuilt function in the Underscore.js library of JavaScript that is used to flatten an array that is nested to some level. The resultant array will have no depth. It will be completely flattened. If pass the shallow parameter then the flattening will be done only till one level. The depth of an array is given by the number of square brackets. Example: array[10, [20]] contains 10 elements of 1 depth as it is inside only a single bracket ([]) whereas the element 20 has depth 2.

Syntax:

_.flatten(array, [shallow]);

Parameters:

  • array: This parameter is used to hold the array elements.
  • shallow: It is used to flatten an array into a single level.

Return value:

It returns the flattened array to either one level or all levels.

Passing a list without shallow parameter _.flatten() function:

The _.flatten() function is used to make the nested array flattened. It will take the array and remove all its depth to make it at 1 level. Since the second parameter is not given all it’s depth will be reduced.

Example: This example shows passing a list without shallow parameter _.flatten() function.

html

<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        console.log(_.flatten([1, [2], [3, [4, [5, [6, [7]]]]]]));
    </script>
</body>
 
</html>

                    

Output:

Passing the second parameter to the _.flatten() function:

Passing the second parameter to the function so the n depth array will be flattened to n-1 depth. In the below example, the elements 1, 2 and 3 are enclosed inside only 1 bracket so they will no depth. The element 4 has 2 depths in the given array so it will have only 1 depth now and hence it will not be seen with the 1, 2 and 3 elements. the 5 element has 3 depth so in the resultant array will have 2 depth. Similarly, depth of 6th element is 6. And the last element 7 has 5 depth so it will be displayed at the inner most array.

Example: This example shows passing the second parameter to the _.flatten() function.

html

<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        console.log(_.flatten([1, [2], [3, [4, [5, [6, [7]]]]]], true));
    </script>
</body>
 
</html>

                    

Output:

Another Example using shallow parameter:

In this example element 1 has depth 1 so it will be displayed at the starting level along with an array of 2 elements. The 1st element contains 2 element, where as the second element again has 2 elements. The first element is the 3 and the second also is having 2 elements in an array. Likewise the array also has 4 and an array of elements. Keep going like this, then the final array will contain element 7.

Example: This example shows use of shallow parameter.

html

<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        console.log(_.flatten([1, [[[2], [3, [4, [5, [6, [7]]]]]]]], true));
    </script>
</body>
 
</html>

                    

Output:

Another example to the _.flatten() function with shallow parameter:

In this example the elements 1, 4, 6 can be seen at the first level as their depth is 1. Other than these the first level contains an array of 2 elements and 2 arrays of 1 element each. The array of size 2 contains element 2 and 3 at the next level. One of the array of one size contains 5 and the other contains 7 at the next level as their original depth was 2.

Example: This example shows the use of _.flatten function with shallow parameter.

html

<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        console.log(_.flatten([1, [[[2], [3]]], [4, [5]], [6, [7]]], true));
    </script>
</body>
 
</html>

                    

Output:



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