오버로딩이란?

일반적으로 오버로딩이란 이름은 같은데 인자가 다른, 그냥 다른 함수를 정의하는 것을 말합니다.

예를 들어 C++이나 Java에서는 아래처럼 이름만 같은, 다른 함수를 여러 개 정의할 수 있습니다.

namespace ft {

void someFunction(void);
void someFunction(size_t count);

}

package ft;

public interface OverloadingExample {
    void someFunction(void);
    void someFunction(int count);
}

자바스크립트의 오버로딩?

자바스크립트는 오버로딩 같은 기능을 언어 차원에서 제공하지 않습니다.

일반적인 오버로딩은 이름만 같은, 전혀 다른 함수를 정의하는 것이라고 했는데요,

자바스크립트의 오버로딩은 실제로 같은 함수 안에서 인자에 따라 다른 동작을 하는 것입니다.

function someFunction(...args) {
    if (args.length === 0)
        return someFunctionWithNoArgs();
    else if (args.length === 1 && typeof args[0] === 'number')
        return someFunctionWithNumberArgs(args[0]);
    else
        throw InvalidArgumentException("인자가 잘못 주어졌는데요?");
}

C++이나 Java에서는 오버로딩 된 함수를 잘못된 인자로 호출한다면 컴파일 단계에서부터 오류가 발생합니다.

하지만 자바스크립트는 잘못 호출하는 것을 방지하는 별도의 기능이 없습니다.

타입스크립트의 오버로딩!

자바스크립트에서는 잘못 호출하는 것을 방지하는 별도의 기능이 없다고 했는데요,

타입스크립트에서는 함수 하나에 여러가지 인자와 리턴 타입을 지정할 수 있습니다.

function someFunction(): void;
function someFunction(count: number): void;

function optionalMap(
  map: (data: number) => string,
  data: number,
): string;
function optionalMap(
  map: (data: number) => string,
  data: number | null,
): string | null;
function optionalMap(
  map: (data: number) => string,
  data: number | undefined,
): string | undefined;
function optionalMap(
  map: (data: number) => string,
  data: number | null | undefined,
): string | null | undefined {
  return data === null || data === undefined
    ? (data as null | undefined)
    : map(data);
}

단순히 함수 정의 앞에 인자, 리턴 타입이 다른 함수 선언을 추가하기만 하면 됩니다.

오버로딩된 타입을 나타내는 방법

오버로딩된 함수 타입은 interface를 통해 나타낼 수 있습니다.

interface OverloadedFunction {
  (): void;
  (count: number): void;
}