Array Flatten in JavaScript

When working with arrays in JavaScript, you’ll often come across nested arrays — arrays inside arrays.

At first, they may look simple. But as soon as you need to process all the values together, nested arrays can become tricky.

That’s where array flattening comes in.

Flattening helps convert a nested array into a single, simpler array, making your data easier to work with.

In this article, we’ll understand:

• What nested arrays are

• Why flattening arrays is useful

• The concept of flattening arrays

• Different approaches to flatten arrays

• Common interview scenarios

• Problem-solving mindset for flattening

---

What Are Nested Arrays?

A nested array is simply an array that contains one or more arrays inside it.

Example:

const arr = [1, [2, 3], [4, 5]];

Here:

• 1 is a normal value

• [2, 3] is an array inside the main array

• [4, 5] is another array inside the main array

So this is called a nested array.

---

Visualizing a Nested Array

Think of it like boxes inside a bigger box:

const arr = [1, [2, 3], [4, 5]];

You can imagine it like this:

• Main array

  • 1

  • Small array → 2, 3

  • Small array → 4, 5

This structure is useful in many cases, but sometimes you need all values in one single list.

---

What Does “Flatten” Mean?

To flatten an array means:

Convert nested arrays into a single-level array

Example:

const arr = [1, [2, 3], [4, 5]];

Flattened version:

[1, 2, 3, 4, 5]

So:

• Nested structure is removed

• All values come into one array

---

Why Flattening Arrays Is Useful

Flattening is useful because nested arrays are harder to process in many real-world tasks.

Without Flattening

If your data looks like this:

const scores = [[10, 20], [30, 40], [50]];

And you want:

• total score

• max score

• average score

• loop through all values

It’s harder because values are split across multiple arrays.

---

After Flattening

[10, 20, 30, 40, 50]

Now it becomes easy to:

• use reduce()

• use Math.max()

• filter values

• sort values

• search values

---

Real-World Use Cases of Flattening

Flattening arrays appears more often than beginners realize.

Common examples:

• API response data

• Category/subcategory lists

• Student marks grouped by subjects

• Comments with nested replies

• Menu items grouped by sections

• Product variations

• Merging results from multiple sources

Example:

const categories = [
  ['HTML', 'CSS'],
  ['JavaScript', 'React'],
  ['Node.js']
];

Flattened:

['HTML', 'CSS', 'JavaScript', 'React', 'Node.js']

This is much easier to display or search.

---

Understanding the Flattening Concept Step by Step

Let’s take a simple example:

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

Step 1: Start with an empty result

[]

Step 2: Read 1

It is not an array

• Put it directly into result

[1]

Step 3: Read [2, 3]

This is an array

• Open it and take its values one by one

[1,2,3]

Step 4: Read 4

• Not an array

• Add directly

[1,2,3,4]

final output:

[1,2,3,4]

This is the core thinking behind flattening.

---

Different Approaches to Flatten Arrays in JavaScript

There are multiple ways to flatten arrays.

1. Using flat() (Modern and Easiest)

JavaScript provides a built-in method called flat().

Example:

const arr = [1, [2, 3], [4, 5]];

const result = arr.flat();

console.log(result); // [1, 2, 3, 4, 5]

How flat() Works

By default:

arr.flat();

It flattens one level deep.

That means:

 [1, [2, 3], [4, 5]];

becomes

[1, 2, 3, 4, 5]

2. Flattening Deeper Nested Arrays with flat(depth)

What if arrays are nested inside nested arrays?

Example:

const arr = [1, [2, [3, 4]], 5];

If you use:

arr.flat();

Output:

[1, 2, [3, 4], 5]

Why?

Because flat() only removes one level by default.

---

Use Depth:

const result = arr.flat(2);

console.log(result); // [1, 2, 3, 4, 5]

Here:

• flat(1) → one level

• flat(2) → two levels

• flat(3) → three levels

---

3. Flatten Completely with Infinity

If you don’t know how deeply nested the array is, use:

const arr = [1, [2, [3, [4, 5]]]];

const result = arr.flat(Infinity);

console.log(result); // [1, 2, 3, 4, 5]