# Array Flatten in JavaScript

## Introduction

In JavaScript, arrays can sometimes contain other arrays inside them. These are called **nested arrays**. Working with nested arrays can be tricky, so we often need to convert them into a single-level array. This process is called **array flattening**.

* * *

## What Are Nested Arrays?

A nested array is an array inside another array.

### Example

```id="n1ex1"
const arr = [1, 2, [3, 4], [5, 6]];
```

Here:

*   `[3, 4]` and `[5, 6]` are inside the main array
    
*   So this is a nested array
    

* * *

## Why Flattening Arrays Is Useful

Flattening helps when:

*   You need a simple list of values
    
*   You want to loop through all elements easily
    
*   You are working with APIs that return nested data
    
*   You want to perform operations like sum, filter, map
    

* * *

## Concept of Flattening Arrays

Flattening means converting:

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

Into:

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

* * *

## Step-by-Step Understanding

### Nested Structure

```id="n4ex4"
[1, [2, [3, 4]]]
```

### Flatten Step by Step

```id="n5ex5"
Step 1: [1, 2, [3, 4]]
Step 2: [1, 2, 3, 4]
```

* * *

## Different Approaches to Flatten Arrays

### 1\. Using flat() Method (Easy Way)

JavaScript provides a built-in method.

```id="n6ex6"
const arr = [1, 2, [3, 4]];
const result = arr.flat();

console.log(result);
```

Output:

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

For deeper nesting:

```id="n7ex7"
arr.flat(Infinity);
```

* * *

### 2\. Using Loop (Basic Logic)

```id="n8ex8"
const arr = [1, [2, 3], 4];
let result = [];

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

console.log(result);
```

* * *

### 3\. Using Recursion (Important for Interviews)

```id="n9ex9"
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;
}

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

* * *

### 4\. Using reduce()

```id="n10ex10"
const arr = [1, [2, [3, 4]]];

const result = arr.reduce((acc, item) => {
  return acc.concat(Array.isArray(item) ? result = flatten(item) : item);
}, []);

console.log(result);
```

* * *

## Common Interview Scenarios

1.  Flatten array without using `flat()`
    
2.  Flatten deeply nested arrays
    
3.  Handle mixed data types
    
4.  Optimize recursion
    

Example question: "Write a function to flatten an array of any depth."

* * *

## Visual Diagram Ideas

### Nested Array Structure

```id="n11ex11"
[1
  [2
    [3, 4]
  ]
]
```

### Flatten Transformation

```id="n12ex12"
Nested → [1, [2, [3, 4]]]
Flat   → [1, 2, 3, 4]
```

* * *

## Problem Solving Thinking

When solving flatten problems:

*   Check if element is array
    
*   If yes → go deeper
    
*   If no → add to result
    
*   Repeat until all elements are processed
    

* * *

## Conclusion

Array flattening is an important concept in JavaScript. It helps you simplify complex data structures and is commonly asked in interviews. Learning different approaches like `flat()`, loops, and recursion will make your problem-solving skills stronger.

* * *