Smooshing arrays : flat() and flatMap()

If you want to flatten an array that has sub-arrays, these two methods are helpful. They were introduced in the ES2019 standard. There was a bit of a controversy with the initial name flatten.

Sometimes, we have to deal with data in nested arrays, you can implement the function yourself

function flattenArrays(arrays) {  const result = []  arrays.forEach(array => {    array.forEach(el => {      result.push(el)    })  })  return result}flattenArrays([[5, 10],15, 20]])// Expect result : [5, 10, 15, 20]// This function will only flatten one level of arrays 

Luckily Javascript already provides the .flat() array method. Check browser support before using it.

[1,2,3,4,5,6,7,8,9,[10,11,12],13,14,15].flat()// Expect result : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

.flat() only flattens one level of arrays. Nested arrays deeper than one level are left unmodified.

[1,2,[[3,4],5],6,7,8,9,[10,11,12]].flat()// Expect result: [1, 2, [3, 4], 5, 6, 7, 8, 9, 10, 11, 12]

You can flatten beyond the first level, the default depth is 1. The depth can also be Infinity to flatten all arrays.

//flatten two levels deep [1,2,[[3,4],5],6,7,8,9,[10,11,12]].flat(2)//Expect result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

The depth can be Infinity, in which case flat will flatten all arrays no matter how deeply nested they are.

[[[1]],[[[2]]],[3]].flat(Infinity)//Expect result: [1, 2, 3]

• Note: The flat method only flattens arrays and stops when it is a non-array value. If there are arrays inside an object, it will skip them.

[{ item:'shirt', stockIds: [124,12,145,12,33]}, [121,[2],[1]].flat(Infinity)/* Expect result: [{  item: "shirt",  stockIds: [124, 12, 145, 12, 33]}, 121, 2, 1] */

.flat() is so commonly used with .map() that a .flatMap() method was created.

Imagine if you sold paint, and you had a tracking system that allows you to save different colours for each brand. You might want to write a list of every colour you have in stock regardless of the brand.

const paintBrands = [  {name: 'Dulux', colours: ['red', 'white', 'green', 'yellow']},  {name: 'Berger', colours: ['grey', 'orange']}]paintBrands.flatMap(stock => stock.colours)//Expect result: ["red", "white", "green", "yellow", "grey", "orange"]

• Note: .flatMap only flattens to 1 depth.

If you have any interesting use-cases for these methods please share below. Thanks for reading.