Array.prototype.map (ES5)

배열내의 요소 각각에 대하여 주어진 함수를 호출하여 전달받은 return 값을 모아 기존과는 다른 새로운 배열을 반환한다.

Array.prototype.flatMap (ES2019)

배열내의 요소 각각에 대하여 주어진 함수를 호출하여 전달받은 return 값을 모아 전달받은 reutrn 값이 만일 다차원 배열일 경우(깊이가 다른경우) 깊이를 -1 한다음 그 값을 모아 새로운 배열을 생성한다.

글로 읽게 될 경우 이해가 잘 가지 않을 수 있다.
예제를 확인해보면 보다 쉽게 이해할 수 있음으로 예제를 통해 추가적으로 설명하겠다.

비교

예제 1

console.log([1, [3], [2]].map(ele => ele)) // [ 1, [ 3 ], [ 2 ] ]
console.log([1, [3], [2]].flatMap(ele => ele)) // [ 1, 3, 2 ]

map 의 경우 깊이를 flat하지 않고 원래 깊이 그대로 새로운 배열을 생성한다.
flatMap 의 경우 깊이가 2인 [3], [2]가 1과 동일한 깊이로 flat 된 후 생성된 것을 볼 수 있다.

예제 2

• map 내부 함수에서 배열을 return 받았을 경우

const alphabets = ['a', 'b', 'c'];
const fruits = ['apple', 'banana', 'cherry'];

const mappedWord = alphabets.map((alphabet, index) => [alphabet, fruits[index]]);
console.log(mappedWord)
// [ [ 'a', 'apple' ], [ 'b', 'banana' ], [ 'c', 'cherry' ] ]
// 즉 Array안의 요소를 map 의 콜백함수의 return 값으로 채운다.


const flatMappedWord = alphabets.flatMap((alphabet, index) => [alphabet, fruits[index]]);
console.log(flatMappedWord)
// [ 'a', 'apple', 'b', 'banana', 'c', 'cherry' ]
// map 과의 차이점은 map 에서 한개의 깊이를  평평하게 만들어 주는 것이다.

const flatMappedWordTwo = alphabets.flatMap((alphabet, index) => [[alphabet, fruits[index]]]);
console.log(flatMappedWordTwo)
// [ [ 'a', 'apple' ], [ 'b', 'banana' ], [ 'c', 'cherry' ] ]
// 즉 return 값을 2차원 배열로 전달 받게 되면 1차원 배열로 변경하는 것이다.

1차원 배열일 경우 map 은 생성된 배열이 2차원 배열이지만 flatMap의 경우 1단계 flat되어 1차원 배열이 생성된 것을 볼 수 있다.
그렇기 때문에 2차원 배열을 return 받았을 경우에는 flatMap 으로 생성된 배열은 2차원 배열이 될 것이다.

요약

• flatMap은 map의 역활 + flat의 역활까지 해준다.
• 즉 reutrn 받는 각각의 요소들의 깊이를 -1씩 하여 보다 평평하게하고 새로운 배열을 생성한다.