How to Flatten a Multidimensional Array in JavaScript?

Let's suppose you have the following array of deeply nested numbers that you need to flatten:

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

There are different ways in which you can flatten a deeply nested array in JavaScript, therefore, choose the version you support to learn more:

• ES2019+;
• ES6+;
• ES5+;

Flattening a Deeply Nested Array in ES2019+

In ES2019+, you can simply use the Array.prototype.flat() method to flatten an array. For example:

// ES2019+
const flattened = numbers.flat(Infinity);

console.log(flattened); // [1, 2, 3, 4, 5]

You may also specify the exact number of levels you want the array nesting to be flattened, for example, like so:

// ES2019+
const flattened = numbers.flat(4);

console.log(flattened); // [1, 2, 3, 4, 5]

Please note that if you don't specify any arguments to Array.prototype.flat(), by default it will flatten the array only one-level deep.

Flattening a Deeply Nested Array in ES6+

In ES6+, you can use the spread operator along with the Array.prototype.concat() method to flatten a deep nested array like so:

// ES6+
const flatten = (arr) => Array.isArray(arr) ? [].concat(...arr.map(flatten)) : arr;

console.log(flatten(numbers)); // [1, 2, 3, 4, 5]

In case you wish to flatten the array only one-level deep, it is much simpler:

// ES6+
const flattened = [].concat(...numbers);

// or
// const flattened = Array.prototype.concat(...numbers);

console.log(flattened); // [1, 2, [3, [4]], 5]

Flattening a Deeply Nested Array in ES5+

To flatten a deeply nested array in ES5+, you can do either of the following:

• Use Array.prototype.concat() With Function.prototype.apply(), or;
• Use Array.prototype.reduce() and Array.prototype.concat().

Using Array.prototype.concat() With Function.prototype.apply():

You can use Function.prototype.apply() with Array.prototype.concat() in the following way to flatten a deeply nested array:

// ES5+
function flatten(arr) {
    return Array.isArray(arr) ? [].concat.apply([], arr.map(flatten)) : arr;
}

console.log(flatten(numbers)); // [1, 2, 3, 4, 5]

To flatten only one-level deep is much simpler:

// ES5+
const flattened = [].concat.apply([], numbers);

console.log(flattened); // [1, 2, [3, [4]], 5]

The following explains how Function.prototype.apply() works with Array.prototype.concat():

1. The first argument changes the "this" value of the Array.prototype.concat() method to an array;
2. The second argument passes each element of the array as a series of arguments for Array.prototype.concat(). This works because Array.prototype.concat() accepts any number of arrays/values as argument (which it concatenates into a new array).

Using Array.prototype.reduce() and Array.prototype.concat():

In the Array.prototype.reduce() method the first argument is an accumulator, whose value is remembered across each iteration, and ultimately becomes the final, single resulting value.

Please note that this might not be most efficient solution when working with large arrays because in each iteration, Array.prototype.reduce() creates a new temporary array that must be garbage-collected, and it copies elements from the current accumulator array into a new array instead of adding the new elements to the existing array. Therefore, due to the potential performance issues associated with using Array.prototype.reduce() and Array.prototype.concat() together for large arrays, it might be a good idea to use alternatives instead.

To flatten a deep nested array using Array.prototype.reduce() and Array.prototype.concat() recursively, you can do something like the following:

// ES5+
const flatten = function (arr) {
    return arr.reduce(function (accumulator, value) {
        const flattened = Array.isArray(value) ? flatten(value) : value;

        return accumulator.concat(flattened);
    }, []);
};

console.log(flatten(numbers)); // [1, 2, 3, 4, 5]

To flatten the array only one-level deep using Array.prototype.reduce() and Array.prototype.concat(), you can do something like the following:

// ES5+
const flattened = numbers.reduce(function (accumulator, number) {
    return accumulator.concat(number);
}, []);

// ES6+
// const flattened = numbers.reduce((accumulator, number) => accumulator.concat(number), []);

console.log(flattened); // [1, 2, [3, [4]], 5]