Array flattening using loops and recursion in JavaScript

Array flattening converts nested arrays into a single-level array. JavaScript provides multiple approaches including loops, recursion, and built-in methods.

Problem Overview

Given a nested array with mixed data types including falsy values, we need to flatten it completely:

const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];
console.log("Input:", arr);

Input: [ [ 1, 2, 3 ], [ 4, 5, [ 5, false, 6, [Array] ] ], [ 6 ] ]

Expected output should be a flat array preserving all values including false and null:

[1, 2, 3, 4, 5, 5, false, 6, 5, 8, null, 6]

Using Recursive Function

A recursive approach checks each element and recursively flattens nested arrays:

function flattenArray(arr) {
    let result = [];
    
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(...flattenArray(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    
    return result;
}

const nestedArray = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];
console.log(flattenArray(nestedArray));

[
  1, 2, 3, 4,
  5, 5, false, 6,
  5, 8, null, 6
]

Using Array Prototype Extension

We can extend Array.prototype to add a custom flatten method:

const flatten = function() {
    let res = [];
    for (let i = 0; i < this.length; i++) {
        if (Array.isArray(this[i])) {
            res.push(...this[i].flatten());
        } else {
            res.push(this[i]);
        }
    }
    return res;
};

Array.prototype.flatten = flatten;

const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];
console.log(arr.flatten());

[
  1, 2, 3, 4,
  5, 5, false, 6,
  5, 8, null, 6
]

Using Built-in flat() Method

JavaScript's built-in flat() method can flatten arrays with specified depth:

const nestedArray = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];

// Flatten completely using Infinity depth
console.log("Using flat(Infinity):");
console.log(nestedArray.flat(Infinity));

// Compare with limited depth
console.log("Using flat(2):");
console.log(nestedArray.flat(2));

Using flat(Infinity):
[
  1, 2, 3, 4,
  5, 5, false, 6,
  5, 8, null, 6
]
Using flat(2):
[
  1, 2, 3, 4, 5,
  5, false, 6, [ 5, 8, null ],
  6
]

Comparison

Key Points

• Recursive approach gives full control over flattening logic
• Built-in flat() is simpler but requires modern browser support
• Use Array.isArray() to properly detect nested arrays
• Spread operator (...) efficiently merges flattened results

Conclusion

Array flattening can be achieved through recursion for maximum control or built-in flat() for simplicity. The recursive approach works in all environments and preserves all data types including falsy values.