# Array Flatten in JavaScript

When working with arrays, sometimes we don’t get a simple flat array.

Instead, we get **nested arrays**.

That means arrays inside arrays.

Example:

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

Now this is not a simple array anymore.

It has multiple levels.

So if we want all values in a single list, we need to **flatten** it.

* * *

# What are Nested Arrays

A nested array is just an array that contains another array inside it.

Example:

```javascript
const arr = [1, [2, 3], 4]
```

Structure looks like:

![](https://cdn.hashnode.com/uploads/covers/69513de35d3cf3dcde6a6e95/e4efa052-0b3e-4658-805a-b7b74593d701.png align="center")

More complex example:

```javascript
[1, [2, [3, [4]]]]
```

Here we have multiple levels.

* * *

# Why Flattening is Useful

In real programs, nested arrays can make things harder.

For example:

*   looping becomes complex
    
*   accessing values is difficult
    
*   data processing becomes messy
    

Sometimes we just want:

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

instead of:

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

So flattening makes the data easier to work with.

* * *

# Concept of Flattening

Flattening means:

![](https://cdn.hashnode.com/uploads/covers/69513de35d3cf3dcde6a6e95/d3a45fed-cf7e-45d3-9889-ffd383e71a97.png align="center")

We remove all nesting and bring everything to a single level.

* * *

## Flatten Transformation

![](https://cdn.hashnode.com/uploads/covers/69513de35d3cf3dcde6a6e95/b89535af-842c-43e1-b467-de7873532e95.png align="center")

* * *

# Approach 1: Using flat()

JavaScript already gives a method called `flat()`.

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

const flatArr = arr.flat(2)

console.log(flatArr)
```

Output:

```id="0g6e8u"
[1, 2, 3, 4, 5, 6]
```

Here `2` means how deep we want to flatten.

* * *

# Approach 2: Using Infinity

If we don’t know the depth, we can use:

```javascript
const flatArr = arr.flat(Infinity)
```

This will flatten everything.

* * *

# Approach 3: Using Recursion

Sometimes in interviews, they expect you to write your own logic.

So let’s think step by step.

We go through each element:

*   if it is a number → push it
    
*   if it is an array → go inside it
    

Example:

```javascript
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
}

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

console.log(flatten(arr))
```

Output:

```id="z9h2kd"
[1, 2, 3, 4, 5, 6]
```

* * *

# How to Think About It

The idea is simple:

```plaintext
If value is array --> go deeper  
If value is normal --> collect it
```

This thinking works for any depth.

* * *

Nested arrays are common in real world data.

Flattening helps simplify the structure and makes it easier to work with.

JavaScript provides `flat()` for quick use, but knowing how to solve it manually helps in interviews and deeper understanding.