[TypeScript] Overloading 오버로딩

오버로딩이라는 개념은 많은 언어에 존재하는 개념입니다.

하지만 자바스크립트에는 없고 타입스크립트에는 존재합니다.

타입스크립트의 오버로딩에 대하여 알아보겠습니다.

 

Overloading

오버로딩은 동일한 함수 이름으로 다양한 매개변수 및 반환 타입을 가진 여러 버전의 함수를 정의하는 것을 말합니다.

이를 통해 다양한 형태의 입력을 받아들이고 그에 따라 다양한 출력을 반환할 수 있습니다.

 

함수 시그니처

function stringOrStrings(members: string): string;
function stringOrStrings(member1: string, member2: string, member3: string): string;

• 첫 번째 시그니처: 문자열 하나를 받아서 문자열을 반환합니다.
• 두 번째 시그니처: 세 개의 문자열을 받아서 문자열을 반환합니다.

먼저 함수 시그니처를 정의합니다.

(함수 시그니처는 함수의 형태를 정의한 부분으로, 함수의 이름, 매개변수의 타입과 개수, 반환 타입들을 명시하는 역할)

 

함수 구현

string을 반환하는 함수를 선언할 건데 만약 하나의 파라미터만 입력받는다면 명단을 하나의 스트링으로 입력을 받을 수 있습니다.

그리고 세 개의 파라미터를 받는다면 각각 명단을 각각의 파라미터의 값으로 입력을 받을 수 있습니다.

function stringOrStrings(memberOrMembers: string, member2?: string, member3?:string) :string {
    if(member2 && member3){
        return `명단 : ${memberOrMembers}, ${member2}, ${member3}`;
    } else {
        return `명단 : ${memberOrMembers}`;
    }
}

첫 번째 파라미터로는 memberOrMembers에는 문자열 하나 또는 여러 명단을 받아들입니다.

두 번째와 세 번째 파라미터인 member2, member3는 optional(선택적) 파라미터로 선언하였습니다.

조건문을 통하여 두 번째와 세 번째 파라미터가 모두 존재하는 경우와 아닌 경우 다른 문자열을 반환하도록 작성하였습니다.

 

함수 호출

console.log(stringOrStrings('잘자세연, 누구세연, 안녕하세연'));
console.log(stringOrStrings('잘자세연', '누구세연', '안녕하세연'));
// console.log(stringOrStrings('잘자세연', '누구세연'));

• 첫 번째 호출: 하나의 문자열을 받아들이는 경우로, 명단들을 하나의 스트링으로 합쳐 반환합니다.
• 두 번째 호출: 세 개의 문자열을 받아들이는 경우로, 각각의 파라미터의 값으로 명단을 입력받아 반환합니다.
• 주석 처리된 세 번째 호출은 오버로딩된 시그니처 중 하나에 맞지 않기 때문에 주석 처리되어 있습니다.

 

이렇게 함수 오버로딩을 사용하면 여러 가지 시나리오에 대응하는 하는 함수를 더 명확하게 작성할 수 있습니다.

하지만 오버로딩을 사용했을 때 상황이 복잡해질 수 있기 때문에 저는 웬만하면 오버로딩을 사용하지 않고 각각의 함수를 따로 만들어 가지고 사용하시는 게 조금 더 유지보수가 편할 수 있다고 생각합니다!