Rest 파라미터와 스프레드 문법

Rest 파라미터는 매개변수 이름앞에 세개의 점...을 붙여서 정의한 매개변수를 의미한다.

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받는다.

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

foo(1,2,3,4,5)

일반 매개변수와 Rest파라미터는 함께 사용할 수 있다.

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

일반 매개변수 앞에 Rest 파라미터는 못 쓴다.

function foo(...rest, param1, param2) {}

foo(1, 2, 3, 4, 5); // SyntaxError: Rest parameter must be last formal parameter

이처럼 arguments와 비슷하지만 arguments와 다르게 유사 배열 객체가 아니라서 배열 메서드를 이용 할 수 있다.

Rest 파라미터와 헷갈릴 수 있는 문법이 스프레드 문법이다.

스프레드 문법

스프레드 문법도 Rest 파라미터 처럼 ...을 이용해서 사용을 한다.
따라서 이 문법을 어디서 사용하느냐에 따라 Rest 파라미터가 될 수 도 있고 스프레드 문법이 될 수 도 있다.

스프레드 문법은 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

예를들어 유사 배열 객체를 진짜 배열로 만들기 위해 복사하는 Array메서드에 바인딩 시켜서 사용하지만 이 스프레드 문법을 사용하면 쉽게 할 수 있다.

function foo() {
  let arr = [...arguments]
  
  console.log(arr)
}
foo(1,3,5);

이런식으로 Array를 사용할 수 있게 만들 수 있다.

이 문법은 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.

console.log(...{a: 1, b: 2});

하지만 현제 2020년 7월 현재 TC39 프로세스의 stage4단계에 제안됭 있는 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다.

const merged = {x: 1, y: 2, ...{a:3, b: 4}};
console.log(merged); // {x:1,y:2,a:3,b:4};

스프레드 프로퍼티는 Object.assign메서드를 대체할 수 있는 간편한 문법이다.