자바스크립트 함수 오버로딩 (Function Overloading)

09 Sep 2023

javascript

자바스크립트는 다른 프로그래밍 언어와 달리 함수 오버로딩을 직접적으로 지원하지 않습니다. 그러나 자바스크립트의 유연한 특성으로 인해, 함수 오버로딩을 구현하는 다양한 방법을 사용할 수 있습니다.

함수 오버로딩이란?

함수 오버로딩은 같은 이름의 함수를 여러 개 정의하고 전달하는 인자의 종류나 개수에 따라 실행되는 함수를 다르게 처리하는 개념입니다. 이는 같은 작업을 수행하지만 다양한 매개변수로 호출될 수 있도록 허용하는 기능을 제공합니다.

자바스크립트에서 함수 오버로딩 구현하기

방법 1: 인자의 타입에 따라 조건문으로 분기

function greet(name) {
  if (typeof name === 'string') {
    console.log(`Hello, ${name}!`);
  } else if (typeof name === 'number') {
    console.log(`Hello, Number ${name}!`);
  }
}

greet('John');      // Hello, John!
greet(123);         // Hello, Number 123!

위의 예제에서는 문자열과 숫자를 매개변수로 갖는 greet 함수를 정의했습니다. 매개변수 name의 타입에 따라 적절한 인사말을 출력합니다.

방법 2: 매개변수 개수에 따라 분기

function calculateArea(width, height) {
  if (arguments.length === 1) {
    // 정사각형의 넓이 계산
    console.log(`The area of the square is ${width * width}`);
  } else if (arguments.length === 2) {
    // 직사각형의 넓이 계산
    console.log(`The area of the rectangle is ${width * height}`);
  }
}

calculateArea(5);       // The area of the square is 25
calculateArea(4, 6);    // The area of the rectangle is 24

위의 예제에서는 calculateArea 함수를 정의하고, 매개변수의 개수에 따라 정사각형과 직사각형의 넓이를 계산합니다.

자바스크립트에서 함수 오버로딩 시 유의할 점

자바스크립트는 동적 타입 언어이기 때문에 함수 오버로딩을 엄격하게 구현하기 어렵습니다. 그러므로 다음과 같은 유의사항을 알고 있어야 합니다.

자바스크립트는 매개변수와 인자의 개수에 상관없이 모든 함수를 호출할 수 있습니다. 따라서 매개변수 개수와 타입 검사를 직접 구현해야 합니다.
혼돈을 방지하기 위해 함수의 이름을 식별할 수 있는 명확하고 의미 있는 이름을 사용하는 것이 좋습니다.
ES6 이상의 버전에서는 Rest 파라미터를 사용하여 가변 인자를 처리할 수 있습니다.

결론

자바스크립트에서 함수 오버로딩을 직접적으로 지원하지는 않지만, 유연한 특성을 통해 다양한 방법으로 함수 오버로딩과 비슷한 동작을 구현할 수 있습니다. 이를 통해 코드의 읽기성과 재사용성을 높일 수 있습니다.