How to flatten an array in JavaScript

In vanilla JavaScript, you can use the Array.concat() method to flatten a multi-dimensional array. This method works in all modern browsers, and IE6 and above.

Here is an example:

const animals = [
    ['🐍'],
    ['🐢'],
    ['🐝'],
    ['🐉'],
    ['🐋']
];

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

console.log(flattened);

// ['🐍', '🐢', '🐝', '🐉', '🐋']

The apply() method is a part of concat() function's prototype 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:

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:

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:

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:

// default depth level
['🍀', ['🌷', ['🌹', '🌻']]].flat();
// ['🍀', '🌷', ['🌹', '🌻']]

// depth level: 2
['🍀', ['🌷', ['🌹', '🌻']]].flat(2);
// ['🍀', '🌷', '🌹', '🌻']

// depth level: infinite
['🍀', ['🌷', ['🌹', '🌻']]].flat(Infinity);
// ['🍀', '🌷', '🌹', '🌻']

The Array.flatMap() is identical to a 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:

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 to learn more about JavaScript arrays and how to use them to store multiple values in a single variable.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.