Rest parameter vs Spread Operator

Rest parameter

Rest parameter는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다.
즉, Rest parameter를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.

function foo(...rest) {
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5);

이처럼 rest를 [1, 2, 3, 4, 5] 라고 한다면
...rest는 배열을 펼쳐서 1, 2, 3, 4, 5 로 나온다.

여기서 만약 [...rest]가 되면 어떻게 될까?

function foo([...rest]) {
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo([1, 2, 3, 4, 5]);

...rest가 배열을 펼쳐서 1, 2, 3, 4, 5 로 나왔다고 했다.
그러면 [...rest]는 펼친 1, 2, 3, 4, 5 를 배열로 다시 묶어줘서 [1, 2, 3, 4, 5]로 나온다.

Spread Operator

Spread Operator는 연산자의 대상 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.
사용 방법은 parameter 앞에 (...)을 붙인다.

배열

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); // 1, 2, 3

Rest Parameter와 Spread Operator의 차이점

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

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