✏️ 함수

👉 필수 매개변수

기본적인 함수의 형태에 대해 알아보겠습니다.

function add(num1: number, num2: number): number {
  return num1 + num2;
}

위 함수를 보면 함수에 들어오는 매개변수와 함수의 반환값에 대한 타입을 지정하는 것을 볼 수 있습니다. 하지만 함수에서 return이 없을 경우도 있습니다. 이러한 경우에는 아래처럼 함수의 타입을 void로 지정해 주면 됩니다.

function add(num1: number, num2: number): void {
  console.log(num1 + num2);
}

👉 optional 매개변수

함수의 매개변수도 interface처럼 optional 하게 지정할 수 있습니다. 다음의 예제를 통해 알아보겠습니다.

function people(name?: string): string {
  return `Hello, ${name || "word"}`;
}

const result1 = people(); --- (1)
const result2 = people('kim'); --- (2)
const result3 = people(123); --- (3)

people 함수의 매개변수 name이 물음표'?'로 optional 하게 지정되었으므로 (1) 번과 (2) 번에서는 에러가 발생하지 않습니다. 하지만 매개변수가 optional 하더라도 string으로 지정하였다면 string 타입을 지켜야 합니다. 만약 (3) 번과 같이 타입을 지키지 않았다면 error가 발생할 겁니다.


다음은 필수 매개변수와 optional 한 매개변수를 같이 사용해 보겠습니다.

function people(name: string, age?: number): string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age}.`;
  } else {
    return `Hello, ${name}`;
  }
}

const result1 = people('kim'); --- (1)
const result2 = people('kim', 30); --- (2)

(1) 번과 (2) 번 모두 error가 발생하지 않습니다. 하지만 매개변수의 순서가 age?: number, name: string처럼 optional 한 매개변수가 필수 매개변수보다 앞선 경우에는 error가 발생합니다.


만약 optional 한 매개 변수를 필수 매개변수보다 먼저 사용하고 싶다면

function people(age?: number | undefined, name: string): string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age}.`;
  } else {
    return `Hello, ${name}`;
  }
}

const result1 = people(30, 'kim');
const result2 = people(undefined, 'kim');

위 코드와 같이 undefined를 붙여서 사용해야 합니다.

👉 나머지(rest) 매개변수

function add(...nums: number[]) {
  return nums.reduce((result, num) => result + num, 0);
}

const result1 = add(1, 2, 3); --- (1) //6
const result2 = add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); --- (2) // 55

나머지 매개변수는 매개변수 앞에 '...'을 붙여주면 됩니다. 나머지 매개변수를 사용하면 (1)번과 (2)번처럼 함수에 들어가는 매개변수의 개수가 매번 달라질 수 있습니다. 또한 전달받은 매개변수를 배열로 나타낼 수 있습니다. 그래서 매개변수 타입을 number[]로 지정해줍니다.