spread 연산자 (전개구문)

... : spread 연산자

• spread 연산자를 사용하여 객체의 값을 새로운 객체에 동일하게 가져올 수 있음

객체에서 spread 연산자 사용

// 가장 기본이 되는 쿠키
const cookie = {
  base: 'cookie',
  madeIn: 'korea',
};

const chocochipCookie = {
  // 중복되는 코드 삭제
  // base: 'cookie',
  // madeIn: 'korea',
  ...cookie,
  //...cookie를 사용 => cookie 객체에 담긴 프로퍼티들을 모두 포함하고 있음 
  toping: 'chocochip',
}

const blueberryCookie = {
  ...cookie,
  toping: 'blueberry',
}

const strawberryCookie = {
  ...cookie,
  toping: 'strawberry',
}

console.log(chocochipCookie);
console.log(blueberryCookie);
console.log(strawberryCookie);

/*
{base: 'cookie', madeIn: 'korea', toping: 'chocochip'}
VM60:28 {base: 'cookie', madeIn: 'korea', toping: 'blueberry'}
VM60:29 {base: 'cookie', madeIn: 'korea', toping: 'strawberry'}
*/

배열에서 spread 연산자 사용

const noTopingCookies = ['촉촉한쿠키', '안촉촉한쿠키'];
const topingCookies = ['딸기쿠키', '초코칩쿠키', '블루베리쿠기', '바나나쿠키'];

const allCookies = [...noTopingCookies, ...topingCookies];

console.log(allCookies);
// ["촉촉한쿠키","안촉촉한쿠키","딸기쿠키","초코칩쿠키","블루베리쿠기","바나나쿠키"]

• 배열과 배열 사이에 자유롭게 다른 값을 추가할 수 있음

const allCookies2 = [...noTopingCookies, '독버섯맛쿠키', ...topingCookies];
console.log(allCookies2);
// ["촉촉한쿠키","안촉촉한쿠키","독버섯맛쿠키","딸기쿠키","초코칩쿠키","블루베리쿠기","바나나쿠키"]