A Short love story of the experimental new addition to the Array methods - the Flat and FlatMap. We can level flat any irregular array (an array that contains array or arrays) irrespective of the depth level plus the one opportunity to flatten and map at the same time is a very cool feature coming to JavaScript after the whole Array.smoosh episode.

A little Story

Have you ever heard about #SmooshGate? TC39 the working group that works on JavaScript(ECMAScript) released “Array.prototype.flatten` to flatten array recursively up to a specified depth. And it broke the web 😭😭😭.

They had to find a quick fix to the bug and save the world. When fixing a bug, why? is very important. They found that MooTools was the cause since it implemented a flatten method that overwrite the default Array.prototype.flatten. The proposal author suggested to change the name from flatten to smoosh. Strange suggestion? Read more here.

It was renamed to flat after TC39 met in May 2018 and Array.prototype.flatMap was included.

How do we flatten an Array Before ?

1
const flatten = (arr, depth = 1) =>
2
  arr.reduce(
3
    (a, v) =>
4
      a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v),
5
    [],
6
  );
7

8
const flattened = (arr) => [].concat(...arr);

1
function flattenArray(arr) {
2
  const flattened = [].concat(...arr)
3
  return flattened.some(item =>Array.isArray(item))
4
    ? flattenArray(flattened)
5
    : flattened
6
  )
7
}
8

9
flattenArray([1, 2, [3, [4, 5]], 5, 6])

Use recursion, decrementing depth by 1 for each level of depth. Use Array.prototype.reduce() and Array.prototype.concat() to merge elements or arrays. Base case, for depth equal to 1 stops recursion. Omit the second argument, depth to flatten only to a depth of 1 (single flatten).

Lodash comes in handy here with several utilities like flatten that flattens array a single level deep. flattenDeep recursively flattens an array.flattenDepth also recursively flatten an array up to depth that defaults to 1.

1
import _ from "lodash";
2

3
_.flatten([1, [2, [3, [4]], 5]]);
4
// => [1, 2, [3, [4]], 5]
5

6
_.flattenDeep([1, [2, [3, [4]], 5]]);
7
// => [1, 2, 3, 4, 5]
8

9
var array = [1, [2, [3, [4]], 5]];
10

11
_.flattenDepth(array, 1);
12
// => [1, 2, [3, [4]], 5]
13

14
_.flattenDepth(array, 2);
15
// => [1, 2, 3, [4], 5]

Deep flattens an array

Use recursion. Use Array.prototype.concat() with an empty array ([]) and the spread operator (…) to flatten an array. Recursively flatten each element that is an array.

1
const deepFlatten = (arr) =>
2
  [].concat(...arr.map((v) => (Array.isArray(v) ? deepFlatten(v) : v)));

Now Behold your Future

The syntax for the flat and flatMap

1
var newArray = arr.flat([depth]); //defaults to one
2

3
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
4
    // return element for new_array
5
}[, thisArg])

1
[1, 2, [3, [4, 5]], 5, 6].flatMap((v, i) => (Array.isArray(v) ? v.flat() : v));

The future is here not Just evenly distributed. With the two methods, we can flatten an array easily. flatMap combines the power of the regular map and flat together.

1
// Infinity can be used to flatten recursively
2
[1, 2, [3, [4, 5]], 5, 6]
3
  .flat(Infinity)
4
  [
5
    // [1, 2, 3, 4, 5, 5, 6]
6

7
    (1, 2, [3, [4, 5]], 5, 6)
8
  ].flat() // flats 1 depth level - default
9
  [
10
    // [1, 2, 3, [4, 5], 5, 6]
11

12
    (1, 2, [3, [4, 5]], 5, 6)
13
  ].flat(2); // flats 2 depth level
14
// [1, 2, 3, [4, 5], 5, 6]

The flat method removes empty slots in arrays and it will be very useful in cleaning up arrays.

1
const arr = [1, 2, , 4, 5];
2

3
arr.flat(); // [1, 2, 4, 5]

Specification and Support

It is still in the candidate recommendation stage 3 in the TC39 Proposals meaning only very few browser will have implemented it. Google Chrome supports start from version 69 and Firefox from version 62 with Opera and Safari supporting from 56 and 12 respectively.

Nodejs does not have support for it at all.

Nodejs now supports Array.prototype.flat, Array.prototype.flatMap and flat and flatMap in Array.prototype[@@unscopables] in the recent nodejs version 11.15.0 release. Below is a screenshot from Node Green. What is Node Green? ( Its a node version of CanIUse)

.

Update Changelog