🛠️ 처음부터 만드는 FlatMap — 배열을 변환해서 한 번에 평탄화하기

개념

FlatMap은 Map과 Flatten을 동시에 수행하는 함수입니다. 배열의 각 요소를 변환한 후, 결과를 한 단계 평탄화합니다.

왜 필요한가?

```javascript
// FlatMap 없이 하면 두 번의 작업
const numbers = [1, 2, 3];
const doubled = numbers.map(n => [n, n * 2]);
const result = doubled.flat(); // [1, 2, 2, 4, 3, 6]
// FlatMap으로 한 번에
const result = numbers.flatMap(n => [n, n * 2]); // [1, 2, 2, 4, 3, 6]
```

구현하기

```javascript
function flatMap(arr, fn) {
const result = [];
for (const item of arr) {
const mapped = fn(item);
if (Array.isArray(mapped)) {
result.push(...mapped);
} else {
result.push(mapped);
}
}
return result;
}
```

실제 예제

```javascript
// 각 태그별로 관련 포스트 조회
const tags = ['React', 'JavaScript'];
const posts = tags.flatMap(tag =>
['Hook 정리', '성능 최적화', '타입스크립트 팁']
.filter(title => title.includes('React') || title.includes('타입'))
);
// 사용자 주문을 모두 합치기
const users = [
{name: 'Alice', orders: [101, 102]},
{name: 'Bob', orders: [201]}
];
const allOrders = users.flatMap(u => u.orders); // [101, 102, 201]
```

핵심 포인트

한 단계만 평탄화합니다 (깊이 1)

함수에서 배열이 아닌 값을 반환하면 그대로 포함됩니다

자바스크립트에 기본 제공되므로 대부분 `arr.flatMap(fn)` 사용

참고: [MDN - Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)