How to Flatten an Array in JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. How to Flatten an Array in JavaScript
Moataz Farid Feb 02, 2024
JavaScript JavScript Array
  1. Use concat() to Flatten Arrays in JavaScript
  2. Use Array.reduce() to Flatten Multi-Dimensional Array in JavaScript
  3. Use flat() to Flatten Arrays to Certain Depth Level in JavaScript
How to Flatten an Array in JavaScript

This tutorial will introduce how to flatten an array in JavaScript. We will learn how to flatten JavaScript arrays with concat(), reduce and ECMAScript 6 Arrays.flat() method that supports multi-depth levels. We will also implement a similar method with a pure for loop for those who can not use ECMAScript 6.

Use concat() to Flatten Arrays in JavaScript

Let’s assume we have the following array:

var array1 = [['element 1'], ['element 2']];

To flatten the above JavaScript array array1, we need all elements of the child arrays to be elements of the parent array. So it would be like ["element 1", "element 2"].

We can use the Arrays.concat() method to flatten arrays.

var array1 = [['element 1'], ['element 2']];

var flattenArray = [].concat.apply([], array1);
console.log(flattenArray);

Output:

["element 1", "element 2"]

Use Array.reduce() to Flatten Multi-Dimensional Array in JavaScript

The Array.reduce() function is one of the higher-order functions. It takes a reducer function to execute as an argument. To understand the reduce() function, let’s see the following example:

var arr = [10, 20, 30, 40];

function myreducerFunction(acc, currentVal) {
  console.log(`The acc. value is ${acc}`);
  console.log(`The current value is ${currentVal}`);
  acc = currentVal + acc;
  return acc;
}

var sum = arr.reduce(myreducerFunction, 0);
console.log(sum);

Output:

The acc. value is 0
The current value is 10
The acc. value is 10
The current value is 20
The acc. value is 30
The current value is 30
The acc. value is 60
The current value is 40
100

To flatten the array, we will use the reduce function to execute a reducer function that concatenates the input if it was not an array; otherwise, we reduce it again recursively.

var array1 = [['element 1'], ['element 2']];

function myFlatFunction(input) {
  return input.reduce(function(inputArray, inputToFlat) {
    return inputArray.concat(
        Array.isArray(inputToFlat) ? myFlatFunction(inputToFlat) : inputToFlat);
  }, []);
}

var OneLevelFlattenArray = myFlatFunction(array1)
console.log(OneLevelFlattenArray);

Output:

["element 1", "element 2"]

The above example can also be used to flatten arrays composed of more than one level depth.

var array2 = [[['element 1'], ['element 2']], ['element 3']];

var TwoLevelFlattenArray = [].concat.apply([], array2);
console.log(TwoLevelFlattenArray);

Output:

["element 1", "element 2", "element 3"]

Use flat() to Flatten Arrays to Certain Depth Level in JavaScript

Array.prototype.flat() method is used to flat arrays with more than one level depth by passing the depth level as an argument. In case we do not know the exact depth level, we can pass Infinity as an argument to the function.

var array3 = ['element 0', [['element 1'], ['element 2']], ['element 3']];

console.log('Level One > ', array3.flat());
console.log('Level One > ', array3.flat(1));
console.log('Level Two > ', array3.flat(2));
console.log('Full depth flatting > ', array3.flat(Infinity));

Output:

Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level One >  (4) ["element 0", Array(1), Array(1), "element 3"]
Level Two >  (4) ["element 0", "element 1", "element 2", "element 3"]
Full depth flatting >  (4) ["element 0", "element 1", "element 2", "element 3"]