# Array Flatten in JavaScript

Arrays are one of the most important data structures in JavaScript. While working on real-world applications, we often deal with nested arrays, grouped data , API responses , matrix-like structures

Sometimes these arrays become deeply nested, making data difficult to work with. To solve this problem, JavaScript provides the concept of **Array Flattening.**

* * *

# What nested arrays are

A nested array means an array inside another array. For example :

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

Here , the array \[3, 4\] exists inside another array. That is called a nested array.

## Single Level Nested Array

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

## Multi-Level Nested Array

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

* * *

# Why flattening arrays is useful

Working with nested arrays directly can be painful. So to make it easier Array flattening is useful. For example :

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

If we want all values in a single list , nested structure becomes inconvenient.

Flattening arrays is useful in Real-World Situations such as API data processing, frontend data rendering, filtering/searching, data analytics and many more fields.

* * *

# Concept of flattening arrays

## What Does Flattening Mean?

Flattening means Converting nested arrays into a single array. For example:

Before Flattening :

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

After Flattening:

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

After flattening of array the nested structure gets removed.

## Understanding Flattening Step by Step:

Let's understand by an example:

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

### Step 1

Take out the first value `1` and add to a new array.

### Step 2

Now encounter , the nested array or inner array and take it's element individually `2 3` and push them to new array.

### Step 3

Now repeat the above process to another nested array and add individual values to a new array . This complete process is called **Flattening the array.**

![](https://cdn.hashnode.com/uploads/covers/63c43a8adbe7ab4342a06690/a6d96327-a24a-495f-b9f3-6b38c2648f84.png align="center")

* * *

# Different approaches to flatten arrays

The different approaches to flatten the arrays are :

## 1\. Using flat()

This is the easiest and modern approach to flattening the array. For example:

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

const result = arr.flat();

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

By default flat() removes one level of nesting. To flatten completely use `arr.flat(Infinity)` . This removes all nested levels and make the a new array.

## 2\. Using Loops

Before `flat()` existed, developers used loops to flatten the array. for eg:

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

const result = [];

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

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

### 3\. Using Recursion

Recursion is commonly used for deeply nested array to flatten the arrays. for eg:

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

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

Recursion works very well because Nested arrays themselves contain arrays, so the same logic repeats naturally. And most important this method is commonly asked in interview question.

* * *

# Wrapping Up 📌

Thanks for reading till the end 🙌  
I hope this article helped you understand the topic in a simple, practical, and beginner-friendly way.

My goal is to break down complex tech concepts into clear, real-world explanations, especially for learners who are just starting out or feeling overwhelmed.

If you found this useful, feel free to bookmark, share, or leave a comment - it really helps and keeps me motivated to write more.

You can connect with me here:

*   🐦 [**X (Twitter)**](https://x.com/RahulDe13551305)
    
*   💼 [**LinkedIn**](https://www.linkedin.com/in/devrahulll)
    

Let’s learn together and grow step by step 🚀

* * *