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

map 메서드 타입 정의

자바스크립트의 배열 메서드 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[] {}

• 메서드를 적용할 배열을 매개변수 arr로 받고, 콜백 함수를 매개변수 callback으로 받는다.
• map 메서드는 모든 타입의 배열에 적용할 수 있기 때문에 arr의 타입은 unknown[]으로 정의한다.
• callback의 타입은 배열 요소 하나를 매개변수로 받아 특정 값을 반환하는 함수로 정의한다.
• 반환값의 타입은 배열 타입으로 정의한다.

 

제네릭 함수로 변환

이제 타입 변수를 선언하여 제네릭 함수로 만들고 함수 내부를 구현한다.

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를 사용하여 배열의 요소 타입과 콜백 함수의 반환 타입을 연결했다.

 

그러나 다음과 같이 사용하면 오류가 발생한다.

map(["1", "2"], (it) => parseInt(it)); // ❌

첫 번째 인수로 string[] 배열을 전달했을 때 타입 변수 T에는 string 타입이 할당된다. 그런데 콜백 함수는 number를 반환하므로, T => T 타입에 맞지 않아 오류가 발생한다.

 

map 메서드는 원본 배열 타입과 다른 타입의 배열로도 변환할 수 있어야 한다.

 

타입 변수 추가

타입 변수를 하나 더 추가하면 이 문제를 해결할 수 있다.

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

map(["1", "2"], (it) => parseInt(it)); // ✅

T는 원본 배열의 요소 타입, U는 반환 배열의 요소 타입으로 분리하여 서로 다른 타입의 배열로도 변환할 수 있게 되었다.

 

forEach 메서드 타입 정의

forEach 메서드는 배열의 모든 요소에 콜백 함수를 한 번씩 수행하는 메서드이다.

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

일반 함수로 구현

먼저 제네릭 없이 일반 함수로 만들어보자.

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

 

제네릭 함수로 변환

이제 타입 변수를 선언하여 제네릭 함수로 만들고 함수 내부를 구현한다.

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

함수는 2개의 매개변수를 받는다

• 첫 번째 매개변수 arr: 순회 대상 배열
• 두 번째 매개변수 callback: 모든 배열 요소에 수행할 함수
  forEach메서드는 반환값이 없으므로 콜백 함수의 반환값 타입을 void로 정의한다.

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