# Array Flatten in JavaScript

When working with data in JavaScript, you will often come across **arrays inside other arrays**. This structure is known as a **nested array**. While nested arrays can be useful for organizing complex data, sometimes we need to convert them into a single, flat list.

This process is called **array flattening**.

Understanding how to flatten arrays is not only useful in real-world programming but also a common topic in technical interviews.

* * *

# What Nested Arrays Are

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

Example:

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

Here, the third element is another array: `[3, 4]`.

A deeper nested structure might look like this:

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

Visually, you can imagine it like this:

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

Instead of a simple list, the values are arranged in layers.

* * *

# Why Flattening Arrays Is Useful

Nested arrays appear frequently in real-world applications.

Examples include:

*   Data returned from APIs
    
*   File directory structures
    
*   Multi-level menu systems
    
*   Tree-like data structures
    

However, many algorithms or operations require a **simple one-dimensional list**.

For example, suppose we have:

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

Flattening it gives:

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

This makes it easier to perform operations such as:

*   Searching
    
*   Filtering
    
*   Mapping
    
*   Calculating totals
    

Flattening simplifies the data so it can be processed more easily.

* * *

# The Concept of Flattening Arrays

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

Let’s break it down step by step.

Example nested array:

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

Step 1 — Read the first element:

```plaintext
1
```

Step 2 — Encounter nested array `[2,3]`

```plaintext
Extract its elements → 2, 3
```

Step 3 — Continue reading remaining elements:

```plaintext
4
```

Final flattened array:

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

The goal is to **pull elements out of nested structures and place them into one array**.

* * *

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

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

Example:

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

const flattened = arr.flat();

console.log(flattened);
```

Output:

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

If the array has deeper nesting:

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

You can specify the depth:

```javascript
arr.flat(2);
```

Output:

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

There is also a shortcut to flatten completely:

```javascript
arr.flat(Infinity);
```

* * *

# Approach 2: Using a Loop

Flattening can also be done manually using loops.

Example:

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

for (let i = 0; i < arr.length; i++) {
  if (Array.isArray(arr[i])) {
    for (let j = 0; j < arr[i].length; j++) {
      result.push(arr[i][j]);
    }
  } else {
    result.push(arr[i]);
  }
}

console.log(result);
```

Output:

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

This approach helps you understand the logic behind flattening.

* * *

# Approach 3: Using Recursion

For deeply nested arrays, recursion is a common approach.

Example:

```javascript
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], 6];

console.log(flattenArray(arr));
```

Output:

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

Recursion works well because nested arrays can contain other nested arrays at any depth.

* * *

# Thinking About the Problem

When solving flattening problems, it helps to think in terms of two cases.

For each element in the array:

1.  **If it is not an array**  
    → add it directly to the result.
    
2.  **If it is an array**  
    → process it again until all nested values are extracted.
    

This mindset helps break down complex nested structures step by step.

* * *

# Common Interview Scenarios

Flattening arrays appears in many coding interviews.

Typical variations include:

### Flatten a 2D array

Input:

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

Output:

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

* * *

### Flatten deeply nested arrays

Input:

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

Output:

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

* * *

### Flatten only one level

Input:

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

Output:

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

* * *

# Key Takeaways

Array flattening is an important concept when dealing with nested data structures.

The main ideas to remember are:

*   Nested arrays contain arrays inside arrays.
    
*   Flattening converts them into a single list.
    
*   JavaScript provides `flat()` for quick solutions.
    
*   Understanding loops and recursion helps solve flattening problems manually.
    

Mastering this concept improves your problem-solving skills and prepares you for many common JavaScript interview questions.