함수의 암시적 파라미터 - arguments

함수의 암시적 파라미터는 4편으로 이루어져 있습니다.

arguments
this-1
this-2
this-3

들어가며

자바스크립트 함수에서 암시적인 파라미터인 arguments와 this에 대해서 알아보려고 합니다. 이번 포스팅에서는 arguments에 대해서 설명해 보겠습니다.

parameter와 arguments

가끔 개발 서적이나 문서를 읽다 보면 parameter와 arguments가 헷갈릴 때가 있는데 모질라에서 친절하게 설명해 주고 있습니다. 모질라

function greeting(name) {
  // 함수를 정의할때 함수안에서 사용되는 변수(paramter)
  console.log(`Hello ${name}`);
}

greeting('hyunki'); // 함수를 호출할때 전달하는 실제 입력 값(arguments)

암시적인 파라미터 arguments와 this

우리는 위에 코드 greeting 함수에 name이라는 parameter를 가지고 있습니다. 보이진 않지만 암묵적으로 2개의 파라미터가 더 존재하는데 바로 arguments와 this 입니다.

arguments 객체

arguments 파라미터는 함수에 전달되는 모든 arguments들의 컬렉션입니다. arguments 객체는 length 속성을 가지고 있고 배열 인덱싱 표기법을 사용해서 값을 가져올 수도 있습니다.

function whatever(a, b, c) {
  console.log(a === 1); // true
  console.log(arguments[2]); // 3
  console.log(arguments[3]); // undefined
  console.log(arguments.length); // 3
  console.log('type', arguments); // Arguments(3)
}
whatever(1, 2, 3);

배열인가?

배열 인덱싱으로 값을 가져올 수 있어서 배열이라고 생각할 수도 있지만 배열은 아니고 유사 배열(Array-like) 객체입니다.

다른 유사 배열 객체로는 HTMLCollection가 있습니다.

배열은 아니지만 아래 sum 함수처럼 length를 이용해서 argumets의 합을 구할 수 있습니다.

function sum() {
  let result = 0;
  for (let i = 0; i < arguments.length; i++) {
    result = result + arguments[i];
  }
  console.log(result);
}
sum(1, 2, 3);

배열이 아니기 때문에 Array method를 사용하면 에러가 발생합니다.

function notArray() {
  arguments.forEach((arg) => console.log(arg));
}
notArray(1, 2, 3);
//  Uncaught TypeError: arguments.forEach is not a function"

Rest parameters

function sum(...args) {
  let result = 0;
  args.forEach((arg) => (result = result + arg));
  console.log(result);
}
sum(1, 2, 3);

사실 ES6에서 생긴 rest parameter(나머지 매개변수)를 이용하면 arguments 객체에 접근하지 않아도 됩니다. 배열로 대체하기 때문에 Array method도 사용할 수 있습니다. 하지만 ES6를 사용하지 못하는 환경이고 레거시 코드를 만져야 한다면 알아두면 좋겠죠?

마치며

자바스크립트 함수에서 암시적 파라미터는 arguments를 알아봤습니다. 사실 이 뒤에서 설명할 this를 중점적으로 설명하고자 arguments는 좀 살짝 맛만 보고 지나간 느낌이지 않나 싶은데요 레거시 코드를 만져야 할 때 함수를 유연하게 사용할 수 있다는 점만 알고가도 활용 가치가 충분하지 않을까 합니다. 읽어 주셔서 감사합니다.