map & flat & flatMap

map()

설명

💡 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수 

사용법

array.map(callback[, thisArg])
// arr : 원본 배열
// callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받음
// thisArg (선택) : 콜백 함수 내에서 사용할 this 값, 콜백 함수의 this 값 지정 가능

예시

const arr = [1, 2, 3];

const newArr = arr.map((num) => num * 2);
console.log(newArr); // map 리턴값 : [2, 4, 6]
console.log(arr); // 원본 배열 : [1, 2, 3]

flat()

설명

💡 중첩 배열 구조를 평탄화 시키기 위해 사용

사용법

array.flat([depth: number | Infinity]); 
// depth default : 1
// option - Infinity : 하위 배열이 없을 때까지 평탄화

예시

const abc = ['a', ['b', 'c', ['d', ['e']]]]

console.log(abc.flat()); // ['a', 'b', 'c', ['d', ['e']]]
console.log(abc.flat(2)); // ['a', 'b', 'c', 'd', ['e']]
console.log(abc.flat(Infinity)); // ['a', 'b', 'c', 'd', 'e']

flatMap()

설명

💡 주어진 배열의 각 요소에 대해 작성된 콜백 함수를 실행 후 해당 콜백 함수의 리턴값을 평면화하여 단일 수준의 새로운 배열을 생성하는 함수

사용법

array.flatMap(callback[, thisArg])
// arr : 원본 배열
// callback (필수) : 원본 배열의 각 요소에 대해 실행할 콜백 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받음
// thisArg (선택) : 콜백 함수 내에서 사용할 this 값, 콜백 함수의 this 값 지정 가능
// 배열의 최대 깊이 1만큼만 평탄화 가능

예시

const arr = [1, 2, 3];

/* map() */
const mapArr = arr.map((num) => [num, num * 2]);
console.log(mapArr); // map 리턴값 : [[1, 2], [2, 4], [3, 6]]

/* flatMap() */
const flatMapArr = arr.flatMap((num) => [num, num * 2]);
// === arr.map((num) => [num, num * 2]).flat();
console.log(flatMapArr); // flatMap 리턴값 : [1, 2, 2, 4, 3, 6]

비교

함수	리턴값
map()	콜백함수의 결과값이 정직하게 리턴
flatMap()	단일 구조의 배열이나 객체를 리턴