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]