# Array Flatten in JavaScript

Overview

When working with JavaScript, you’ll often encounter data that isn’t neatly structured. Instead of a simple list, you might get arrays inside arrays—sometimes even deeply nested.

### What is a nested array?

A nested array is simply an array that contains other arrays as its elements.

JavaScript allows arrays to store any type of value—including other arrays—so you can create multi-level data structures.

Example:

```javascript
const arr = [
  [1,  2,  3,  4,  5],
  [6,  7,  8,  9, 10],
  [11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20]
];

console.log(arr);
```

![](https://cdn.hashnode.com/uploads/covers/6953c37709349c47ab7f5fc0/daabb84b-3d31-4a59-8a44-9b53b321385b.png align="center")

### Why do developers flatten an array?

Flattening an array in JavaScript means converting a **nested array (an array inside an array)** into a **single-level array**.

In real-world data, it often comes from an API in a complex array format. To perform search and query operations, developers often need to flatten the array, which makes some operations easier.

Example

Imagine you are building an e-commerce app.

```javascript
const playlists = [
  {
    name: "Workout",
    songs: ["Track A", "Track B"]
  },
  {
    name: "Chill",
    songs: ["Track C"]
  },
  {
    name: "Travel",
    songs: ["Track D", "Track E"]
  }
];
```

### Problem:

You want a **list of all products sold**. Right now, it's nested:

```javascript
[
  ["Track A", "Track B"],
  ["Track C"],
  ["Track D", "Track E"]
]
```

## Solution: Flatten the array

```javascript
const allSongs = playlists.map(p => p.songs).flat();

console.log(allSongs);
// ["Track A", "Track B", "Track C", "Track D", "Track E"]
```

### Why Flattening is Important

**1\. Makes Data Easier to Process**

Most array methods like `.map()`, `.filter()`, and `.reduce()` work best on flat arrays.

#### Without Flattening

```javascript
const items = [
  ["Pen", "Pencil"],
  ["Book", "Notebook"]
];

const result = items.map(group =>
  group.filter(i => i.includes("P"))
);

console.log(result);
// [["Pen", "Pencil"], []]
```

Still nested. Not very useful.

With Flattening

```javascript
const result = items
  .flat()
  .filter(i => i.includes("P"));

console.log(result);
// ["Pen", "Pencil"]
```

Cleaner and easier.

**2\. Searching Becomes Simple**

Searching nested structures requires loops inside loops.

Flattening removes that complexity.

```javascript
const products = [["TV"], ["Laptop", "Camera"], ["Phone"]];

const flatProducts = products.flat();

console.log(flatProducts.includes("Camera"));
// true
```

**3\. Useful for Calculations**

Math operations are easier on flat arrays.

```javascript
const expenses = [[200, 300], [150], [400, 50]];

const total = expenses
  .flat()
  .reduce((sum, val) => sum + val, 0);

console.log(total);
// 1100
```

**Types of Flattening**

**1\. Shallow Flattening**

Removes only one level of nesting.

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

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

**2\. Deep Flattening**

Removes all levels of nesting.

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

console.log(arr.flat(Infinity));
// [1, 2, 3, 4]
```

## Different Ways to Flatten Arrays

### 1\. Using `Array.flat()` (Modern Approach)

This is the easiest and most readable way.

```javascript
const values = [1, [2, [3]]];

console.log(values.flat());        // [1, 2, [3]]
console.log(values.flat(2));       // [1, 2, 3]
console.log(values.flat(Infinity));// [1, 2, 3]
```

> #### Why use Infinity?
> 
> Because you don’t need to worry about depth—it flattens everything.

### 2\. Using Recursion (Classic Interview Method)

This approach shows your understanding of logic.

```javascript
function flatten(input) {
  let output = [];

  for (let element of input) {
    if (Array.isArray(element)) {
      output = output.concat(flatten(element));
    } else {
      output.push(element);
    }
  }

  return output;
}

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

### How This Works (Simple Explanation)

*   Loop through each item
    
*   If it's an array → call the function again
    
*   If it's a value → store it
    
*   Combine everything
    

This continues until all nested levels are processed.

> Flattening isn’t just a concept—it appears in real interview questions.

**1\. Nested Messages System**

```javascript
const threads = [
  {
    text: "Hello",
    replies: [
      {
        text: "Hi",
        replies: [
          { text: "How are you?" }
        ]
      }
    ]
  }
];
```

**Goal**

```javascript
["Hello", "Hi", "How are you?"]
```

#### Solution

```javascript
function extractMessages(list) {
  let result = [];

  for (let item of list) {
    result.push(item.text);
    if (item.replies) {
      result = result.concat(extractMessages(item.replies));
    }
  }

  return result;
}
```

**2\. Folder Structure Problem**

```javascript
const drive = {
  files: ["doc1.pdf"],
  folders: [
    {
      files: ["image.png"],
      folders: []
    }
  ]
};
```

#### Goal

```javascript
["doc1.pdf", "image.png"]
```

**3\. Category Tree**

```javascript
const catalog = [
  {
    title: "Clothing",
    sub: [
      { title: "Men", sub: [] },
      { title: "Women", sub: [] }
    ]
  }
];
```

#### Output

```javascript
["Clothing", "Men", "Women"]
```

**4\. Classic Flatten Problem**

```javascript
const input = [1, [2, [3, [4, [5]]]]];
```

#### Output

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

### Key Takeaways

*   Nested arrays are common in real-world data
    
*   Flattening converts complex structures into simple lists
    
*   `flat()` It is the easiest method for modern JavaScript
    
*   Recursion is important for interviews and a deep understanding
    
*   Flattening improves:
    
    *   readability
        
    *   performance
        
    *   maintainability
        

### Final Thoughts

Once you understand flattening, you’ll start noticing how often it appears in real applications—APIs, databases, UI data, everywhere.

It’s not just a method—it’s a way of simplifying complexity.

Master it once, and you’ll use it everywhere.