# Understanding Nested Arrays and Flattening in JavaScript

When working with arrays, we usually deal with simple lists.

```plaintext
[1, 2, 3]
```

But sometimes, arrays can contain other arrays inside them.

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

These are called **nested arrays**.

At first, they look fine. But when you try to work with the data, things get messy quickly.

* * *

## What Are Nested Arrays?

A nested array is simply an array inside another array.

Example:

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

Here:

*   `1` and `4` are normal values  
    
*   `[2, 3]` is an array inside the main array  
    

You can have deeper nesting as well:

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

* * *

## Why Flattening Arrays Is Useful

Now imagine you want to:

*   loop through all values
    
*   sum numbers
    
*   filter elements  
    

With nested arrays, this becomes difficult because values are not at the same level.

That’s why we **flatten arrays**.

Flattening means:

converting a nested array into a single-level array

## What is Flattening?

Example:

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

After flattening:

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

Now everything is in one level, making it easier to work with.

![https://images.openai.com/static-rsc-4/07284ZtWICahvsZ16jTSwBUhd34-__wq4prEvjceEJr-KO_JhHavYOGHjOqk2PrZ7CcnUfy8e75Ae2Emnoy7GVU3ntiMOeLIstsYwLZeJJ9prPsoVXF9eO5i-WVv1E5vexSxPgKCTtMDx98zWb-cYRW0FeU62vwjJy0u4RHGxH0Lg9nGjNBJHnhSb99hx_X7?purpose=fullsize](https://images.openai.com/static-rsc-4/MoUif1IByWkrO4bUl7qU9bnPC9ZErvpxxLe1udBalw8C3kkaBYq0tPcEyGJ4W3KaIIjDIIgi-Y-yV5TVNqlfx9bPcZsUY1VdVSNn4h5XugGgPfKHMOve-2LU5NKCw1Oe6VW4eBGDuzysZ9PCpr23XnNW1zwtxR1iIr21Tzjc1hY?purpose=inline align="center")

* * *

### Approach 1: Using `.flat()`

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

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

console.log(arr.flat(2))
```

The number `2` means:  
  
flatten up to 2 levels

If you want to flatten everything:

```plaintext
arr.flat(Infinity)
```

* * *

### Approach 2: Using Recursion (Core Concept)

This is important for interviews.

Idea:

*   check each element
    
*   if it’s an array → go inside it
    
*   if it’s a value → store 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
}
```

This works for any depth.

* * *

### Approach 3: Using reduce()

Another common method:

```javascript
function flatten(arr) {
  return arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      return acc.concat(flatten(item))
    }
    return acc.concat(item)
  }, [])
}
```

This is just a different way of writing the same logic.

* * *

## Common Interview Thinking

This topic is asked a lot in interviews.

What they are really testing is:

*   can you handle nested structures
    
*   can you break a problem into smaller steps
    
*   can you use recursion properly
    

Not just `.flat()`

* * *

### How to Think About It

Instead of memorizing code, think like this:

*   Is this element an array?  
    → go inside it
    
*   Is it a value?  
    → add it
    

That’s the entire logic.

* * *

## One Line Summary

Nested array → multiple levels  
  
Flatten → bring everything to one level

* * *

## Conclusion

Nested arrays are useful when dealing with structured or grouped data, but they can make operations harder.

Flattening helps simplify that structure so we can process data easily.

The important part is not just knowing the methods, but understanding the logic behind flattening.