5.1 함수의 선언과 호출 방법

5.1.1 함수의 선언

타입스크립트에서 함수를 선언할 때 매개변수의 타입, 반환 값의 타입에 대한 명시를 할 수 있으며, 이를 통해 명확한 코드를 작성이 가능합니다. 함수를 정의하는 방법으로는 함수 선언식, 함수 표현식, 화살표 함수 등이 있으며 함수를 호출하는 방법은 자바스크립트와 동일합니다. 아래의 코드를 보며 타입이 명시되었을 때의 구조를 눈으로 익히고, 매개변수 및 반환 값 타입에 대한 설명은 목차 5.1.2부터 이어가도록 하겠습니다.

// 함수 선언식
function addNumber(a: number, b: number): number {
  return a + b;
}
console.log(addNumber(5, 15)); // 20

// 함수 표현식
let multiplyNumber = function (a: number, b: number): number {
  return a * b;
};
console.log(multiplyNumber(4, 5)); // 20

// 화살표 함수
let divideNumber = (a: number, b: number): number => {
  return a / b;
};
console.log(divideNumber(24, 3)); // 8

<aside> 💡 타입스크립트에서 함수의 반환 값 타입은 자동으로 추론되기 때문에 생략이 가능합니다!

</aside>

// 함수 선언식 반환 값 타입 생략
function addNumber(a: number, b: number) {
  return a + b;
}
console.log(addNumber(5, 15)); // 20

// 함수 표현식 반환 값 타입 생략
let multiplyNumber = function (a: number, b: number) {
  return a * b;
};
console.log(multiplyNumber(4, 5)); // 20

// 화살표 함수 반환 값 타입 생략
let divideNumber = (a: number, b: number) => {
  return a / b;
};
console.log(divideNumber(24, 3)); // 8

5.1.2 함수의 매개변수

1) 매개변수 선언 방법

함수의 매개변수는 괄호 안에 선언하며, 각 매개변수는 콤마로 구분됩니다. 타입스크립트에서는 매개변수 이름 뒤에 콜론(:)과 타입을 명시하여 매개변수의 타입을 선언합니다.

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2)); // 3

2) 기본 매개변수

함수 호출 시 전달되는 값이 없으면 기본값을 설정할 수 있습니다. 매개변수 선언 후 등호(=)를 사용하여 기본값을 명시합니다.

// 매개면수 greeting의 기본값을 'Hello'로 설정했습니다.
function greet(name: string, greeting: string = "Hello"): void {
  console.log(`${greeting}, ${name}!`);
}

greet("John", "Hi"); // Hi, John!

// 매개변수 greeting에 해당하는 값을 인자로 넘기지 않아 기본값인 'Hello'를 출력했습니다.
greet("John"); // Hello, John!

3) 선택적 매개변수

선택적 매개변수는 필요에 따라 전달할 수도, 전달하지 않을 수도 있는 매개변수입니다. 매개변수 이름 뒤에 물음표(?)를 붙여 선언합니다.

function greetSomeone(name: string, greeting?: string): void {
  if (greeting) {
    console.log(`${greeting}, ${name}!`);
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greetSomeone('John'); // Hello, John!
greetSomeone('John', 'Hi'); // Hi, John!

4) 나머지 매개변수

나머지 매개변수는 개수가 정해지지 않은 여러 개의 매개변수를 배열로 받을 수 있습니다. 선언 시 매개변수 이름 앞에 점 세 개(...)를 붙입니다.

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

console.log(sum(1, 2, 3)); // 6