# Array Flatten in JavaScript

Arrays are one of the most commonly used data structures in JavaScript. Sometimes arrays can contain other arrays inside them. These are called **nested arrays**. While nested arrays can be useful, many situations require converting them into a single flat array. This process is called **array flattening**.

In this article, we will understand nested arrays, why flattening is useful, and different ways to flatten arrays in JavaScript.

## What Are Nested Arrays ?

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

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

Visual representation:

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

Here, the main array contains two inner arrays.

A deeper nested structure can look like this:

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

Visual structure:

```plaintext
1
└── [2
      └── [3,4]
    ]
5
```

* * *

## Why Flattening Arrays Is Useful

Flattening arrays helps simplify data so it can be processed more easily.

Common use cases include:

*   Processing API responses
    
*   Data transformation
    
*   Preparing data for loops or algorithms
    
*   Handling deeply nested structures
    

Example:

```plaintext
Nested array:
[1, [2, 3], [4, 5]]

Flattened array:
[1, 2, 3, 4, 5]
```

Working with a flat array is often easier than dealing with multiple levels of nesting.

## Concept of Flattening Arrays

Flattening means removing the nesting and placing all elements into a single array.

Example transformation:

Before flattening: \[1, \[2, \[3, 4\]\], 5\]

After flattening: \[1, 2, 3, 4, 5\]

Step-by-step idea:

Step 1: \[1, \[2, \[3,4\]\], 5\]

Step 2: \[1, 2, \[3,4\], 5\]

Step 3: \[1, 2, 3, 4, 5\]

## Different Approaches to Flatten Array:

1.  Using Array.flat()
    

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

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

const result = arr.flat();

console.log(result);

Output:

\[1, 2, 3, 4, 5\]

For deeper nesting:

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

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

2 represents the depth level.

To flatten completely:

arr.flat(Infinity);

2\. Using Recursion

Recursion is a common interview approach.

function flattenArray(arr) {

let result = \[\];

for (let item of arr) {

if (Array.isArray(item)) {

result = result.concat(flattenArray(item));

}

else

{

result.push(item);

}

}

return result;

}

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

console.log(flattenArray(arr));

Output:

\[1, 2, 3, 4, 5\]

3\. Using reduce()

Another functional programming approach:

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

const flattened = arr.reduce((acc, val) => {

return acc.concat(Array.isArray(val) ? flattened(val) : val);

}, \[\]);

This method combines elements step by step.

4.  Using Loops
    

A simple approach using loops:

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

let result = \[\];

for (let item of arr) {

if (Array.isArray(item)) {

result.push(...item);

}

else {

result.push(item);

}

}

console.log(result);

## Common Interview Scenarios

Array flattening is a very common JavaScript interview question.

Typical questions include:

Flatten an array without using flat()

Flatten an array of infinite depth

Write a recursive solution

Optimize flattening for large arrays

Example interview problem:

Input: \[1,\[2,\[3,\[4\]\]\]\]

Output: \[1,2,3,4\]

A recursive approach is usually expected.

## Suggestions for Beginners

If you are learning JavaScript, follow these tips:

Start by understanding nested arrays clearly

Practice writing flatten functions using recursion

Learn how built-in methods like flat() work

Try solving flatten problems on coding platforms

Visualize the structure of nested arrays before writing code

Understanding array flattening improves your problem-solving and algorithm thinking, which is important for JavaScript interviews and real-world development.

## Conclusion

Flattening arrays is an important concept when working with complex data structures in JavaScript. Whether you use built-in methods like flat() or implement your own recursive solution, understanding the logic behind flattening arrays helps you write more efficient and readable code.