At one point in you career you will require to flat an array. There are plenty of solution out in the web, all with advantages and disadvantages. If you are looking for the right solution to meet your need you have come to the right place.

In this article we are going to cover the different solutions to support you in finding the one that fit your development methodology and coding practices.

Available solutions

As mentioned above, and as you may have already researched yourself, JavaScript offer a few different methods to flat an array. Most common ways are:

• Array.prototype.flat()
• Array.prototype.concat() + spread operator (…)
• Array.prototype.concat () + Function.prototype.apply()

Array.prototype.flat()

This is probably the first that you may encounter on while searching for information on how to flat Javascript arrays.

The flat method as described on the mozilla website is:

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

https://developer.mozilla.org/

This new method easily allow you to flat array as deep as infinity. The code to flat an array will be:

const arrayOfArray = [["red", "blue"],"green", ["orange", "white"]];
const flatArray = arrayOfArray.flat();

//flatArray: ["red", "blue", "green", "orange", "white"]

const nestedArrays = [["red", "blue"],["green", ["orange", "white"]]];
// Flat() accept an argument that is the max depth to flat. Max number is Infinity
const flatArray = arrayOfArray.flat(2);

//flatArray: ["red", "blue", "green", "orange", "white"]

You may be wondering, why should you search further if the above method provide just what we want, in such a clean way.

Browser support information gathered from caniuse.com are as follow:

• Supported by all major browse
• No support at all from Internet Explorer 11 and below

To summarise the Array.prototype.flat()

PROS

• It offer a clean and concise way to flat array
• It works with Nested arrays too

CONS

• It is still in draft, and the API could change (very unluckily)
• It does not support all browser

Array.prototype.concat()

The concat method has been around for quite some time, and the internet is full of answers and tutorial that explain the use of this method is flattening arrays.

The concat method as described on the mozilla website is:

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

https://developer.mozilla.org/

There are a couple of examples that uses the concat methods. In the following paragraphs we are going to cover two main usage:

• With Spread Operator (…)
• With apply()

With Spread Operator (…)

The most common solution, for using the concat method for flattening arrays is with the use of the spread operator. The combination of this two methods will flat a single nested array of array.

The replica of the above code for this implementation is:

const arrayOfArray = [["red", "blue"],"green", ["orange", "white"]];
const flatArray = [].concat(...arrayOfArray);

//flatArray: ["red", "blue", "green", "orange", "white"]

However, The above solution has become very popular, just because of its presence within different online tutorial and/or answer to queries on stackoverflow. In other words, this solution should be discarded due to its readability (the flat method is more readable and clean),and its browser support that has shown below, is the same as the above mentioned method Flat():

• Supported by all major browser
• Not support on Internet Explorer and below

To summarise Array.prototype.concat() & Spread operator:

PROS

• solution widely available on the internet, easy to find

CONS

• Has the same browser support as map
• It is not very readable
• It just work for one lever deep array or arrays

With apply()

In conclusion, we are going to cover a solution that is not very shared across the internet, but it is very valuable. This solution takes use of Function.prototype.apply(). This method, has been around for quite some time, therefore, it is useful when in need of a solution that require a wider browser support than Flat().

The code required to flat multiple arrays is:

const arrayOfArray = [["red", "blue"],"green", ["orange", "white"]];
const flatArray = [].concat.apply([],arrayOfArray);

//flatArray: ["red", "blue", "green", "orange", "white"]

The code readability stays quite low, but it offer greater browser support as shown on the caniuse.com website. The above solution will be:

• Available on all Browser
• Have support as back as IE6

To summarise Array.prototype.concat() & Function.prototype.concat():

PROS

• Extensive browser support
• No need to polyfill

CONS

• Not very readable
• Just work for one lever deep array or arrays

Conclusion

As the above article shows. The main choice is down to browser support. If you project is in need of an extensive browser support, I would suggest to use the solution Array.prototype.concat() & Function.prototype.concat() . Therefore, if you have the luxury to just support major browser, and are not in need of supporting IE11, then I would greatly suggest the solution using Array.prototype.flat() for its readability and support of deep nested arrays