📌 Introduction

In JavaScript, arrays can contain other arrays inside them. These are called nested arrays.

A very common and important operation is to flatten these nested arrays into a single-level array. This concept is widely used in real-world applications and frequently asked in coding interviews.

---

🧩 What Are Nested Arrays?

A nested array is simply an array inside another array.

Example:

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

Here:

• [2, 3] is a nested array

• [5, 6] is nested even deeper

---

🤔 Why Flatten Arrays?

Flattening arrays is useful when:

• Working with API or JSON data

• Simplifying complex data structures

• Applying operations like map, filter, etc.

• Solving coding interview problems

Before Flatten:

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

After Flatten:

[1, 2, 3, 4, 5]

---

🧠 Concept of Flattening

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

---

🔧 Different Ways to Flatten Arrays

---

1️⃣ Using flat() (Built-in Method)

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

const flatArr = arr.flat(Infinity);

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

✔️ Notes:

• flat(depth) flattens up to a given depth

• Infinity ensures complete flattening

• Easy and fast

• Not always allowed in interviews

---

2️⃣ Using Recursion (Most Important)

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

🧠 How it works:

• Loop through array

• If element is an array → recursively flatten it

• If not → add it to result

---

3️⃣ Using reduce()

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

console.log(flatten([1, [2, 3], [4, [5, 6]]]));

✔️ Why use this?

• Functional programming approach

• Cleaner and concise

---

4️⃣ Using Stack (Iterative Approach)

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

  while (stack.length) {
    let next = stack.pop();

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

  return result.reverse();
}

console.log(flatten([1, [2, 3], [4, [5, 6]]]));

✔️ Advantage:

• Avoids recursion

• Better for large datasets

---

💼 Common Interview Scenarios

🔹 Flatten to Specific Depth

arr.flat(2);

---

🔹 Flatten Without Built-in Methods

Use recursion or stack approach.

---

🔹 Flatten and Remove Duplicates

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

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

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

---

⚠️ Common Mistakes

• Not checking Array.isArray()

• Using flat() in restricted interviews

• Ignoring deeply nested arrays

---

🧪 Practice Examples

Example 1:

Input:  [1, [2, [3, [4]]]]
Output: [1, 2, 3, 4]

---

Example 2:

Input:  [[['a']], ['b'], 'c']
Output: ['a', 'b', 'c']

🔥 Top 5 Array Flattening Interview Questions in JavaScript

---

1️⃣ Flatten a Nested Array Without Using flat()

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

---

2️⃣ Flatten Array Using reduce()

const flatten = (arr) => {
  return arr.reduce((acc, curr) => {
    return Array.isArray(curr)
      ? acc.concat(flatten(curr))
      : acc.concat(curr);
  }, []);
};

---

3️⃣ Flatten Array to a Specific Depth

function flattenDepth(arr, depth) {
  if (depth === 0) return arr;

  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flattenDepth(item, depth - 1));
    } else {
      result.push(item);
    }
  }

  return result;
}

---

4️⃣ Flatten Array Using Stack (Iterative)

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

  while (stack.length) {
    let next = stack.pop();

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

  return result.reverse();
}

---

5️⃣ Flatten and Remove Duplicates

function flattenUnique(arr) {
  const flat = arr.flat(Infinity);
  return [...new Set(flat)];
}

---

🏁 Conclusion

Array flattening is a must-know JavaScript concept.

🔑 Key Takeaways:

• Use flat() for quick solutions

• Master recursion for interviews

• Use stack approach for optimization