오버로딩 (Overloading)

오버로딩이라는 개념은 다른 언어에서는 존재하지만 자바스크립트에는 존재하지 않는 개념이다. 하지만 타입스크립트에는 존재한다.

파라미터를 하나만 받는 함수, 파라미터를 3개를 받는 함수를 만드는데 이것을 하나의 함수로 만들어 보자.

function stringOrString(
  memberOrMembers: string,
  member2?: string,
  member3?: string
): string | boolean {
  if (member2 && member3) {
    return `소녀시대 : ${memberOrMembers}, ${member2}, ${member3}`;
  } else {
    return `소녀시대 : ${memberOrMembers}`;
  }
}

console.log(stringOrString('태연', '윤아', '티파니'));
console.log(stringOrString('태연, 윤아, 티파니'));

하나의 파라미터를 입력받거나 3개의 파리미터를 입력받기 위해서 member2, member3는 optional로 처리를 해준다. 두 조건문의 결과는 동일하게 나올 것이다.

2개의 파라미터를 입력받게 하면 어떻게 될까?
코드상으로 보면 else 문으로 들어가서 memberOrMembers에 입력받은 두 문자열이 하나로 출력될 것이다. 하지만 2개의 파라미터를 입력받는 상황은 원하지 않을 수도 있다. 이 때, 오버로딩을 하면 된다.

function stringOrString(member: string): string; // 하나의 파라미터만 받는 함수
function stringOrString(member1: string, member2: string, member3: string): string;

함수의 이름은 같아야 한다. 우리가 다루고 싶은 시그니쳐와 동일하게 만들어 줘야 한다.
실제 실행문이 있는 함수의 타입을 오버로딩한다. 두 가지의 타입의 조합만 입력받을 수 있게 해준다. 따라서 2개의 파라미터를 입력하면 에러가 발생한다.

오버로딩을 하는 것은 유지보수가 힘들 수 있기 때문에 추천하지 않지만 그래도 코드를 봤을 때 이해는 할 수 있어야 하기 때문에 무엇인지만 알아가는 시간을 가져보았다.