# How to flatten an array in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 19, 2020. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-flatten-array

> A quick guide to learn how to flatten a multi-dimensional array to a one-dimension array in vanilla JavaScript.

In vanilla JavaScript, you can use the `Array.concat()` method to flatten a multi-dimensional [array](https://attacomsian.com/blog/javascript-arrays). This method works in all modern browsers, and IE6 and above.

Here is an example:

```javascript
const animals = [
    ['?'],
    ['?'],
    ['?'],
    ['?'],
    ['?']
];

const flattened = [].concat.apply([], animals);

console.log(flattened);

// ['?', '?', '?', '?', '?']
```

The `apply()` method is a part of `concat()` function's [prototype](https://attacomsian.com/blog/objects-prototypes-classes-javascript#prototypes) that calls the function with a given `this` value, and arguments provided as an array.

Alternatively, you could use the **ES6 syntax** to make the above example super concise:

```javascript
const flattened = [].concat(...animals);

console.log(flattened);

// ['?', '?', '?', '?', '?']
```

The spread operator (`...`), we used above, is only available in modern browsers, and doesn't work in IE.

## `reduce()` Method

You can also use the `Array.reduce()` method along with `Array.concat()` to flatten a multi-dimensional array to a one-dimensional array:

```javascript
const flowers = [['?'], ['?'], ['?'], ['?']];

const flattened = flowers.reduce((flat, val) => flat.concat(val), []);

console.log(flattened);

// ['?', '?', '?', '?']
```

The above approach works in all modern browsers, and IE9 and higher.

## `flat()` & `flatMap()` Methods

ES2019 introduced two new methods to `Array`'s prototype, `flat()` and `flatMap()`, that can be used to flatten a multi-dimensional array in JavaScript. These methods are fairly new and only works in the latest versions of modern browsers, and Node.js 11 and higher.

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

```javascript
const animals = [
    ['?'],
    ['?'],
    ['?'],
    ['?'],
    ['?']
];

const flattened = animals.flat();

console.log(flattened);

// ['?', '?', '?', '?', '?']
```

By default, the depth level is 1. You can pass in an integer to the `flat()` method to specify how deep a nested array structure should be flattened. Use the `Infinity` keyword to set it to infinite:

```javascript
// default depth level
['?', ['?', ['?', '?']]].flat();
// ['?', '?', ['?', '?']]

// depth level: 2
['?', ['?', ['?', '?']]].flat(2);
// ['?', '?', '?', '?']

// depth level: infinite
['?', ['?', ['?', '?']]].flat(Infinity);
// ['?', '?', '?', '?']
```

The `Array.flatMap()` is identical to a [Array.map()](https://attacomsian.com/blog/javascript-array-map) followed by a `Array.flat()` of depth level 1. This method iterates each element of the array by using a mapping function, and then flattens the results into a new array:

```javascript
const strings = ['Today is', 'a very', '', 'special day'];

const result = strings.flatMap(str => str.split(' '));

console.log(result);

// ["Today", "is", "a", "very", "", "special", "day"]
```

The `flat()` method is useful when you want to manipulate the nested arrays before they are flattened into a single-dimensional array.

Take a look [this article](https://attacomsian.com/blog/javascript-arrays) to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.