Mohd Shahid
Shahid's Blog

Shahid's Blog

2 Important! Array methods you should know.

2 Important! Array methods you should know.

.flat() and .flatMap()

Mohd Shahid's photo
Mohd Shahid
ยทAug 22, 2021ยท

2 min read

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.

ย 
Share this