Hey everyone 👋

Today's article is about two interesting (also important) array methods:

1. .flat()
2. .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.

Thanks for reading. 💚

Happy coding.