[JS] Array.flatMap 메서드 활용법

flatMap() 메서드는 콜백이 반환하는 값이 배열이면 1 뎁스까지 펼쳐서 반환한다. map(), flat() 메서드를 체이닝한 것과 동일한 효과를 가진다. e.g. arr.map(...args).flat()

const numbers = [1, 2, 3, 4, 5];
numbers.map((n) => [n * 2]); // [[1], [2], [3], [4], [5]]
numbers.flatMap((n) => [n * 2]); // [2, 4, 6, 8, 10]

const sayHello = ['Hello', 'World'];
sayHello.map((word) => word.split('')); // [['H', 'e', 'l', 'l', 'o'], ['W', 'o', 'r', 'l', 'd']]
sayHello.flatMap((word) => word.split('')); // ['H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd']

 

만약, flatMap()의 콜백 함수가 빈 배열을 반환하면 결과 배열에 포함되지 않는다. 이를 활용하면 filter() 메서드와 비슷하게 특정 조건을 만족하는 요소로 이뤄진 새로운 배열을 생성할 수 있다.

const numbers = [1, 2, 3, 4, 5];
numbers.flatMap((n) => (n % 2 === 0 ? [n] : [])); // [2, 4]

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요