[JavaScript] flat vs map vs flatMap

flat()

배열 안에 또 다른 배열이 있을 때, 그 배열들을 지정한 깊이만큼 펼쳐서 하나의 새로운 배열로 만들어 줍니다.

const arr = [1, [2, [3, [4]]]];
arr.flat(1) → 배열을 한 단계만 펼침: [1, 2, [3, [4]]]
arr.flat(2) → 두 단계까지 펼침: [1, 2, 3, [4]]
arr.flat(3) → 세 단계까지 펼침: [1, 2, 3, 4]

• Infinity와 사용 가능

const result = arr.flat(Infinity);
console.log(result); // [1,2,3,4] 

map()

배열의 각 요소를 순회하여 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환합니다.

const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);

console.log(map1); // [2, 8, 18, 32]

flatMap()

배열의 각 요소에 주어진 함수를 적용한 결과를 새 배열로 만든 다음, 그 배열을 한 단계만 펼쳐서 반환합니다.

map()과 flat(1)을 합친 기능

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

map() 역할: 각 요소에 함수를 적용해 [1, 2], [2, 4], [3, 6]을 만듦.
flat(1) 역할: 결과 배열을 한 단계 펼쳐서 [1, 2, 2, 4, 3, 6]으로 만듦.