[JS] Spread 연산자

Spread 연산자

배열과 객체를 한줄로 펼치는 방법

1. 객체에 사용

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"
};

중복된 프로퍼티를 사용하게 되는 경우이다.
이러한 경우에는 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"}

2. 배열에 사용

배열의 원소를 순서대로 펼칠 수 있다.

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

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

객체에 사용보다 중간에 또 다른 요소를 유연하게 추가할 수 있다.

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