flatMap 메서드

flatMap 메서드는 원본 배열의 각 요소에 메서드 매개변수에 지정된 콜백을 적용한 후 생성된 새 배열을 반환합니다. 첫눈에 flatMap 메서드는 map 메서드와 비슷해 보이지만, 주요 차이점은 항상 1차원 배열을 반환한다는 점입니다.

구문

javascriptlet newArray = 배열.flatMap(함수);

예시

flatMap 메서드를 사용하여 새 배열을 얻어봅시다:

javascriptlet arr = ['a', 'b', 'c'];

let res = arr.flatMap(function(elem) {
  return elem + '!';
});

console.log(res);

코드 실행 결과:

javascript['a!', 'b!', 'c!']

예시

숫자로 구성된 원본 배열로부터 새 배열을 얻어봅시다:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.flatMap(function(elem) {
  return elem + 2;
});

console.log(res);

코드 실행 결과:

javascript[3, 4, 5, 6, 7]

예시

첫 번째 중첩 레벨을 가진 배열에 flatMap 메서드를 적용해 봅시다:

javascriptlet arr = [1, 2, 3, [4, 5]];

let res = arr.flatMap(function getElem(elem){
  return elem + 2;
});

console.log(res);

코드 실행 후, 함수 조건이 하위 배열을 하나의 요소로 간주하여 적용되었음을 확인할 수 있습니다. 따라서 중첩된 배열에서 이 메서드를 호출하는 것은 의미가 없습니다:

javascript[3, 4, 5, '4,52']

예시

중첩 레벨을 고민하지 않고 전체 배열을 평탄화하고 싶다면, Infinity 매개변수를 사용하세요:

javascriptlet arr = ['a', 'b', ['c', 'd', ['e', 'f', ['g', 'h', ['i']]]]];

let res = arr.flatMap(Infinity);

console.log(res);

코드 실행 결과:

javascript[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'g', 'h', 'i'
]

예시

배열에 두 메서드, flatMap와 map를 적용해 봅시다. 두 메서드의 매개변수에는 배열을 2차원으로 만드는 함수가 지정됩니다:

javascriptlet arr = [1, 2, 3, 4, 5, 6];
let res1 = arr.map(elem => [elem * 3]);
let res2 = arr.flatMap(elem => [elem * 3]);

console.log('map 메서드', res1);
console.log('flatMap 메서드', res2);

코드 실행 결과:

javascript'map 메서드' [[3], [6], [9], [12], [15], [18]]
'flatMap 메서드' [3, 6, 9, 12, 15, 18]

같이 보기