# Flatten nested array recursively | Array.flat() in JavaScript

---

Hey everyone, Today I’ll be discussing flattening arrays which were always complicated in JavaScript but not anymore! I’m going to explain how to use the new array methods introduced in ES2019 — `flat()`

We will see multiple ways to flatten arrays and even depth-level arrays using `Array.prototype.flat()`and **recursive** way.

Let’s start going through a few examples to understand the scenarios.

---

### Ways to flatten array

* Using`flat()` method
    
* Using recursion
    
* Using generator function
    

![](https://cdn-images-1.medium.com/max/1600/1*TXFvc8_R7OzSGvZr54rvkg.png align="left")

### Using **Array.prototype.flat()** method

The `flat()` method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

![](https://cdn-images-1.medium.com/max/1600/1*CyXBYK_XU8kdegGsMAW2yQ.png align="left")

```javascript
const hearts = ["💜",["💙"],["❤️‍🩹"]];
const flattened = heart.flat();
console.log(flattened);   // ['💜', '💙', '❤️‍🩹']
```

> **Setting** `depth` **parameter**

`flat()` will only flatten one layer deep by default.

```javascript
// Default 1
hearts.flat();  // ['💜', '💙', '❤️‍🩹']

// Same as
hearts.flat(1); // ['💜', '💙', '❤️‍🩹']
```

> **Flattening nested arrays**

By passing parameter ***depth***

![](https://cdn-images-1.medium.com/max/1600/1*o6H2oRuQ48XY-ZZqMage1A.png align="left")

using **depth** parameter

> **Infinitely Nested Arrays(***Infinity***)**

![](https://cdn-images-1.medium.com/max/1600/1*4FfnG-gmtwA9E1EbBNvXww.png align="left")

nested array

> **Flattening sparse(empty spaces) arrays using flat()**

The `flat()` method removes empty slots in arrays:

![](https://cdn-images-1.medium.com/max/1600/1*nx_aeZLpler_CnYRw1aplg.png align="left")

**sparse** array

Browser compatibility

![](https://cdn-images-1.medium.com/max/1600/1*nPyav56ohiczlW4oRNpU1Q.png align="left")

### **Using Recursion**

> **1\. Using** `Array.prototype.concat()` **and** `Array.prototype.reduce()` **function**

![](https://cdn-images-1.medium.com/max/1600/1*jofkdYlSShFISV-3RPgSVw.png align="left")

> **2\. Iterative way**

![](https://cdn-images-1.medium.com/max/1600/1*6LNJtA32tCLVV_hOHQhbPA.png align="left")

### Using the generator function

Another way using a generator function for flattening nested arrays. The following code example shows how to implement this using the [**Array.isArray()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) method.

![](https://cdn-images-1.medium.com/max/1600/1*z-n1gSmPjbSueb9Oon69tg.png align="left")

That’s all. Thanks for reading ❤. You can find the full code on [GitHub](https://raw.githubusercontent.com/akhtarvahid/Javascript-fun/main/array/flatten-array.js?token=GHSAT0AAAAAACEEP6VRLD2CFYV2UX5FAEZQZE7GMIA).

Say Hello! [**Twitter**](https://twitter.com/akhtarvahid) **|** [**Blog**](https://medium.com/@akhtarvahid) **|** [**LinkedIn**](https://www.linkedin.com/in/akhtarvahid/) **|** [**Github**](https://raw.githubusercontent.com/akhtarvahid/Javascript-fun/main/array/flatten-array.js?token=GHSAT0AAAAAACEEP6VRLD2CFYV2UX5FAEZQZE7GMIA)

---

### Links and Resources

* [CRUD Application in React.js with Redux and Hooks](https://akhtarvahid.medium.com/crud-application-in-react-js-with-redux-and-hooks-e0367b6aeeb2).
    
* [Create a simple quiz application using react js.](https://github.com/akhtarvahid/quiz-app)
    
* [How to deploy a React app from GitHub to Netlify](https://akhtarvahid.medium.com/how-to-deploy-a-react-app-from-github-to-netlify-8c7364653e4c)
    
* [How to access/fetch the local JSON file to React.](https://akhtarvahid.medium.com/how-to-access-fetch-the-local-json-file-to-react-5ce07c43731d)