자바스크립트 함수 오버로딩 구현하는 방법은?

함수 오버로딩(Overloading)에 대하여 아시나요? 그렇다면 자바스크립트에서 함수 오버로딩을 비슷하게 구현하는 방법은 무엇일까요? 아래에서 알아봅니다.

# 함수 오버로딩이란?

전달된 인자에 따라서 다르게 동작하는 함수를 함수 오버로딩(Over Loading)이라고 부릅니다. 자바스크립트인 함수형 언어만 알고 있다면 함수의 오버로딩을 이해하는 것이 더 어려울 수 있습니다. 그 이유는 바로 자바스크립트는 자료의 타입을 선언하지 않기 때문인데 아래에서는 먼저 함수의 오버로딩이 왜 필요한가를 생각해봅니다.


! 동일한 이름의 함수가 다른 동작을 하는 것이 가능한가
함수의 이름이 같은데 다른 동작이 가능할까요? 예를들어 Plus()라는 함수가 존재한다고 생각해봅시다. Plus 함수는 전달받은 인자를 더해주는 간단한 동작을 수행합니다. 다만 문자의 경우 중간의 띄어쓰기를 사용하여 더하고 숫자는 더하기 합을 구하는 함수입니다. 이를 구현하기 위하여 두 개의 다른 이름을 갖는 함수를 만들 수도 있지만 함수 오버로딩으로 동일한 이름의  함수를 사용할 수 있는 것입니다.

함수 오버로딩은 C나 자바 등의 언어에서 변수, 인자 등의 타입을 선언하므로서 수행할 수 있지만 자바스크립트는 자료 타입을 미리 선언하지 않으므로 어렵습니다. 대신 이를 비슷하게 구현하는 방법으로 arguments인 매개변수를 사용합니다.

모든 함수는 생성되면서 arguments라는 내장 매개변수를 얻게됩니다. arguments는 함수 자신과 전달된 인자를 값으로 가지는데 이를 사용하여 함수 오버로딩을 구현합니다. 간단한 플로우는 아래와 같습니다.

• 
  1. arguments의 길이를 확인
• 2. 루프를 통하여 인자에 따른 다른 코드를 적용

자바스크립트의  함수의 오버로딩은 아래와 같이 구분할 수 있습니다.

• i. 인자 개수에 따른 구현방법
• ii. 타입에 따른 구현방법

아래는 인자 개수에 따른 구현방법 예제입니다.

위 예제는 switch문을 사용하여 간단하게 오버로딩이 어떤 것인지 알아본 예제입니다. 이처럼 arguments객체의 length를 사용하여 함수로 넘겨온 인자 수에 따라서 함수 오버로딩을 구현하는 예제입니다.

! 더 알아보기

아래는 이 후에 작성된 관련된 링크입니다. 참고하세요!
https://webisfree.com/2017-06-07/함수-오버로딩(overloading)란-무엇이고-자바스크립트에서-차이점