자바스크립트(JavaScript) 함수 오버로딩이란? 지원 여부와 동작 방식 완벽 정리

많은 프로그래밍 언어에서 함수 오버로딩(Function Overloading)은 같은 이름의 함수를 매개변수의 개수나 타입에 따라 여러 개 정의할 수 있는 기능입니다. 하지만 자바스크립트는 이러한 함수 오버로딩을 기본적으로 지원하지 않습니다.

함수 오버로딩의 일반적인 형태

일반적으로 오버로딩을 시도하면 다음과 같이 동일한 이름의 함수에 서로 다른 매개변수를 정의하게 됩니다.

function funcONE(x, y) {
   return x * y;
}
function funcONE(z) {
   return z;
}

자바스크립트에서 실제 동작 결과

위 코드는 에러를 발생시키지 않지만, 원하는 결과를 얻을 수 없습니다. 호출해 보면 다음과 같습니다.

// 5 출력
funcONE(5);

// 30이 아닌 5 출력
funcONE(5, 6);

왜 이런 결과가 나올까?

자바스크립트는 함수 오버로딩을 네이티브(native) 수준으로 지원하지 않기 때문입니다. 자바스크립트에서 함수는 객체이며, 같은 이름으로 함수를 여러 번 선언하면 나중에 정의된 함수가 먼저 정의된 함수를 덮어쓰게(override) 됩니다.

즉, 위 예제에서는 매개변수가 하나인 두 번째 funcONE(z) 함수만 유효합니다. 따라서 인자를 하나만 전달하든 두 개를 전달하든 항상 마지막에 정의된 함수가 실행되어 전달받은 첫 번째 값을 그대로 반환하는 것입니다.

오버로딩이 필요하다면?

매개변수 개수에 따라 다른 동작이 필요하다면, 함수 내부에서 arguments 객체나 나머지 매개변수(rest parameter)를 활용해 조건 분기를 처리하는 방법을 사용하는 것이 좋습니다.

function funcONE(...args) {
   if (args.length === 1) {
      return args[0];
   }
   return args[0] * args[1];
}

이처럼 자바스크립트에서는 함수 오버로딩 문법 대신 유연한 매개변수 처리 방식으로 동일한 목적을 달성할 수 있습니다.