How to flatten an array in JavaScript

In this article, you will learn about how to flatten an array in JavaScript.

In JavaScript, an array is used to stores multiple data in a single variable. Array can be one dimensional or multi-dimensional. Flatten an array in JavaScript means reduce the multiple dimensions of array into an single array.

Suppose you have a numbers array where you stored data in multi-dimensionally. Let’s see how’s the numbers array look like:

const numbers = [10,20,30,[40,50],60,70]

 console.log(numbers)

 // output: [ 10, 20, 30, [ 40, 50 ], 60, 70 ]

But You want all the numbers in a single array. How can you do that? It is very simple. You can do it in various ways. Let show you some solutions in the next couple of section.You can simply use concat() and apply() to get your desired solution. See the example below:

const numbers = [10,20,30,[40,50],60,70]
let flatNumbers = [].concat.apply([], numbers);

console.log(flatNumbers)

//output: [ 10, 20, 30, 40, 50, 60, 70 ]

Here, in apply(), we passed an empty array with our original array and it will simply take out those element from sub array and keep it in empty array and then concat() method will merge it into one array.

In ES6, JavaScript lets you flatten an array by using spread operator. It is also an easy solution for flattening an array. Example:

const numbers = [10,20,30,[40,50],60, 70]
let flatNumbers = [].concat(...numbers);

console.log(flatNumbers)

//output: [ 10, 20, 30, 40, 50, 60, 70 ]

Another solution is using flat(). You can get the same output if you use flat() method to flatten your array. For Example:

const numbers = [10,20,30,[40,50],60,70]

console.log(numbers.flat())

//output: [ 10, 20, 30, 40, 50, 60, 70 ]

But what if you have an array that has two depth. In that situation if you use flat array you will not able to convert it into one array. Lets see what happen if we use flat() method into two depth.

const numbers = [10,20,30,[40,50,[45,55]],60,70]

console.log(numbers.flat())

//output : [ 10, 20, 30, 40, 50, [ 45, 55 ], 60, 70 ]

You get this result because by default flat() method only able to merge 1 depth of an array.

If you have an array that consists more than 1 depth you have to specify the number of depth to merge the elements of array into one array. The solution for this situation is:

const numbers = [10,20,30,[40,50,[45,55]],60,70]

console.log(numbers.flat(2))

//output: [ 10, 20, 30, 40, 50, 45, 55, 60, 70 ]

We have mentioned 2 as our depth of array is 2. If you have more than 2 depths then you can simply pass the numbers of depths in the flat() method and it will convert it into one array for you.

This is all about flatten array in JavaScript and you can get an overview from it.Note: The array flat() method supports in all modern browsers except for the Internet Explorer. If you are using Internet Explorer then you may use babel.