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.
- Array.prototype.concat() + spread operator (…)
- Array.prototype.concat () + Function.prototype.apply()
The flat method as described on the mozilla website is:
flat()method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
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()
- It offer a clean and concise way to flat array
- It works with Nested arrays too
- It is still in draft, and the API could change (very unluckily)
- It does not support all browser
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:
concat()method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
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:
- solution widely available on the internet, easy to find
- Has the same browser support as map
- It is not very readable
- It just work for one lever deep array or arrays
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():
- Extensive browser support
- No need to polyfill
- Not very readable
- Just work for one lever deep array or arrays
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