An easy way to recursively flatten a multidimensional array in JavaScript with only native JavaScript.
Tags: javascript
Published: 2023-07-09 20:25:51


---
title: An easy way to recursively flatten a multidimensional array in JavaScript with only native JavaScript.
published: true
tags: Javascript
canonical_url: https://blog.melvinvmegen.com/snippets/flatten-array
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aikl9hir8dlwx8dp39h.png)

## Context

As a JavaScript developer, encountering situations where you need to flatten an array is common. For example, when working with data coming from an API or even a database, you may receive nested arrays that need to be flattened before you can properly use them.

If you're not sure what i'm talking about, flattening an array means converting a multi-dimensional array into a one-dimensional array, where all the elements are at the same level.

```js
const multiLevelDeepArray = [1, 2, [3, [4]], 5];
const oneLevelDeepArray = [1, 2, [3], 4, 5];
const flatArray = [1, 2, 3, 4, 5];
```

## Usage

Once upon a time, if you wanted to recursively flatten an array you could use the [reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) with the [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) method like this:

```js
function flatten(arr) {
  return Array.isArray(arr)
    ? arr.reduce((a, b) => a.concat(flatten(b)), [])
    : [arr];
};

const flattened = flatten([1, 2, [3, [4, [5, 6]]]]); 
// [1, 2, 3, 4, 5, 6]
```

Here our dear **flatten** function recursively flattens the array by concatenating the elements of each sub-array into an accumulator array. 
In case the provided element is not an array, we simply return an array with the element inside.

Let's break it step by step:
1. We have a = `[]` and b = 1, recursively calling **flatten** on 1 simply returns `[1]` which is then concatenated with `[]` given use `[1]`;
2. We have a = `[1]` and b = 2, again calling **flatten** on 2 returns `[2]` which is then concatenated with `[1]` given use `[1, 2]`;
3. We have a = `[1, 2]` and b = `[3, [4, [5, 6]]]`, this time though calling **flatten** on `[3, [4, [5, 6]]]` will launch an all new **flattening** cycle until it returns `[3, 4, 5, 6]` to be concatenated with `[1, 2]` giving us the final result:
`[1,2,3,4,5,6]`

## ES6 to the rescue

Thankfully, ES6 introduced the [flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) method for interacting with nested (even deeply) arrays. This method creates and returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

So in order to flatten a single level deep array, you can simply call the [flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) method without any arguments (as 1 is the default depth):

```js
const arr = [1, 2, [3, 4], 5];
const flattened = arr.flat(); // [1, 2, 3, 4, 5]
```

For more complex use cases you can flatten a Multi-Level Deep Array using the same logic all you have to do is pass the depth as an argument to the [flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) method. For example, to flatten a 2-level deep array, you can pass `2` as the argument:

```js
const arr = [1, 2, [3, [4, 5]], 6];
const flattened = arr.flat(2); // [1, 2, 3, 4, 5, 6]
```

If you don't know the depth of the array, you can use the `Infinity` keyword as the argument to flatten the array to any depth:

```js
const arr = [1, 2, [3, [4, [5, 6]]]];
const flattened = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]
```

## Conclusion

Flattening an array is a common task in JavaScript development, especially when working with nested arrays. In the past, the [reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) and [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) methods were used to recursively flatten an array. However, with the introduction of the [flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) method in ES6, flattening an array has become much easier and probably more efficient.