arguments, rest parameter

arguments

arguments는 함수가 호출될 때 전달받은 모든 인수를 참조할 수 있는 'Array형태' 객체로, 모든 함수 내에서 이용 가능한 지역 변수이다.

 

*Array 형태 : 배열(Array)의 length 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, forEach, map과 같은 내장 메서드를 가지고 있지 않다는 뜻.

 

function printer () {
  for (let i = 0; i < arguments.length; i++){
    console.log(arguments[i])
  }
}

printer(1, 2, 3, 4)

//1
//2
//3
//4

function printer () {
  arguments[0] = "this is first";
  for (let i = 0; i < arguments.length; i++){
    console.log(arguments[i])
  }
}

printer(1, 2, 3, 4)

//this is first
//2
//3
//4

위 코드에서 보이는 것처럼 arguments객체는 함수 선언 시 매개변수를 지정하지 않고도, 함수 실행 시 전달받은 인자에 'Array형태'로 접근할 수 있게 해 준다.

 

function printer(a, b){
    console.log(
        'printer.length', printer.length,
        'arguments', arguments.length
    );
}

printer(1, 2, 3, 4);

//printer.length 2 arguments 4

function printer(){
    console.log(
        'printer.length', printer.length,
        'arguments', arguments.length
    );
}

printer(1, 2, 3, 4);

//printer.length 0 arguments 4

위와 같은 방법으로 함수 선언 시 설정한 매개변수의 개수(함수명. length)와 실제로 전달받은 인수의 개수(arguments.length)를 각각 알 수 있다.

 

arguments의 속성

arguments는 고유한 속성들을 가진다.

1. arguments.callee : 현재 실행 중인 함수를 가리킨다.
   
   

2. arguments.caller : 현재 실행중인 함수를 호출한 함수를 가리킨다.
   
   

3. arguments.length : 함수에 전달된 인수의 수를 가리킨다.
   
   

4. arguments [@@iterator] :  arguments의 각 인덱스 값을 포함하는 Array Iterator객체를 반환한다.  =>  (for문과 같은 반복문에 사용이 가능하다.)

 

*ES6의 arrow function은 arguments객체를 바인딩하지 않는다. 

   => 그렇기 때문에 MDN에서는 ES6 호환 코드를 작성하려면 rest parameter를 사용하도록 권장한다.

 

---

rest parameter

rest parameter는 매개변수로 선언되지 않은 인수를 배열(Array)로 나타낼 수 있게 한다. 

//1.
function myFun(a, b, ...manyMoreArgs) {//rest parameter의 변수명은 사용자의 선택(manyMoreArgs)
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a one
// b two
// manyMoreArgs [three, four, five, six]

//2.
function myFun(...manyMoreArgs) {
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

//manyMoreArgs [ 'one', 'two', 'three', 'four', 'five', 'six' ]

//3.
function myFun(a, b, ...manyMoreArgs) {
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two");

//manyMoreArgs []

rest parameter는 함수의 마지막 파라미터의 앞에... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체한다.

 

rest parameter와 arguments객체 간의 차이

1. arguments객체는 실제 Array가 아닌 'Array형태'를 가지지만 rest parameter는 'Array 인스턴스'로
   Array에서 사용 가능한 메서드를 적용할 수 있다.
   
   
2. arguments객체는 함수에 전달된 모든 인자가 arguments객체의 대상이지만,
   rest parameter는 함수 선언 시 개별적으로 매개변수로 지정되지 않은 인자들이 대상이 된다.
   (위 코드 1번 예에서 "three", "four", "five", "six")
   
   
3. arguments객체는 고유의 속성을 가진다. ex) callee...

---

 

참고

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

arguments 객체 - JavaScript | MDN

opentutorials.org/course/743/6548

arguments - 생활코딩

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest 파라미터 - JavaScript | MDN