How to Flatten an Array in JavaScript

Flattening an array is the process of merging multi-dimensional subarrays into a single, one-dimensional array.

Example

Input:

[[[1, [1.1]], 2, 3], [4, 5]]

Output:

[1, 1.1, 2, 3, 4, 5]

Using ES2019 Methods

In ES2019, two new methods were introduced to flatten arrays:

flat()
flatMap()

Using `flat()`

flat() merges multi-dimensional subarrays into a one-dimensional array. By default, it flattens only one level deep, but you can specify the depth.

[1, 2, [3, 4]].flat(); 
// Output: [1, 2, 3, 4]
 
[1, 2, [3, 4], [[5]]].flat(2); 
// Output: [1, 2, 3, 4, 5]

For deep flattening, pass Infinity as the depth.

[[[1, [1.1]], 2, 3], [4, 5]].flat(Infinity);
// Output: [1, 1.1, 2, 3, 4, 5]

Using `flatMap()`

flatMap() combines map() and flat() into one method, performing both operations together.

['Pratap Das', 'Learn JavaScript'].flatMap(e => e.split(' '));
// Output: ['Pratap', 'Das', 'Learn', 'JavaScript']

Alternative Flattening Methods

Using Spread Operator (For Two-Dimensional Arrays)

The spread operator spreads out the nested array and concatenates it with an empty array.

const spreadFlatten = (array) => {
  let flatArray = [];
  return flatArray.concat(...array);
};

Using Reduce (For Two-Dimensional Arrays)

The reduce() method can also be used to flatten arrays by concatenating each nested array.

const reduceFlatten = (array) => {
  const reducer = (accumulator, currentValue) => accumulator.concat(currentValue);
  return array.reduce(reducer, []);
};

Using Flat (For Arrays of Any Depth)

The flat() method works for arrays of any depth by passing Infinity as the depth.

const flatFlatten = (array) => {
  return array.flat(Infinity);
};

Using Recursion (For Arrays of Any Depth)

The recursive approach uses reduce() to flatten arrays of any depth.

const recursiveFlatten = (array) => {
  const reducer = (accumulator, currentValue) => {
    return accumulator.concat(Array.isArray(currentValue) ? 
      recursiveFlatten(currentValue) : currentValue);
  };
  return array.reduce(reducer, []);
};

Polyfill

You can create a custom function to flatten arrays if you don't want to rely on modern features.

ES6 Example

const flatten = (arr) => {
  return arr.reduce((flat, toFlatten) => 
    flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten), []);
};

Traditional Method

const flatten = function(arr, result = []) {
  for (let i = 0, length = arr.length; i < length; i++) {
    const value = arr[i];
    if (Array.isArray(value)) {
      flatten(value, result);
    } else {
      result.push(value);
    }
  }
  return result;
};

JavaScript Array JavaScript Object