조금 이상한 함수 매개변수

자바스크립트의 함수 매개변수는 다른 언어의 매개변수와 다르게 동작한다.

코드를 보자.

function hello(name) {
  alert("안녕! " + name);
}

자바와 같은 언어를 접해봤다면 name 이라는 매개변수가 꼭 있어야 한다고 생각하겠지만,

실제로는 아래와 같이 매개변수를 넣어주지 않거나, 더 많은 매개변수를 지정하여 호출해도 에러가 안난다;;

hello(); // 정상 동작
hello("건희", 10); // 정상 동작

어떻게 이런일이 가능할까??

 

함수 매개변수 내부 구조

위와같은 동작이 가능했던 이유는 ECMAScript의 매개변수가 내부적으로는 배열로 표현되기 때문이다.

함수는 arguments 라는 객체를 갖는데, 이 객체를 통해 매개변수의 값이 접근할 수 있다.

첫 번째 매개변수는 arguments[0], 두 번째 매개변수는 arguments[1] 형태로 접근할 수 있다.

function hello() {
  alert("안녕! " + arguments[0] + " " + arguments[1]);
}

 

하지만 여기서 중요한 것은 배열 처럼 동작하지만 실제로 배열은 아니다.

이를 유사 배열이라고 한다.

유사 배열이므로 배열 메서드가 없다.

 

arguments 객체의 length 프로퍼티를 통해 함수에 매개변수가 몇 개 전달되었는지 알 수 있다.

따라서 개발자가 넘겨받은 매개변수 개수에 맞게 대응할 수 있다.

function hello() {
  if (arguments.length == 1) {
    alert(arguments[0] + " 안녕");
  }
}

 

또한 arguments 객체를 이름 붙은 매개변수와 함께 사용이 가능하다.

이것을 응용하면 다음과 같이 사용할 수 있다.

function add(number1, number2) {
  arguments[1] = 10;
  alert(arguments[0] + number2);
}

arguments[1] 을 10으로 바꿔주었는데,

이름 붙은 매개변수 (number2) 는 arguments 객체의 프로퍼티를 자동으로 반영하므로

결국 number2, arguments[1] 둘다 10이 된다.

주의할점은 이 둘이 같은 메모리 공간을 쓰는게 아닌 단방향(arguments -> 이름붙은 매개변수) 이므로

이름붙은 매개변수인 number2 를 바꾼다면 arguments[1] 이 바뀌지 않는다.

function add(number1, number2) {
  number2 = 10;
  alert(arguments[1]); // arguments[1] 은 10으로 바뀌지 X
}

 

함수를 정의할 때 함께 정의한 매개변수를 넘기지 않으면 해당 매개변수에는 자동으로 undefined가 할당된다는 것도 알아두자.

function hello(name) {
  ...
}
  
hello(); // name 은 undefined

 

자바스크립트 함수는 오버로딩이 없다

ECMAScript 함수에는 다른 언어에서 사용하는 오버로딩이 없다.

ECMAScript 함수는 시그니처가 없는데 매개변수는 그저 배열이며 그 값에 제한이 없기 때문이다.

함수 시그니처가 없다면 진정한 의미의 오버로딩은 불가능하다.

ECMAScript 에서는 같은 이름으로 함수를 여러 번 정의하면 마지막 함수가 해당 이름을 소유한다.

function hello(name) {
  return "안녕! " + name;
}

function hello(name) {
  return "누구세요?";
}

hello("건희"); // "누구세요?"

 

정리

• 자바스크립트 함수 매개변수는 매개변수 숫자와 데이터 타입을 체크하지 않는다.
• 값을 반환하지 않는 함수는 undefined 를 반환한다.
• 자바스크립트 함수 매개변수는 유사 배열 형태로 되어있어 어떤 값이든 가질 수 있다.
• 함수에 넘기는 매개변수 숫자에 제한이 없고 arguments 객체를 통해 접근 가능하다.
• 함수 시그니처가 없으므로 오버로딩이 불가능하다. 단, 매개변수의 종류와 타입에 따라 달리 동작하도록 정의해서 오버로딩을 흉내낼수는 있다.

 

참고

• 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스