[TypeScript] map, forEach 메서드 타입 정의하기

제네릭을 이용한 JS의 배열 메서드 map, forEach 구현

map 구현

const arr = [1, 2, 3];
const newArr = arr.map((it) => it * 2);

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

• 배열 arr에 map과 콜백 함수를 적용해 새로운 배열 newArr을 만들었는데, 이를 TS와 제네릭으로 구현해보려 한다.
• 먼저 메서드를 적용할 배열 arr과 콜백 함수 callback을 매개변수로 받아준다.
• 이 때 두 매개변수의 타입은 우선 모두 unknown으로 해주고, 함수의 반환값 타입도 unknown[]로 지정해준다.

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;
}

• 모든 타입을 타입 변수 T로 대체한다. arr은 T 타입의 배열, callback은 이 T 타입 요소 하나를 매개변수로 사용한다.

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

map(arr, (it) => it * 2);
map([1, 2], (it) => it.toString())

• 이 때 마지막 코드를 보면 number[]이기 때문에 T = number가 되는데, 콜백 함수를 거치면서 number가 string이 된다.
• 이 때는 타입 변수를 하나 더 지정해 콜백 함수를 거치면 다른 타입이 됨을 적어줘야 한다.

---

forEach 구현

const arr2 = [1, 2, 3];
const newArr2 = arr2.forEach((it) => console.log(it));

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

forEach(arr2, (it) => {
  console.log(it.toFixed());
});

forEach(['123', '456'], (it) => {
  it.split('');
});

• map 함수보다 더 간결하게 쓸 수 있다. 
• 이번에는 콜백 함수로 반환값을 갖는 대신 콘솔에 찍기 때문에 콜백 함수의 반환 값을 void로 지정했다.
• arr2를 순환하면서 각각의 요소를 toFixed해서 콘솔에 찍게 한다. T는 number 타입이 되므로 문제 없이 찍힌다.
• ['123', '456']의 경우 T는 string 타입이 되므로 split 메서드도 문제 없이 적용할 수 있다.

 

---

 

 

 **출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)