Hey everyone 👋
Today's article is about two interesting (also important) array methods:
-
.flat() -
.flatMap()
Let's get started 🚀
1. .flat():
.flat() method recusively flattens the elements which are array into the original array and returns a new array.
#### Examples 👇
const array = [1,2,[3,4]];
const newArray = array.flat();
console.log(newArray);
// [1,2,3,4]
👉 .flat() receives an optional argument depth (1 by default).
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
👉 The .flat() method removes empty slots in arrays:
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]
2. .flatMap():
.flatMap() is identical to a .map() followed by a .flat() of depth 1.
#### Examples 👇
let arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
👉 .flatMap() only flattens the array up to depth 1.
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
👉 As you know .map always works one-to-one, but flatMap can be used to modify the number of items during map.
A nice example I found on MDN 👇
// Let's say we want to remove all the negative numbers
// and split the odd numbers into an even number and a 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]
a.flatMap( (n) =>
(n < 0) ? [] :
(n % 2 == 0) ? [n] :
[n-1, 1]
)
// [4, 1, 4, 20, 16, 1, 18]
That's it for this article, I hope you found it useful. 😊
Take a look on my article on array methods.
Please leave a like and follow me on twitter.
Top comments (0)