spread 연산자(...)

... 스프레드 연산자

펼치는 연산자 -> 객체의 값을 새로운 객체에 부여해줌

const cookie = {
  base: 'cookie',
  madeIn: 'korea'
};

const chocochipCookie = {
  ...cookie,
  toping : 'chocochip'
};

const blueberrypCookie = {
  ...cookie,
  toping : 'blueberry'
};

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

console.log(chocochipCookie); // {base: "cookie", madeIn: "korea", toping: "chocochip"}
console.log(blueberrypCookie); // base: "cookie", madeIn: "korea", toping: "blueberry"}
console.log(strawberryCookie); // {base: "cookie", madeIn: "korea", toping: "strawberry"}

 

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

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

여기에 유연하게 값을 추가 할수도 있다.

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

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies];
console.log(allCookies); // (7) ["촉촉한 쿠키", "안 촉촉한 쿠기", "함정쿠키", "바나나", "블루베리", "딸기", "초코"]