자바스크립트 Spread 문법과 Rest 문법의 차이

Spread 문법

• 하나로 뭉친 여러 값들의 집합을 펼쳐 개별적인 값들의 목록으로 만든 것

주의사항

• 스프레드 문법의 결과물은 '값'이 아니다. 따라서 변수에 할당할 수 없고 값의 목록을 사용할 때에만 사용 가능하다.

사용 방법

• 함수 호출문의 인수 목록에서 사용할 때

const arr = [1, 2, 3]
console.log(Math.max(...arr)); // 3

• 배열 리터럴의 인수 목록에서 사용할 때

const arr1 = [1, 2];
const arr2 = [3, 4];
conssole.log([...arr1, ...arr2]); // [1, 2, 3, 4]

Rest 문법

• 개수가 정해지지 않은 인수를 배열로 나타낼 수 있게 하는 문법
• 주로 디스트럭처링 할당 문법과 함께 사용한다.

주의사항

• 함수의 마지막 매개변수 앞에 ...를 붙여 나머지 인수를 '표준' 자바스크립트 배열로 대체한다.
• 마지막 파라미터만 Rest 파라미터가 될 수 있다.

사용 방법

const John = {
  name: 'John',
  age: 30,
  job: 'designer',
};

const {name, ...rest} = John;

console.log(name); // John
console.log(rest); // {age: 30, job: 'designer'}

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters