Array Flatten in JavaScript (

When working with JavaScript, arrays are everywhere. But things get tricky when arrays start containing other arrays creating what we call nested arrays.

Handling nested arrays efficiently is an essential skill for any developer, especially when dealing with real-world data like APIs, file structures, or category hierarchies.

One of the most common operations in such cases is flattening an array.

In this article, we’ll deeply understand:

• What nested arrays are

• Why flattening is important

• Different ways to flatten arrays

• Step-by-step problem-solving thinking

• Interview-focused scenarios

What Are Nested Arrays?

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

Example

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

Here:

• [3, 4] is a nested array

• [5, [6, 7]] contains deeper nesting

---

Visualizing Nested Arrays

You can think of nested arrays like layers:

• Level 1 → Main array

• Level 2 → Arrays inside it

• Level 3 → Arrays inside those arrays

Why Flattening Arrays Is Useful

Flattening arrays is widely used in real-world applications:

Use Cases

• Processing API responses

• Working with hierarchical data

• Rendering UI lists

• Data transformation

Example

const categories = ["Electronics", ["Mobiles", ["Android", "iOS"]]];

Flattened:

["Electronics", "Mobiles", "Android", "iOS"]

---

What Does Flattening Mean?

Flattening means converting a nested array into a single-level array.

Before

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

After

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

---

Flatten Transformation Visualization

Different Approaches to Flatten Arrays

1. Using flat() (Built-in Method)

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

const result = arr.flat(Infinity);

console.log(result);

Explanation

• flat() flattens the array

• Infinity ensures all levels are flattened

2. Using Recursion (Interview Favorite)

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;
}

Why important?

• Tests problem-solving

• Common interview question

• Works without built-in methods

---

Step-by-Step Thinking

Example:

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

Steps:

1. Add 1

2. Go inside [2, [3, 4]]

3. Add 2

4. Go inside [3, 4]

5. Add 3, 4

Final Output:

[1, 2, 3, 4]

3. Using reduce() (Functional Approach)

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

4. Using Stack (Iterative Approach)

function flattenArray(arr) {
  const stack = [...arr];
  const result = [];

  while (stack.length) {
    const item = stack.pop();

    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      result.push(item);
    }
  }

  return result.reverse();
}

---

Common Interview Scenarios

Flatten without flat()

Use recursion or stack

Flatten to specific depth

arr.flat(2);

Flatten and remove duplicates

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

const result = [...new Set(arr.flat(Infinity))];

console.log(result);

Flatten tree-like structures

Used in:

• Comment systems

• File systems

• Nested APIs

Real-Life Example

const folders = ["docs", ["images", ["profile.png", "cover.jpg"]]];

Flattened:

["docs", "images", "profile.png", "cover.jpg"]

Performance Comparison

Method	Readability	Performance	Interview Importance
flat()	High	High	Low
Recursion	Medium	Medium	High
reduce()	High	Medium	Medium
Stack	Medium	High	High

Summary

• Nested arrays contain arrays inside arrays

• Flattening converts them into a single-level array

• Multiple approaches exist

• Recursion is most important for interviews

---

Conclusion

Array flattening is a fundamental concept that strengthens your understanding of recursion, iteration, and data transformation.

Mastering this will help you handle complex data structures with confidence in JavaScript.

Practice Questions

1. Flatten array without using flat()

2. Flatten array up to depth n

3. Flatten and sort array

4. Convert nested objects into flat arrays