How to Flatten an Array using JavaScript

avatar

Borislav Hadzhiev

Mon Nov 01 20213 min read

Flatten an Array in JavaScript #

Use the flat() method to flatten an array, e.g. const flat = arr.flat(). The flat method takes a parameter, which defaults to 1 and indicates how deep the nested array should be flattened. The method returns a new array with the sub-array elements concatenated into it.

index.js
const arr = [['a'], ['b', 'c'], ['d']]; const flat = arr.flat(); console.log(flat); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd']

We used the Array.flat method to flatten an array.

The only parameter the method takes is the depth level to which the array should be flattened.

Because we didn't pass a value for the parameter, it defaults to 1.

If your array is more deeply nested and you leave the default depth value of 1, the array wouldn't get flattened completely.

index.js
const arr = [[['a']], [['b', 'c']], [['d']]]; // โœ… 1 Level const flat1 = arr.flat(1); // ๐Ÿ‘‰๏ธ [ ['a'], ['b', 'c'], ['d'] ] console.log(flat1); // โœ… 2 Levels const flat2 = arr.flat(2); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd'] console.log(flat2);

If you don't know how deeply nested your array is and you want to flatten it completely, you can pass Infinity as a parameter to the flat() method.

index.js
const arr = [[['a']], [['b', 'c']], [['d']]]; const flat = arr.flat(Infinity); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd'] console.log(flat);

Passing Infinity to the flat method flattens the array to a single level.

Flatten an Array using concat() #

Use the concat() method with the spread syntax (...) to flatten an array, e.g. [].concat(...arr). The spread syntax unpacks the array and passes the sub-arrays as parameters to the method. The concat method concatenates the sub-arrays into a new array and returns the result.

index.js
const arr = [['a'], ['b', 'c'], ['d']]; const flat = [].concat(...arr); console.log(flat); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd']

We used the spread syntax (...) to unpack the array and pass all sub-arrays as comma-separated values to the Array.concat method.

The concat method takes multiple arrays and / or values and concatenates them into a new array.

index.js
// ๐Ÿ‘‡๏ธ ['a', 'b'] console.log([].concat(['a'], ['b']));

Note that this approach only flattens the array 1 level.

You can also take a more functional approach by using the Array.reduce method.

Flatten an Array using reduce() #

To flatten an array, call the reduce() to iterate over the array, passing it an empty array as the initial value. On each iteration, use the spread syntax to unpack the values of the accumulated array and the sub-array into a new array and return the result.

index.js
const arr = [['a'], ['b', 'c'], ['d']]; const flat = arr.reduce((accumulator, array) => { return [...accumulator, ...array]; }, []); console.log(flat); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd']

The function we passed to the reduce method gets called for each element (sub-array) in the array.

We set the initial value for the accumulator variable to an empty array.

On each iteration, we unpack the values from the accumulator and the current sub-array into a new array and return the result.

The final result is an array that has been flattened 1 level.

A more readable and intuitive approach, if you aren't used to reduce, is to use the Array.forEach method.

Flatten an Array using forEach() #

To flatten an array:

  1. Create a new variable and set it to an empty array.
  2. Use the forEach() method to iterate over the array of arrays.
  3. On each iteration, unpack the values from the sub-array and push them to the new array.
index.js
const arr = [['a'], ['b', 'c'], ['d']]; const flat = []; arr.forEach(array => { flat.push(...array); }); console.log(flat); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd']

The function we passed to the forEach method gets called with each element in the array.

On each iteration, we use the spread syntax and the push method to unpack the values of the sub-array and push them into the new array.

After the last iteration, the flat variable contains an array that has been flattened 1 level.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee