Array Flatten in JavaScript (Super Simple + Deep Understanding)

Imagine you have a box of items.

Inside that box, there are more small boxes. And inside those boxes, even more boxes.

It looks like this:

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

Now imagine you open every box and take all items out, and keep them in one place:

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

This process is called flattening an array.

---

What is a Nested Array?

A nested array means:

an array that contains another array inside it

Let’s understand slowly.

[1, [2, 3], 4]

• 1 is just a normal value

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

• 4 is again a normal value

So here, one array is sitting inside another array.

That’s why we call it a nested array (like nested boxes).

---

Why Flattening is Needed?

When arrays are nested, working with them becomes difficult.

For example:

[1, [2, 3]]

If you try to loop over it:

• first you get 1

• then you get [2, 3] (which is still an array, not a number)

Now you have to do extra work to go inside it.

This creates problems:

• code becomes more complex

• more conditions are needed

• harder to understand

Flattening solves this by turning everything into a simple, one-level array.

---

What Does Flatten Actually Mean?

Flatten means:

take all values from inside arrays (even deep ones) and bring them into one single level

Let’s visualize:

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

Step by step:

• open [2, [3, 4]]

• then open [3, 4]

Final result:

[1, 2, 3, 4]

No more inner arrays. Everything is flat.

---

Approach 1: Using .flat() (Easiest Way)

---

Example

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

console.log(arr.flat(2));

---

🧠 Understand Slowly

.flat(2) means:

• remove nesting up to 2 levels

• bring everything to the top

---

Why 2?

Because nesting goes 2 levels deep:

• first level → [2, 3]

• second level → [5, 6]

---

Output

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

---

If you don’t know depth

arr.flat(Infinity);

This removes all nesting, no matter how deep it is.

---

Approach 2: Using Loop (Step-by-Step Thinking)

---

Example

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

for (let item of arr) {
  if (Array.isArray(item)) {
    result.push(...item);
  } else {
    result.push(item);
  }
}

console.log(result);

---

Let’s Understand Clearly

We go through each item one by one:

1. If the item is not an array, we just add it

2. If the item is an array, we open it and add its values

---

Important Limitation

This only works for:

[1, [2, 3]]

It will NOT work for deeper nesting like:

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

Because it opens only one level.

---

Approach 3: Recursion (Most Important)

---

First Understand Recursion

Recursion means:

a function calling itself again and again until the problem is solved

---

Real-Life Thinking

If you see a box:

• open it

• if inside you find another box → open again

• keep doing until no boxes left

---

Code

function flatten(arr) {
  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

---

Step-by-Step Flow

Take this:

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

1. 1 → normal → add to result

2. [2, [3, 4]] → array → call function again

3. Inside that:

   • 2 → add

   • [3, 4] → call again

4. Finally all values are collected

---

This keeps going until everything becomes flat.

Output

[1, 2, 3, 4]

---

Why This is Powerful

Because it works for:

• any depth

• any structure

This is the real interview solution

---

Approach 4: Using reduce() (Advanced Thinking)

---

Code

const flatten = (arr) => {
  return arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      return acc.concat(flatten(item));
    } else {
      return acc.concat(item);
    }
  }, []);
};

---

Explanation (Simple)

• reduce builds a new array step by step

• if item is array → flatten it

• if not → add directly

---

Same logic as recursion, just written differently

---

Final Thought

Flattening is not just about arrays.

It teaches you how to:

• break problems

• think step-by-step

• handle nested data