Array Flatten in JavaScript

So let’s start from the very basic idea. When we talk about arrays, we usually think of a simple list of elements separated by commas. Something like [1, 2, 3, 4], clean and straightforward. But things start getting a bit layered when one of those elements itself becomes an array.

That is exactly what a nested array is.

If you have something like [1, 2, [3, 4], 5], then the third element is not just a number, it is another array. So now you have an array inside an array. That is your simplest form of a nested array. And this does not stop at just one level. You can go deeper like [1, [2, [3, [4]]]] and it keeps going depending on how complex the data is.

Now the problem starts when we try to work with such data.

Because honestly, dealing with nested arrays directly is not very convenient. Imagine you want to sum all numbers or apply some logic. You now have to handle multiple levels, check if something is an array, then go inside it, and so on. This is where flattening comes into picture.

Flattening simply means converting a nested array into a single level array. So instead of [1, 2, [3, 4], 5], you turn it into [1, 2, 3, 4, 5]. Everything comes out at the same level.

That is the whole idea. Take a complex structure and simplify it.

If you visualize it, think of nested arrays like boxes inside boxes. Flattening is just opening all the boxes and putting everything on the table.

Now coming to how JavaScript helps us here.

The .flat() method

This is the most direct way to deal with nested arrays. If you have an array and you call .flat() on it, JavaScript will remove one level of nesting.

For example:

const arr = [1, 2, [3, 4], 5];
console.log(arr.flat());
// [1, 2, 3, 4, 5]

What it does is it breaks that inner array and pulls its elements into the main array.

Now an interesting part is that .flat() can take an argument. That argument decides how many levels you want to flatten.

So if you have something deeper like:

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

If you do:

arr.flat(1)

It will only remove one level.

If you do:

arr.flat(2)

It will go two levels deep.

And if you are not sure how deep your nesting is, which honestly happens most of the time, you can just do:

arr.flat(Infinity)

This basically says flatten everything, no matter how deep it is.

This is why in real scenarios, people often go with Infinity because counting levels manually is not always practical.

The .flatMap() method

Now this one is slightly different. It combines two operations into one. First mapping, then flattening.

You already know that .map() applies a function to each element and returns a new array. The number of elements stays the same.

For example:

[1, 2, 3].map(x => x * 2)
// [2, 4, 6]

Now .flatMap() does something similar, but after mapping, it also flattens the result by one level.

So if your mapping function returns arrays, .flatMap() will merge them into a single array.

Example:

const arr = [1, 2, 3];

const result = arr.flatMap(x => [x, x * 2]);
console.log(result);
// [1, 2, 2, 4, 3, 6]

Here each element becomes an array, and then those arrays get flattened automatically.

One important thing to note is that .flatMap() only flattens one level. You cannot control depth here like .flat().

So if your nesting is deeper, .flatMap() alone will not solve everything.

Another approach you might see

Sometimes in interviews or even real projects, people do not use .flat() directly. Either because they want to show understanding or because of compatibility reasons.

A common way is using recursion.

The idea is simple. You go through each element. If it is not an array, you push it into a result. If it is an array, you call the same function again on it.

Something like this:

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

This works for any level of nesting and shows clear thinking.

Why flattening is actually useful

This is not just a theoretical thing. In real problems, data often comes nested.

APIs can return nested structures. UI components might generate nested lists. Even simple transformations can accidentally create nested arrays.

Before applying operations like filtering, reducing, or calculations, flattening makes the data easier to work with.

It is like cleaning your workspace before starting actual work.

Common interview scenarios

This topic shows up quite often, but not always in a direct way.

Sometimes they simply ask you to flatten an array without using built in methods. That is where recursion or loops come into play.

Sometimes they give you a nested structure and ask you to extract or sum values. If you understand flattening, the problem becomes much simpler.

Another variation is combining map and flatten logic, where .flatMap() becomes useful.

And in some cases, they check whether you know about Infinity in .flat() which is a small detail but tells a lot about practical exposure.

Closing thought

At the core of it, flattening is about reducing complexity. Nested arrays are not wrong, they are just harder to deal with directly. Once flattened, everything becomes linear and easier to process.

If you understand when to use .flat(), when .flatMap() fits, and how to manually approach the problem, you are already ahead for most real scenarios as well as interviews.

And honestly, once you start noticing nested arrays in real data, this concept stops being theoretical and becomes very practical.