## DEV Community

Thabi

Posted on • Updated on

# 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.