Array Flatten in JavaScript

UpdatedMarch 26, 2026

•2 min read•View as Markdown

Satpalsinh Rana

Frontend Developer 💻 | Fueled by curiosity and Tea ☕ | Always learning and exploring new technologies.

Part of seriesJavaScript

Comments

Join the discussion

No comments yet. Be the first to comment.

JavaScript

Part 1 of 24

Master JavaScript from the ground up with a structured, easy-to-follow learning path designed for serious developers. This series starts with core fundamentals like variables, data types, and control flow, then gradually moves into deeper topics such as functions, scope, prototypes, asynchronous programming, and how the JavaScript engine works internally. Each lesson focuses on clarity and real understanding. You will learn not only how to write JavaScript, but why it behaves the way it does. Concepts are explained using simple examples, practical use cases, and clean coding patterns that reflect real-world development.

Up next

Error Handling in JavaScript

This Article will help you to write good code.

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.

Array Flatten in JavaScript

Comments

JavaScript

Error Handling in JavaScript

More from this blog

AI 101

Linux from my Eyes

JWT Authentication

Storing Uploaded Files and Serving Them in Express

Handling File Uploads in Express with Multer

What Exactly Are Nested Arrays?

Why Bother Flattening?

Transformation

How to Flatten Arrays:

`flat()`

`reduce()` and `concat()`

`toString()` and `split()`

Command Palette

Comments

JavaScript

Error Handling in JavaScript

More from this blog

What Exactly Are Nested Arrays?

Why Bother Flattening?

Transformation

How to Flatten Arrays:

flat()

reduce() and concat()

toString() and split()

`flat()`

`reduce()` and `concat()`

`toString()` and `split()`