[JavaScript] Rest Parameter

Spread Operator와 비슷해 보이는, 그렇지만 완전히 다른 Rest Parameter에 대해 정리해보고자 한다.

Rest Parameter는 Spread Operator와 함께 ES6에 새롭게 도입되었다.

 

 

Rest Parameter(나머지 매개변수)

Rest 파라미터는 이름처럼 Rest 역할을 하는 매개 변수이다. 매개 변수의 이름 앞에 Spread Operator를 붙인 형태로, 함수에 전달된 인자(argument)들을 배열로 받아 준다.

function restParam(...rest){
  console.log(rest);
}
restParam(1, 2, 3);
>> [1, 2, 3]

 

 

Rest 파라미터는 일반 파라미터와 함께 사용할 수 있으나 반드시 가장 마지막 파라미터로 있어야 한다.

function restParam1(a, b, ...rest){
  console.log(a, b, rest);
}
restParam1(1, 2, 3, 4, 5); // a=1, b=2
>> 1, 2, [3, 4, 5]


function restParam2(a, ...rest, b){
  console.log(a, rest, b);
}
restParam2(1, 2, 3, 4, 5);
>> Uncaught SyntaxError: Rest parameter must be last formal parameter

 

또한 한 함수에 두 번 이상 사용할 수 없다.

function restParam(a, ...rest, ...rest2) {
  console.log(a, rest, rest2);
}

restParam(1, 2, 3, 4, 5);
>> Uncaught SyntaxError: Rest parameter must be last formal parameter

 

 

 

 

* Rest Parameter와 Arguments의 차이

ES5에서도 Arguments를 통해 가변 파라미터를 정의하고 전달되는 인자값을 확인할 수 있었다.

function funB(a,b,c){
  console.log(arguments)
  for (var i = 0; i < arguments.length; i++){
    console.log(arguments[i])
  }
}

funB(10, 20, 30);
>> Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
   10
   20
   30

Rest는 배열이지만 Arguments는 유사 배열 객체이다. 순회가능한(iterable) 특징이 있고 length 값을 알 수 있어 배열과 유사하지만 Array Object의 메소드를 사용할 수 없다. Rest 파라미터는 Arguments보다 유연하고 쉽게 다룰 수 있다.

 

 

 

 

* Rest Parameter와 Spread Operator의 차이

- Rest Parameter는 함수 선언문의 파라미터에 Spread(...)연산자를 사용하여 가변인자를 받고, 이를 배열로 만들어서 사용하는 것이다.

- Spread Operator는 함수 호출문의 파라미터에 Spread(...)연산자를 사용하여 배열을 해당 매개변수로 각각 매핑하는 것이다.

// rest
function restParam(...rest){
  console.log(rest);
}
restParam(1, 2, 3);
>> [1, 2, 3]


// spread operator
function spread(a, b, c){
  console.log(a, b, c);
}

var arr = [1, 2, 3];
spread(...arr);
>> 1 2 3