[TypeScript]함수 오버로딩(Function Overloading)이란?

함수 오버로딩이란?

TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다.

---

매개변수의 개수는 동일하지만, 타입이 다른 경우

// 함수 선언
function add(a: string, b: string): string;
function add(a: number, b: number): number;

// 함수 구현
function add(a: any, b: any): any {
  return a + b;
}

// 함수 호출
console.log(add(1, 2));
// 3

두 개의 함수 선언과 하나의 함수 구현이 있는 동일한 함수가 존재합니다. 첫 번째 함수 선언은 문자열 타입인 두 매개변수를 가지며, 두 번째 함수 선언은 숫자형인 두 매개변수를 가집니다.

 

마지막 함수에는 함수의 본문을 구현해야 합니다. 반환 타입은 위에서 선언한 두 개의 함수에 따라 문자열 또는 숫자형일 수 있으므로 any 타입으로 정의하며, 매개변수도 any 타입으로 정의합니다.

---

매개변수의 개수는 다르지만, 타입은 동일한 경우

// 함수 선언
function add(a: number): number;
function add(a: number, b: number): number;
function add(a: number, b?: number, c?: number): number;

// 함수 구현
function add(a: number, b?: number, c?: number): number {
  return a + (b ?? 0) + (c ?? 0);
}

// 함수 호출
console.log(add(1, 2, 3));
// 6

세 개의 함수 선언과 하나의 함수 구현이 존재합니다. 첫 번째 함수 선언은 한 개의 매개변수를 가지며 두 번째 함수 선언은 두 개, 세 번째 함수 선언은 세 개의 매개변수를 가집니다.

 

마지막 함수에는 함수의 본문을 구현하였으며, 두 번째 매개변수와 세 번째 매개변수는 선택적 프로퍼티( ?: )를 사용합니다. 함수 호출에서 두 번째 매개변수와 세 번째 매개변수에 값을 전달하지 않으면, undefined로 할당됩니다. 그러므로 Null 병합 연산자( ?? )를 사용하여 null 또는 undefined인 경우 0을 반환하도록 합니다.

반응형

---

매개변수의 개수와 타입이 다른 경우

// 함수 선언
function printConsole(a: number): void;
function printConsole(a: string): void;
function printConsole(a: number, b: string): void;
function printConsole(a: string, b: number): void;

// 함수 구현
function printConsole(a: any, b?: any): void {
  console.log(a, b);
}

// 함수 호출
printConsole('1');
printConsole('1', 2);

네 개의 함수 선언과 하나의 함수 구현이 존재합니다. 네 개의 함수 선언은 서로 다른 갯수와 타입의 매개변수를 가집니다.

 

마지막 함수에는 함수의 본문을 구현하였으며, 두 번째 매개변수는 선택적 프로퍼티를 사용합니다. 그리고 전달되는 값이 숫자형 또는 문자열일 수 있으므로 매개변수의 타입을 any 타입으로 정의합니다.

 

만약, 함수 호출에서 두 인자의 타입이 문자열인 경우 에러가 발생합니다.

네 개의 함수 선언에서 첫 번째 매개변수와 두 번째 매개변수가 문자열인 함수 선언문이 존재하지 않기 때문입니다.