Array Flatten in JavaScript

Arrays are one of the most commonly used data structures in JavaScript. Sometimes, arrays can contain other arrays inside them. These are called nested arrays.

Working with nested arrays is very common in real-world applications and coding interviews.

In this article, we’ll learn:

• What nested arrays are

• Why flattening arrays is useful

• What array flattening means

• Different ways to flatten arrays

• Common interview scenarios

Let’s start with the basics.

---

What Are Nested Arrays?

A nested array is simply an array that contains other arrays inside it.

Example:

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

Visual representation:

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

Here:

• 1 and 2 are normal elements

• [3, 4] and [5, 6] are arrays inside the main array

---

Why Is Flattening Arrays Useful?

Sometimes we want all elements in a single array instead of nested arrays.

Example:

[1, 2, [3, 4]]

Flattened version:

[1, 2, 3, 4]

Flattening is useful when:

• Processing API data

• Working with matrix-like structures

• Preparing data for loops

• Solving coding interview problems

---

What Does Flattening Mean?

Flattening means converting:

Nested Array
      ↓
Single-Level Array

Example:

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

Flattened result:

[1, 2, 3, 4]

---

Visual Transformation

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

        ↓

[1, 2, 3, 4, 5]

The nested structure becomes a simple flat array.

---

Approach 1: Using flat()

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

Example:

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

let result = arr.flat();

console.log(result);

Output:

[1, 2, 3, 4]

---

Flattening Deeper Arrays

Example:

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

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

Output:

[1, 2, 3, 4]

The number 2 tells JavaScript how deep to flatten.

---

Using Infinity

If we don’t know the depth, we can use Infinity.

Example:

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

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

Output:

[1, 2, 3, 4, 5]

---

Approach 2: Using a Loop

We can flatten arrays manually using loops.

Example:

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

let result = [];

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

console.log(result);

Output:

[1, 2, 3, 4]

This approach helps us understand the flattening process step by step.

---

Step-by-Step Thinking

Example:

[1, [2, 3], 4]

Process:

Take 1 → add to result

Take [2,3]
  → extract 2
  → extract 3

Take 4 → add to result

Final result:

[1, 2, 3, 4]

This problem-solving approach is important for interviews.

---

Approach 3: Using Recursion

Recursion is commonly used for deeply nested arrays.

Example:

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

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

  return result;
}

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

console.log(flattenArray(arr));

Output:

[1, 2, 3, 4, 5]

---

How Recursion Works

flatten([1,[2,[3]]])

→ take 1
→ flatten([2,[3]])
       → take 2
       → flatten([3])
              → take 3

The function keeps going deeper until all nested arrays are processed.

---

Common Interview Scenarios

Array flattening is a very popular interview question.

Interviewers may ask:

• Flatten an array without using flat()

• Flatten only one level

• Flatten deeply nested arrays

• Write a recursive solution

• Optimize the flattening process

Example interview input:

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

Expected output:

[1, 2, 3, 4]

---

flat() vs Recursive Approach

Method	Easy to Write	Handles Deep Nesting	Interview Friendly
flat()	✅	✅	❌
Loop	✅	❌	✅
Recursion	Moderate	✅	✅

---

Practice Assignment

Try these exercises yourself.

---

1. Flatten One Level

Input:

[1, 2, [3, 4]]

Expected Output:

[1, 2, 3, 4]

---

2. Flatten Deeply Nested Arrays

Input:

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

Expected Output:

[1, 2, 3, 4, 5]

---

3. Try Without Using flat()

Use:

• loops

• recursion

• concat()

This will improve your problem-solving skills.

---

And now, you know what Array Flatten in JavaScript is.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!