📖Review (21.04.02)

Rest Parameter

Rest Parameter는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다.

즉, Rest Parameter를 사용하면 함수의 파라미터(매개변수)로 오는 값들을 "배열"로 전달받을 수 있다.

function f(a, b, ...theArgs) {
  // ...
}

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

ex)

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

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

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

arguments vs Rest Parameter

arguments와 Rest Parameter의 차이점은 무엇일까?

답부터 말하면 arguments는 유사 배열 객체고 Rest Parameter는 배열이다.

유사 배열 객체(array-like object) 는 간단하게 순회가능한(iterable) 특징이 있고 length 값을 알 수 있는 특징이 있는 것이다. 즉, 배열처럼 사용할 수 있는 객체를 말한다. 무슨 말이냐면 arguments는 유사 배열 객체이기 때문에 Array 오브젝트의 메서드를 사용할 수 없다.

반면 Rest Parameter는 Array 오브젝트의 메서드를 사용할 수 있다.

ex)

// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음

function f(a, b) {

  var normalArray = Array.prototype.slice.call(arguments);
  // -- 또는 --
  var normalArray = [].slice.call(arguments);
  // -- 또는 --
  var normalArray = Array.from(arguments);

  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)

}

// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음

function f(...args) {
  var normalArray = args;
  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
}

Spread Operator

Spread Operator는 연산자의 대상 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.

// 배열
console.log(...[1, 2, 3]); // -> 1, 2, 3
 
// 문자열
console.log(...'Helllo');  // H e l l l o

함수의 파라미터로 사용하는 방법

function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
const arr = [1, 2, 3];
foo(...arr);// Array를 받아서 각 매개변수로 전달되었다.

Rest Parameter는 함수 선언문의 파라미터에 Spread(...)연산자를 이용해서 받으면 가변인자를 받아 배열로 만들어서 사용하는 것이고, 함수 호출문의 파라미터에 Spread(...)연산자를 이용해서 호출하면 배열이 해당 매개변수로 각각 mapping되는 것은 다르다.