Array Flatten in JavaScript

In this article we are gonna study a very common JavaScript problem called Array Flattening. Now initially this may feel like a very small/simple topic, but surprisingly this gets asked very frequently in interviews because it tests multiple things together like arrays, recursion, iteration and problem solving thinking.

What are Nested Arrays?

Now before understanding flattening, we first need to understand what nested arrays actually are. Suppose we have:

const arr = [1, 2, 3];

This is a normal array. But now suppose we do this:

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

Now this array contains other arrays inside itself. Which means this is a nested array. And nesting can go even deeper.

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

Now many initially get confused while visualizing this. So roughly this behaves something like:

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

Now here values are buried at different nesting levels. And flattening basically means:

"Bring everything into one single level."

So the flattened version becomes:

[1, 2, 3, 4, 5]

Why is Flattening useful?

This is because in real applications data often comes nested. For example:

1. API responses

2. Comments/replies

3. Category trees

4. File structures

5. Recursive data

And many operations become easier once data is converted into one single level array. For example searching/filtering/mapping values becomes much simpler.

Using flat()

Now modern JavaScript already provides a built in method called:

flat()

For example:

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

console.log(arr.flat());

Output:

[1, 2, 3, 4, 5]

Whilst this solved our concer of flattening the array for this testcase, it doesn't work the same everywhere, as there is a small catch. Suppose we have:

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

Now doing:

arr.flat();

only flattens one level. Output:

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

Because by default flat() only flattens depth 1. Now if we want deeper flattening:

arr.flat(2);

Output:

[1, 2, 3, 4, 5]

And if we want complete flattening regardless of depth:

arr.flat(Infinity);

Visualizing Flattening

Solving manually using Recursion

Now interviewers very commonly ask flattening without using flat(). Because they mainly want to test your thinking/problem solving ability. Now suppose we want to manually flatten:

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

The basic idea becomes:

1. Traverse every element

2. If element is normal value → push it

3. If element is array → flatten it again

And this "flatten it again" part is exactly where recursion enters.

For example:

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

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

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

Output:

[1, 2, 3, 4, 5]

This may look slightly scary initially, but the core idea is honestly quite simple. Whenever we encounter another array:

flatten(item)

simply solves the smaller version of the same problem again. Which is one of the biggest signs of recursion.

Common Interview Thinking

Array flattening is not just about memorizing code. Interviewers usually want to check whether you can:

1. Break large problems into smaller ones

2. Think recursively

3. Traverse nested structures

4. Handle dynamic depth

Because nested structures appear everywhere in programming. And flattening is usually one of the first problems where we start understanding recursive thinking properly.

Conclusion

With this we now understand what nested arrays are and what array flattening actually means in JavaScript. We saw why flattening becomes useful in real world applications, how JavaScript provides the built in flat() method, and how flattening can also be solved manually using recursion. Although this may initially look like a small problem, it introduces very important problem solving concepts like recursion and nested traversal which appear very frequently in interviews and real applications.

I hope you enjoyed it!

Thank You.