JavaScript - flat() method

revision:

Category : array

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Syntax : 

        array.flat()
        array.flat(depth)

Parameters:

depth : optional. The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.

Examples:

            const arr1 = [0, 1, 2, [3, 4]];
            console.log(arr1.flat());
            // Expected output: Array [0, 1, 2, 3, 4]
            const arr2 = [0, 1, 2, [[[3, 4]]]];
            console.log(arr2.flat(2));
            // Expected output: Array [0, 1, 2, Array [3, 4]]

Practical examples

example: flattenig nested array.

code: 
                    <div>
                        <p id="flat-1"></p>
                        <p id="flat-2"></p>
                        <p id="flat-3"></p>
                        <p id="flat-4"></p>
                        <p id="flat-5"></p>
                        <p id="flat-6"></p>
                        <p id="flat-7"></p>
                        <p id="flat-8"></p>
                    </div>
                    <script>
                        const arr1 = [1, 2, [3, 4]];
                        arr1.flat();
                        // [1, 2, 3, 4]
                        document.getElementById("flat-1").innerHTML = "arr1: " + JSON.stringify(arr1); 
                        document.getElementById('flat-2').innerHTML = "new array 1: " + JSON.stringify(arr1.flat());
                        const arr2 = [1, 2, [3, 4, [5, 6]]];
                        arr2.flat();
                        // [1, 2, 3, 4, [5, 6]]
                        document.getElementById("flat-3").innerHTML = "arr2: " + JSON.stringify(arr2); 
                        document.getElementById('flat-4').innerHTML = "new array 2: " + JSON.stringify(arr2.flat());
                        const arr3 = [1, 2, [3, 4, [5, 6]]];
                        arr3.flat(2);
                        // [1, 2, 3, 4, 5, 6]
                        document.getElementById("flat-5").innerHTML = "arr3: " + JSON.stringify(arr3); 
                        document.getElementById('flat-6').innerHTML = "new array 3: " + JSON.stringify(arr2.flat(2));
                        const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
                        arr4.flat(Infinity);
                        // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        document.getElementById("flat-7").innerHTML = "arr4: " + JSON.stringify(arr4); 
                        document.getElementById('flat-8').innerHTML = "new array 4: " + JSON.stringify(arr4.flat(Infinity));
                    </script>

example: using flat() method on sparse arrays.

code: 
                    <div>
                        <p id="flat-9"></p>
                        <p id="flat-10"></p>
                        <p id="flat-11"></p>
                        <p id="flat-12"></p>
                        <p id="flat-13"></p>
                        <p id="flat-14"></p>
                        <p id="flat-15"></p>
                    </div>
                    <script>
                        const arr5 = [1, 2, , 4, 5];
                        console.log(arr5.flat()); // [1, 2, 4, 5]
                        document.getElementById("flat-9").innerHTML = "arr5: " + JSON.stringify(arr5); 
                        document.getElementById('flat-10').innerHTML = "new array 5: " + JSON.stringify(arr5.flat());
                        const array = [1, , 3, ["a", , "c"]];
                        console.log(array.flat()); // [ 1, 3, "a", "c" ]
                        document.getElementById("flat-11").innerHTML = "array: " + JSON.stringify(array); 
                        document.getElementById('flat-12').innerHTML = "new array : " + JSON.stringify(array.flat());
                        const array2 = [1, , 3, ["a", , ["d", , "e"]]];
                        console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ]
                        console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"]
                        document.getElementById("flat-13").innerHTML = "array2: " + JSON.stringify(array2); 
                        document.getElementById('flat-14').innerHTML = "new array 2: " + JSON.stringify(array2.flat());
                        document.getElementById('flat-15').innerHTML = "new array 2: " + JSON.stringify(array2.flat(2));
                    </script>

example: create a new array with the sub-array elements concatenated.

code: 
                    <div>
                        <p id="flat-16"></p>
                        <p id="flat-17"></p>
                        <p id="flat-18"></p>
                        <p id="flat-19"></p>
                        <p id="flat-20"></p>
                        <p id="flat-21"></p>
                    </div>
                    <script>
                        const myArr = [[1,2],[3,4],[5,6]];
                        document.getElementById("flat-16").innerHTML = "original arrays : " + JSON.stringify(myArr);
                        const newArr = myArr.flat();
                        document.getElementById("flat-17").innerHTML = "new array : " + newArr;
                        document.getElementById("flat-18").innerHTML = "new array : " + JSON.stringify(newArr);
            
                        const myArr1 = [1, 2, [3, [4, 5, 6], 7], 8];
                        document.getElementById("flat-19").innerHTML = "original arrays : " + JSON.stringify(myArr1);
                        const newArr1 = myArr1.flat(2);
                        document.getElementById("flat-20").innerHTML = "new array : " + newArr1;
                        document.getElementById("flat-21").innerHTML = "new array : " + JSON.stringify(newArr1);
            
                    </script>