[JavaScript] 자바스크립트 spread 연산자

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

const chocochipCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "chocochip"
};

const blueberryCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "blueberry"
};

const strawberryCookie = {
  base : "cookie",
  madeIn : "korea",
  toping : "strawberry"
};

base, madeIn이라는 프로퍼티가 계속 겹침
중복된 프로퍼티를 계속 작성해야 되는 상황에는 spread 연산자 사용!

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

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

const blueberryCookie = {
  ...cookie,
  toping : "blueberry"
};

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

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

... -> spread 연산자(펼치는 연산자)
객체의 값을 새로운 객체에 펼쳐주는 역할

spread 연산자는 객체의 프로퍼티를 펼치는 것 말고도 배열도 사용 가능

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

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

spread 연산자를 이용하면 객체의 프로퍼티를 펼치는 것처럼 배열의 원소를 순서대로 펼칠 수 O

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

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

concat과 달리 값을 유연하게 넣을 수 O