[JS] Javascript의 Arguments 객체

Javascript Arguments

arguments객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.

MDN문서에서는 arguments객체를 위와 같이 설명합니다. 저는 문서를 보고 전달된 인수를 Array형태의 객체로 갖고 있는 것일까? 하고 생각이 들었습니다. 문서를 더 보니 It has entries for each argument the function was called with, with the first entry's index at 0라고 나와 있습니다. 한마디로 함수가 호출될 때 파라미터를 arguments객체에 담아 놓는 것입니다. 자 그럼 간단하게 확인해보겠습니다.

const f1 = function(a, b, c){
console.log(arguments);
}

f1(1, 2, 3); 
/* 
0: 1
1: 2
2: 3
length: 3
callee: ƒ (a,b,c)
Symbol(Symbol.iterator): ƒ values()
__proto__: Object
*/

위처럼 arguments의 속성들이 출력되었습니다. 왜 Array형태의 객체라고 말했는지 알 수 있겠는데요. 그 이유는 인덱스와 length를 포함하고 있지만 나머지는 Array객체의 내장 메서드(push, pop, shift... 등)를 포함하지 않기 때문입니다.
위에 보이는 callee라는 함수는 현재 실행 중인 함수(ƒ (a, b, c))를 가리키고 caller는 현재실행중인 함수를 호출한 함수를 카리 킵니다.

그렇다면 arguments객체는 어느 경우 사용할까요?
아래 예제를 통해 알아보겠습니다.

const f1 = function(a, b) {
  let totalCount = a + b;
  if (arguments[2] !== undefined) {
     totalCount += arguments[2];
  }
  return totalCount
}
f1(1, 2); // 3
f1(1, 2, 3); // 6

위에 f1 함수의 매개변수는 2개(a, b)로 선언되어있지만 f1(1, 2, 3)처럼 추가적인 매개변수를 전달해도 arguments객체에 의해 유연하게 대처할 수 있는 장점이 있습니다.

추가적으로 ES6의 Arrow function에서는 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다.라고 MDN문서를 통해 확인할 수 있습니다. 그렇다면 Arrow function에서는 어떻게 대처해야 할지 확인해보겠습니다.
Rest Paramter 구문을 통해 정해지지 않은 인수들을 배열로 나타낼 수 있습니다.

const f1 = (...arg) => {
  return arg;
};

f1(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

그렇다면 rest paramter와 arguments 객체의 차이점은 무엇일까요?
rest parameter는 매개변수로 선언되지 않은 나머지 대상을 포함하고, arguments객체는 함수로 전달되는 모든 인수를 포함합니다.
rest parameter는 Array객체의 인스턴스이고, arguments객체는 실제 배열이 아닙니다.
자세한 사항은 여기를 통해 확인할 수 있습니다.

 

파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음