Understanding Nested Arrays and How to Flatten Them in JavaScript

Arrays are one of the most commonly used data structures in JavaScript. As you start solving more complex problems, you will often encounter nested arrays. Understanding how they work and how to flatten them is an important skill for writing efficient JavaScript code and solving interview problems.

In this article, we will cover:

• What nested arrays are

• Why flattening arrays is useful

• The concept of flattening arrays

• Different approaches to flatten arrays

• Common interview scenarios

---

What Are Nested Arrays?

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

Example:

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

Here, the array contains two other arrays:

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

Nested arrays can also be deeper:

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

This structure creates multiple levels of arrays inside arrays.

---

Why Flattening Arrays Is Useful

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

Example:

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

After flattening:

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

Flattening arrays is useful in many real-world situations:

• Processing data from APIs

• Handling hierarchical data

• Simplifying loops and transformations

• Preparing data for algorithms

Many coding interviews also include problems related to flattening arrays.

---

Concept of Flattening Arrays

The idea behind flattening is straightforward.

Whenever we encounter an array inside another array, we extract its elements and place them into the main array.

Example nested array:

[1, [2, 3], 4]

Step-by-step flattening:

1. Start with an empty array

2. Read elements one by one

3. If the element is not an array, add it to the result

4. If the element is an array, take out its elements and process them

Final result:

[1, 2, 3, 4]

This process continues until no nested arrays remain.

---

Approach 1: Using the Built-in flat() Method

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

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

const result = arr.flat();

console.log(result);

Output:

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

If arrays are nested deeper, you can specify the depth.

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

const result = arr.flat(Infinity);

This flattens arrays of any depth.

---

Approach 2: Using Recursion

Recursion is a common technique used in interview questions.

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

console.log(flattenArray(arr));

Output:

[1, 2, 3, 4, 5]

How it works:

1. Loop through each element

2. If the element is an array, call the function again

3. If it is not an array, push it into the result

This approach handles arrays of any depth.

---

Approach 3: Using reduce()

Another functional programming approach uses reduce().

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

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

console.log(flattenArray(arr));

This approach is compact but may be slightly harder to understand for beginners.

---

Visual Example of Flattening

Consider this nested array:

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

Step-by-step flattening:

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

After first level:
[1, 2, 3, 4, [5, 6]]

Final result:
[1, 2, 3, 4, 5, 6]

Breaking the process into steps helps understand how flattening works internally.

---

Common Interview Scenarios

Flattening arrays appears in many interview problems.

Some common variations include:

1. Flatten an array without using flat()

You may be asked to implement the logic manually using recursion or loops.

2. Flatten arrays to a specific depth

Example:

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

Output:

[1, 2, [3]]

3. Flatten arrays with mixed data types

Example:

[1, ["a", ["b", "c"]], 2]

Expected output:

[1, "a", "b", "c", 2]

Interviewers often use these questions to test your understanding of recursion, arrays, and problem-solving skills.

---

Conclusion

Nested arrays are a common structure in JavaScript, especially when dealing with hierarchical or complex data. Learning how to flatten them helps simplify data processing and improves your problem-solving ability.

Key takeaways:

• Nested arrays contain arrays inside arrays

• Flattening converts them into a single-level array

• JavaScript provides the flat() method for easy flattening

• Recursion and reduce() are common manual approaches

• Flattening arrays frequently appears in coding interviews

Understanding these concepts will make you more comfortable working with arrays and solving algorithmic problems in JavaScript.