타입스크립트 기초 문법 - 제네릭과 map,foreach 함수

📌Map과 ForEach 함수의 차이점

map - 배열 각 요소에 콜백함수를 실행한 후 새로운 배열을 반환해줌

foreach - 배열 각 요소에 콜백함수 실행만 해줌, 반환값 X

---

Map과 제네릭

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

 

map함수는 배열과 콜백함수 두 가지를 인수로 받는다.

위는 두 가지 인수 모두 unknown, 반환값 역시 unknownd으로 임시 설정해놓은 상태.

 

map([1,2,3], (item) => item * 2);

이 경우 매개변수 arr와 map함수 반환값 타입은 number[ ] , 콜백함수의 인수와 반환값 모두 number타입이다.

 

그래서 위 함수 식을 제네릭 함수로 바꾸면

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]))
   }
}

 

하지만 이렇게 제네릭 타입 변수를 하나만 설정하면 문제가 생긴다.

 

📌만약에 map([1,2,3] , (it)=>it.toString()) 이라면?

매개변수 arr와 콜백함수 인수는 number, 반환값은 string 타입으로 사용되는 타입이 두 가지 이상이다.

그렇다면 타입 변수를 두 개 이상 써서 반환값의 타입을 분리해야 한다.

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

 

📌또 만약에 이렇게 map 함수를 호출했다면?

 

   map([100,"string"], (it)=> it.toString())

 

 

인수로 들어가는 배열 함수는 넘버타입과 스트링타입이 섞여있다.

이 때 map 함수의 타입 정의는 다음과 같다.

 

     function map<string | number , string>(arr: (string | number)[], callback:(item: string | number) => string ) : string []

 

 

 

---

ForEach와 제네릭

forEach 함수는 반환값은 없기때문에 매개변수로 들어가는 배열과 콜백함수의 매개변수 타입만 정리해주면 된다.

 

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