Array Flatten in JavaScript

What Exactly Are Nested Arrays?

A nested array (or a multi-dimensional array) is simply an array that contains other arrays as its elements.

Think of a standard array as a single-story egg carton. A nested array is more like a shipping crate filled with smaller boxes, some of which might contain even smaller boxes.

Example: const nested = [1, [2, 3], [[4, 5], 6]];

In the example above, 1 is at the top level, but 4 and 5 are buried three levels deep.

Why Bother Flattening?

Flattening is the process of reducing the dimensionality of an array. We do this because:

• Easier Iteration: It’s much simpler to run a single .map() or .forEach() on a flat list than to write recursive loops for every level.

• Data Consistency: Many UI components (like dropdowns or tables) expect a simple, linear array of items.

• Searchability: Finding a specific value is faster when you don't have to check every "sub-box."

Transformation

When we "flatten," we are essentially taking every element from the inner arrays and pushing them into a new, single-level array while maintaining their original order.

How to Flatten Arrays:

flat()

Introduced in ES2019, the .flat() method is the gold standard. By default, it flattens one level deep, but you can pass a depth or use Infinity to go all the way.

const multidimensional = [1, [2, [3, [4]]]];

console.log(multidimensional.flat()); // [1, 2, [3, [4]]]

console.log(multidimensional.flat(Infinity)); // [1, 2, 3, 4]

reduce() and concat()

Before .flat() existed, this was the go-to manual method. It helps you understand the logic of the transformation: "Take the accumulator, and merge it with the current item."

const nested = [1, [2, 3], [4]];
const flat = nested.reduce((acc, val) => acc.concat(val), []);

toString() and split()

If your array only contains numbers or strings, you can convert the whole thing to a string (which removes brackets) and then split it back.

Note: Use this with caution, as it turns everything into strings!

When you see a nested structure, just ask yourself about the depth.

• Is it always one level deep? Use [].concat(...arr).

• Is the depth unknown? Use .flat(Infinity).

• Are you on an older environment (like legacy IE)? You'll need a recursive polyfill.

Flattening isn't just about making arrays shorter; it’s about making your data usable.