[Javascript] function overloading(함수 오버로딩)

 

What is Function Overloading?

An overloaded function is really just a set of different functions that happen to have the same name

 

설명을 번역하자면, 이름만 같고 다른 함수들의 집합이라고 되어있는데, 다른 프로그래밍 언어를 경험해보셨다면 굉장히 많이 보셨을터이니, 아마 예시를 보시면 쉽게 이해되실 겁니다. 

#include <iostream>
using namespace std;

void add(int a, int b)
{
  cout << "sum = " << (a + b);
}
 
void add(double a, double b)
{
    cout << endl << "sum = " << (a + b);
}

두 함수 모두 이름은 같은데, 파라미터 타입이 다른 함수죠? 

 

오버로딩 시, 굳이 다른 이름의 함수를 만들 필요 없이 재정의 함으로써, 해당 함수의 유연성을 높여주는 효과와 재사용성, 가독성 모두 증가시켜주는 이점이 있습니다.

 

In Javascript..

단, 아쉽게도 자바스크립트에선 불가능합니다.(뭔가 낚시기사 같지만...아닙니다) 애당초 Javascript의 모든 타입은 동적 타입이기에, 굳이 overriding을 구현안한것 같습니다만, 유사하게 구현할 수 있습니다.

 

먼저 사례 분석을 해볼까요?

googleapis module

구글 api 사용 시, 특히 authentication code 방식, 인증 구현 시, 사용되는 모듈입니다.

 

// googleapis/youtube/v3.js

....

    class Resource$Livechatbans {
        constructor(context) {
            this.context = context;
        }
        delete(paramsOrCallback, optionsOrCallback, callback) {
            let params = (paramsOrCallback || {});
            let options = (optionsOrCallback || {});
            if (typeof paramsOrCallback === 'function') {
                callback = paramsOrCallback;
                params = {};
                options = {};
            }
            if (typeof optionsOrCallback === 'function') {
                callback = optionsOrCallback;
                options = {};
            }
            ....
         }
     }

 

Resorce$Livechatbans 클래스(이하 livechat클래스)의 delete 메서드 보면 인자가 이름부터 심상치 않습니다.

 

paramsOrCallback , optionsOrCallback

바로 아래 구현부에서 각 파라미터들의 존재 유무를 확인하고, 없을 시, 빈 객체로 정의해버리네요.

그리고 해당 파라미터들의 타입 체크를 통해 오버로딩 처리를 합니다.

 

* p.s 해당 모듈에선 타입스크립트를 이용해 오버로딩을 좀더 쉽게 이뤘습니다*

//typescript
export declare function youtube(version: 'v3'): youtube_v3.Youtube;
export declare function youtube(options: youtube_v3.Options): youtube_v3.Youtube;


//javascript
function youtube(versionOrOptions) {
    return googleapis_common_1.getAPI('youtube', versionOrOptions, exports.VERSIONS, this);
}

위 타입스크립트 코드는 어짜피 런타임에서 전부 제거되고 순수 자바스크립트로 실행되기에, 사실상 거의 명시적인 용도긴 합니다.

 

Other ways?

비록 오버로딩의 정의(이름이 같다)는 만족하진 못하지만, 가독성에 치중한다면 다음과 같이 구현해 볼 수 있을것 같습니다.

const _sayHi = (familyName , middleName , lastName) => {
  let fName = familyName || 'doe';
  let mName = middleName;
  let lName = lastName || 'doe';

  if(!mName){
    console.log('안녕 ' + fName + ' ' + lName);
  }else{
    console.log('Hi ' + fName + ' ' + mName + ' ' + lName);
  }
}
const sayHiToKorean = (familyName , lastName) => {
  _sayHi(familyName , null , lastName);
}
const sayHiToForiegns = (familyName,middleName,lastName) => {
  _sayHi(familyName,middleName,lastName)
}

파라미터의 형태에 치중한 방식이긴 한데... 막상 구현하고 나니 오버로딩이랑 거리가 매우 멀어진듯 하지만.. 개인적으로 파라미터에 형태는 맞출 수 있다는 이점이 있기에 공유합니다. 인터페이스 함수( 실제로 사용할 함수)의 이름을 상황에 맞게 명시적으로 부여하고, 그에 맞게 본 함수(_sayHi)의 호출을 입맛대로 하는 방식입니다.