TypeScript-섹션7. 제네릭-map, forEach 메서드 타입 정의하기(3)

✅ 선요약

• map과 forEach 메서드는 배열의 각 요소에 콜백을 적용하는 대표적인 고차함수
• map: 반환값을 기반으로 새로운 배열 생성
• forEach: 반환값 없이 순회 목적으로 사용
• 타입스크립트에서는 제네릭 타입을 사용해 다양한 타입에 대응 가능
• map의 경우 원본 배열과 다른 타입으로도 매핑 가능하므로 타입 변수를 2개 사용함

---

📌 map 기본 구조

const arr = [1, 2, 3];
const newArr = arr.map((it) => it * 2);
// 결과: [2, 4, 6]

---

❌ 일반 함수 버전

function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {
  // ...
}

• 타입 안정성이 없음
• 콜백 반환값이나 요소 타입 추론 불가

---

✅ 제네릭 map 함수 - 1차 버전

function map<T>(arr: T[], callback: (item: T) => T): T[] {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map([1, 2, 3], (it) => it * 2); // ✅ [2, 4, 6]
map([1, 2, 3], (it) => it.toString()); // ❌ 오류

• T가 number로 고정되므로, string 반환 시 타입 충돌

---

✅ 제네릭 map 함수 - 2차 개선 버전

function map<T, U>(arr: T[], callback: (item: T) => U): U[] {
  let result: U[] = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map([1, 2, 3], (it) => it.toString()); // ✅ ["1", "2", "3"]
map(["a", "b", "c"], (it) => it.length); // ✅ [1, 1, 1]

• 입력 타입 T, 반환 타입 U 분리
• 훨씬 유연한 타입 추론이 가능해짐

---

📌 forEach 기본 구조

const arr2 = [1, 2, 3];
arr2.forEach((it) => console.log(it));
// 출력: 1, 2, 3

---

✅ 제네릭 forEach 함수

function forEach<T>(arr: T[], callback: (item: T) => void) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]);
  }
}

• 반환값이 없으므로 void 반환 타입 지정
• map보다 간단하고 안전하게 동작

forEach(["a", "b", "c"], (item) => {
  console.log(item.toUpperCase());
});

---

✅ 마무리 정리

함수명	특징
map	반환값 기반으로 새 배열 생성, U[] 반환
forEach	반환값 없음, 순회 목적, void 반환

제네릭을 활용하면 다양한 타입의 데이터에 대해
안정적인 타입 추론과 오류 방지가 가능해진다.