본문 바로가기

개발/Web

FlatMap() 이란? - map()과 다른점

flatMap()map()의 기능을 flat()단일 메서드로 결합하는 JavaScript 및 TypeScript의 고차 배열 메서드입니다 .

이 map()메서드는 제공된 콜백 함수를 기반으로 배열의 각 요소를 변환하고 변환된 요소가 포함된 새 배열을 반환합니다. flat()반면에 이 방법은 중첩된 배열을 단일 수준 배열로 병합합니다.

이 메서드는 배열의 각 요소에 함수를 flatMap()적용한 다음 결과 배열을 단일 수준 배열로 평면화합니다. map()제공된 콜백 함수를 사용하여 각 요소를 0개 이상의 요소 배열로 변환한 다음 해당 배열을 단일 수준 배열로 연결하여 이를 수행합니다.

const arr = [1, 2, 3];

const mapped = arr.map(x => [x, x * 2]);
console.log(mapped); // Output: [[1, 2], [2, 4], [3, 6]]

const flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

 

flatMap()을 사용한 경우

const arr = [1, 2, 3];
const pairs = arr.flatMap(x => [x, x * 2]);
console.log(pairs); // Output: [1, 2, 2, 4, 3, 6]

 

map()을 사용한 경우

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // Output: [2, 4, 6]

이 예에서 함수는 배열 의 각 요소에 flatMap()콜백 함수를 적용하여 배열의 배열을 생성합니다 . 그런 다음 이 배열을 단일 수준 배열로 평면화합니다 .x => [x, x * 2]arr[[1, 2], [2, 4], [3, 6]][1, 2, 2, 4, 3, 6]

map()따라서 and 사이의 주요 차이점은 항상 원래 배열과 동일한 길이의 배열을 반환하고 반면 콜백 함수의 출력에 따라 다른 길이의 배열을 반환할 수 있다는 flatMap()것입니다.