[TypeScript] map, foreach 메서드 타입

🎯 map 메서드

✅ 정의

map()은 배열의 모든 요소를 순회하면서 특정 연산을 수행한 새로운 배열을 반환하는 메서드

• 기존 배열을 변경하지 않음
• 각 요소를 변환한 새로운 배열을 반환

✅ 예시

let arr = [1, 2, 3];

let newArr = arr.map((i) => i * 2);

function map<T>(arr: T[], callback: (i: T) => T) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map(arr, (i) => i * 2);
map(["hi", "im"], (i) => i.toUpperCase());

• 현재 제네릭 함수를 통하여 타입 선언
• 해당 코드 map메서드 부분에서 arr은 숫자 타입으로, 아래 배열 부분에서는 string 타입으로 잘 지정되어있음
• 하지만 아래 사진과 같이 toUpperCase말고 parseInt()를 사용하면 오류가 발생
  
• parseInt()는 안에 매개변수로 들어가는 값을 int형으로 변환해주는 함수
• 저렇게 코드를 작성하면 콜백함수의 반환값이 number이 되는 것이다
• 처음 "hi"를 통해 T는 string 타입이 된다.
• 그래서 콜백함수의 매개변수의 타입도 string이 되며, 반환값 T도 string 타입이 됨
• 그런데 여기서 parseInt() 함수로 타입을 number으로 바꾸게 되면 타입이 서로 안맞아 충돌 발생
• 이럴 때 해결하는 방법은 아래 코드와 같이 2개의 타입 변수를 적어주면 된다.

let arr = [1, 2, 3];

let newArr = arr.map((i) => i * 2);

function map<T, U>(arr: T[], callback: (i: T) => U) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    result.push(callback(arr[i]));
  }
  return result;
}

map(["hi", "im"], (i) =>  parseInt(i));

• 이렇게 작성하면, "hi"는 T를 가리키고 있어 string 타입이 되며
• 그 뒤 parseInt(i)는 U를 통해 number 타입이 된다.

🎯 forEach

✅ 정의

forEach()는 배열의 모든 요소를 순회하면서 주어진 콜백 함수를 실행하는 메서드

• 배열의 모든 요소를 순서대로 순회
• 콜백 함수를 실행
• 배열을 변환하는 것이 아니라 반복 작업을 수행할 때 사용

✅ 예시

let arr2 = [1, 2, 3];

arr2.forEach((i) => console.log(arr2));

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

forEach(arr, (i) => {
  console.log(i.toFixed());
});
forEach(["123", "456"], (i) => {
  i;
});

• 이와 같이 제네릭 함수를 사용하게 된다면 매개변수가 어떻든 유연하게 사용할 수 있는 것을 알 수 있다.

---

출처

한 입 크기로 잘라먹는 타입스크립트
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard