ES6에서 도입된 spread 와 rest 에 대해서 알아보겠다.
ES6에서 도입되었기 때문에 IE에서는 사용이 불가하다.

😘 spread

spread는 기존의 것을 건들이지 않고, 새로운 객체를 만든다. 예를 들어서 이런 코드가 있다고 가정해보자.

const anne = {
  name: '앤'
};
const redHair = {
  name: '앤',
  hair: '빨강머리'
};
const greenGables = {
  name: '앤',
  hair: '빨강머리',
  house: '초록지붕'
};
console.log(anne);
console.log(redHair);
console.log(greenGables);

spread 문법을 사용하며 이렇게 적어줄 수 있다.
...은 spread를 사용하겠다는 의미이다.

const anne = {
  name: '앤',
};
const anneRedhair = {
  ...anne,
  hair: '빨강머리'
};
const anneRedhairGreengables = {
  ...anneRedhair,
  house: '초록지붕'
};
console.log(anne);
console.log(anneRedhair);
console.log(anneRedhairGreengables);

spread는 배열에서도 사용이 가능하다.

const fruits = ['🍎', '🥝', '🍌'];
const vegan = [...fruits, '🥦', '🥗'];
console.log(vegan);
// ['🍎', '🥝', '🍌', '🥦', '🥗']

💎 rest

rest는 객체, 배열, 함수의 파라미터에서 사용이 가능하다.

• 객체에서의 rest

const anneRedhairGreengables = {
  name: '앤',
  hair: '빨강머리',
  house: '초록지붕'
};
const { hair, ...rest } = anneRedhairGreengables;
console.log(hair);
console.log(rest);

추출한 값의 이름이 굳이 rest가 아니여도 괜찮다.

const anneRedhairGreengables = {
  name: '앤',
  hair: '빨강머리',
  house: '초록지붕'
};
const { hair, ...anneGreengables } = anneRedhairGreengables;
console.log(hair);
console.log(anneGreengables);

• 배열에서의 rest

const fruits = ['🍎', '🍌', '🥝', '🍓', '🍑'];
const [apple, ...rest] = fruits;
console.log(apple);
console.log(rest);

다만, 이렇게는 해줄 수 없다.

const fruits = ['🍎', '🍌', '🥝', '🍓', '🍑'];
const [...rest, peach] = fruits;
console.log(peach);
console.log(rest);

• 함수 파라미터에서의 rest

  함수의 파라미터로 오는 값들을 배열로 전달받을 수 있다.
  * 이해를 한 다음에 이 부분을 작성할게요 ㅠㅠ