When working with data in JavaScript, you will often come across arrays inside other arrays. This structure is known as a nested array. While nested arrays can be useful for organizing complex data, sometimes we need to convert them into a single, flat list.

This process is called array flattening.

Understanding how to flatten arrays is not only useful in real-world programming but also a common topic in technical interviews.

---

What Nested Arrays Are

A nested array is simply an array that contains other arrays as elements.

Example:

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

Here, the third element is another array: [3, 4].

A deeper nested structure might look like this:

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

Visually, you can imagine it like this:

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

Instead of a simple list, the values are arranged in layers.

---

Why Flattening Arrays Is Useful

Nested arrays appear frequently in real-world applications.

Examples include:

• Data returned from APIs

• File directory structures

• Multi-level menu systems

• Tree-like data structures

However, many algorithms or operations require a simple one-dimensional list.

For example, suppose we have:

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

Flattening it gives:

[1, 2, 3, 4, 5]

This makes it easier to perform operations such as:

• Searching

• Filtering

• Mapping

• Calculating totals

Flattening simplifies the data so it can be processed more easily.

---

The Concept of Flattening Arrays

Flattening means removing the nesting and collecting all elements into a single array.

Let’s break it down step by step.

Example nested array:

[1, [2, 3], 4]

Step 1 — Read the first element:

1

Step 2 — Encounter nested array [2,3]

Extract its elements → 2, 3

Step 3 — Continue reading remaining elements:

4

Final flattened array:

[1, 2, 3, 4]

The goal is to pull elements out of nested structures and place them into one array.

---

Approach 1: Using Array.flat()

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

Example:

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

const flattened = arr.flat();

console.log(flattened);

Output:

[1, 2, 3, 4]

If the array has deeper nesting:

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

You can specify the depth:

arr.flat(2);

Output:

[1, 2, 3, 4, 5]

There is also a shortcut to flatten completely:

arr.flat(Infinity);

---

Approach 2: Using a Loop

Flattening can also be done manually using loops.

Example:

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

for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
    for (let j = 0; j < arr[i].length; j++) {
      result.push(arr[i][j]);
    }
  } else {
    result.push(arr[i]);
  }
}

console.log(result);

Output:

[1, 2, 3, 4]

This approach helps you understand the logic behind flattening.

---

Approach 3: Using Recursion

For deeply nested arrays, recursion is a common approach.

Example:

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

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

  return result;
}

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

console.log(flattenArray(arr));

Output:

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

Recursion works well because nested arrays can contain other nested arrays at any depth.

---

Thinking About the Problem

When solving flattening problems, it helps to think in terms of two cases.

For each element in the array:

1. If it is not an array
   → add it directly to the result.

2. If it is an array
   → process it again until all nested values are extracted.

This mindset helps break down complex nested structures step by step.

---

Common Interview Scenarios

Flattening arrays appears in many coding interviews.

Typical variations include:

Flatten a 2D array

Input:

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

Output:

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

---

Flatten deeply nested arrays

Input:

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

Output:

[1,2,3,4]

---

Flatten only one level

Input:

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

Output:

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

---

Key Takeaways

Array flattening is an important concept when dealing with nested data structures.

The main ideas to remember are:

• Nested arrays contain arrays inside arrays.

• Flattening converts them into a single list.

• JavaScript provides flat() for quick solutions.

• Understanding loops and recursion helps solve flattening problems manually.

Mastering this concept improves your problem-solving skills and prepares you for many common JavaScript interview questions.