JavaScript Arrays
JavaScript
flatturns a nested array into a shallower one.
By default it only removes one level of nesting.
flatMap does a map and a single flat in one step.
Example
javascript
const nested = [1, [2, 3], [4]];
console.log(nested.flat().join(","));The output is 1,2,3,4.
flat(depth) returns a new array with nested arrays pulled up.
The default depth is 1.
flatMap runs a callback and then flattens the result by one level.
Syntax
javascript
array.flat(depth);
array.flatMap(callback);Both return a new array and leave the original alone.
One call only removes one level unless you say otherwise.
Example
javascript
const deep = [1, [2, [3, [4]]]];
console.log(deep.flat().length);
console.log(deep.flat(2).length);Each extra level of depth pulls up one more layer.
Infinity flattens however deep the nesting goes.
Example
javascript
const deep = [1, [2, [3, [4]]]];
console.log(deep.flat(Infinity).join(","));The output is 1,2,3,4.
flat also drops holes in a sparse array.
Example
javascript
const sparse = [1, , 3];
console.log(sparse.flat().length);The empty slot disappears, leaving two elements.
This is useful when each element becomes several elements.
Example
javascript
const sentences = ["a b", "c d"];
console.log(sentences.flatMap(s => s.split(" ")).join(","));Without flatMap you would get an array of arrays.
If the callback returns deeper nesting, you still need flat.
Example
javascript
const list = [1, 2];
console.log(list.flatMap(n => [n, [n * 10]]).length);The inner arrays are still there, because only one level was flattened.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript flat</title>
</head>
<body>
<h1>JavaScript flat</h1>
<p id="result"></p>
<script>
const groups = [["Ada", "Grace"], ["Alan"], ["Edsger"]];
const everyone = groups.flat();
document.getElementById("result").innerHTML = everyone.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try nesting deeper:
Wrap one group in another array and see that flat() alone is not enough.
flat removes one level of nesting by default.flat(Infinity) flattens completely.flat also removes empty slots.flatMap is a map followed by one level of flattening.flat tidies nested arrays into a single list.
flatMap saves a step when each element expands into several.
Both return new arrays, so the original stays as it was.