Spread 연산자 …

목표

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 key에 같은 값이 들어가있다. 이 부분을 축약해서 사용할 수 있도록 하는 것이 spread 연산자이다.

<aside> 💡 …객체/배열명

</aside>

다음 코드를 살펴보자.

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

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

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

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

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

cookie에 있는 값들을 모두 가져오기 위해 spread 연산자를 사용하였고, 부가적으로 key와 value를 선언하여 객체를 구성하였다.

출력 화면

배열인 경우

배열도 Spread 연산자의 사용이 가능하다.

다음 코드를 살펴보자.