[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수)

[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수)

 

 

📌 함수 매개변수

변수와 마찬가지로 타입 애너테이션으로 함수의 매개변수의 타입을 선언할 수 있다.

function home(todo: string){
    console.log(`오늘 할일 : ${todo}!`);
}

any 타입 매개변수

function home(todo){
    console.log(`오늘 할일 : ${todo}!`);
}

매개변수에 명시적 타입 정보가 선언되어 있지 않기 때문에 타입을 알 수 없다.
이 경우 매개변수는 any 타입으로 간주된다.

 

📌 필수 매개변수와 선택적 매개변수

✏️ 필수 매개변수

자바스크립트에서는 인수의 수와 상관없이 함수를 호출할 수 있는 반면, 타입스크립트에서는 잘못된 수의 인수로 함수가 호출되면 타입 오류가 발생한다.

function home(first: string, second: string){
	console.log(`오늘 할 일 : ${first} 와 ${second}`);
}

// Error: Expected 2 arguments, but got 1.
home("요리");

// Ok
home("러닝 타입스크립트 공부", "공부한 내용 블로그 정리");

// Error: Expected 2 arguments, but got 3.
home("책상 정리", "유튜브", "게임");

home 함수는 두 개의 매개변수가 필요하다. 하나의 매개변수만 전달하거나 세 개의 인수를 전달하면 에러가 발생한다.

이렇게 필수 매개변수를 제공하도록 강제하면 예상되는 모든 인숫값을 함수 내에 존재하도록 만들어 타입 안정성을 강화하는데 좋다.

 

✏️ 선택적 매개변수

자바스크립트에서는 함수에 매개변수가 제공되지 않으면 함수 내부의 인숫값은 undefined 로 설정된다. 타입스크립트에서는 이 경우 오류를 표시하지 않도록 타입 애너테이션 : 앞에 ? 를 추가해 매개변수가 선택적이라 표시한다.

이 선택적 매개변수에는 | undefined 가 유니언 타입으로 추가되어 있다. 선택적 매개변수는 undefined 가 될 수 있다는 것이다.

 

function home(first: string, second?: string){
    console.log(`오늘 할 일 : ${first} 뿐이다.`);
    
    if(second) {
        console.log(`오늘 할 일 : ${first} 와 ${second}`);
    }
}

home("요리"); // Ok
home("러닝 타입스크립트 공부", "undefined"); // Ok
home("러닝 타입스크립트 공부", "공부한 내용 블로그 정리"); // Ok

여기서 second 는 string | undefined 가 되는 것이다. 그리고 if 문에 따라 string 타입으로 좁혀진다.

 

선택적 매개변수는 | undefined 를 포함한 유니언 타입의 매개변수와는 다르다.

function home(first: string, second: string | undefined){
    console.log(`오늘 할 일 : ${first} 뿐이다.`);
    
    if(second) {
        console.log(`오늘 할 일 : ${first} 와 ${second}`);
    }
}

home("요리"); // Error🔥

home("러닝 타입스크립트 공부", "undefined"); // Ok
home("러닝 타입스크립트 공부", "공부한 내용 블로그 정리"); // Ok

 

| undefined를 포함한 유니언 타입의 경우 값이 undefined 일지라도 항상 제공되어야 한다.

 

📌 기본 매개변수와 나머지 매개변수

✏️ 기본 매개변수

자바스크립트에서는 함수의 기본값을 = 를 통해서 제공할 수 있었다.

매개변수에 기본값이 있고 타입 애너테이션이 없는 경우, 타입스크립트는 해당 기본값을 기반으로 매개변수 타입을 유추한다.

function home(first: string, second="블로그 정리") {
	console.log(`오늘 할일 : ${first} / ${second}`);
}

home("러닝 타입스크립트 공부"); // Ok
home("러닝 타입스크립트 공부", "프로젝트"); // Ok
home("러닝 타입스크립트 공부", undefined); // Ok

home("러닝 타입스크립트 공부", 5);
// Error: Argument of type '5 is not assignable to
// prarameter of type 'string | undefined'.

여기서 second 매개변수 타입은 string 으로 추론된다.

기본 매개변수를 사용해 함수를 호출할 때 second 매개변수를 생략하면 그 값은 undefined 가 된다. 기본 매개변수가 지정되어 있더라도 해당 매개변수가 undefined 값을 가질 수 있는지 여부를 고려해서 타입 검사를 수행한다.

home 을 호출할 때 second 매개변수에 undefined 를 전달하는 것이 가능한 것이다.

즉, 기본 매개변수를 사용하여 함수를 호출할 때 두 번째 인자를 전달하지 않거나 undefined 를 전달하는 경우 기본값이 출력된다.

 

✏️ 나머지 매개변수

타입스크립트에서의 나머지 매개변수(Rest Parameters)는 함수의 선언 시에 사용되며, 해당 매개변수를 통해 임의의 수의 인수를 전달할 수 있다.

나머지 매개변수는 스프레드 연산자(...)를 사용하여 표시하며, 일반적으로 함수의 매개변수 목록의 마지막에 위치한다.

 

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

이 함수는 sum이라는 이름을 가지며, numbers라는 나머지 매개변수를 가지고 있다.

나머지 매개변수 numbers는 number 타입의 임의의 수의 인수를 받을 수 있다.

함수 내부에서 numbers는 단일 배열로 저장된다. 예를 들어, 다음과 같이 함수를 호출할 수 있다.

console.log(sum(2, 3, 4, 5)); // 출력: 14
console.log(sum(15, 25)); // 출력: 40

sum 함수는 전달된 모든 인수를 배열로 받아들이고, 그 배열의 요소들을 모두 더하여 결과를 반환한다.

numbers 매개변수에는 호출할 때 전달된 인수들이 배열로 저장된다.

 

이러한 나머지 매개변수의 사용은 함수가 가변 인수를 처리해야 할 때 유용하다.
즉, 함수가 얼마나 많은 인수를 받을지 미리 알 수 없는 경우에 유연하게 처리할 수 있도록 도와주는 것이다!

 

함수를 호출할 때, 나머지 매개변수는 선택적으로 사용될 수 있다. 즉, 함수를 호출할 때 나머지 매개변수에 인수를 전달하지 않아도 된다.

만약 나머지 매개변수에 인수가 없는 경우, 해당 매개변수는 빈 배열로 초기화된다.

function introduce(name: string, ...teamMembers: string[]) {
  console.log(`Team Lead: ${name}`);
  console.log("Team Members:");
  for (const member of teamMembers) {
    console.log("- " + member);
  }
}

introduce("ramin"); // Team Lead: ramin, Team Members: (빈 배열 출력)
introduce("ramin", "choi", "dana", "udin");
/*
  Team Lead: ramin
  Team Members:
  - choi
  - dana
  - udin
*/

 

 

---

참고 : 러닝 타입스크립트를 읽고, chat GPT 의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.