[JS] Spread 연산자

Spread 연산자

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

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

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

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

이렇게 쿠키를 4개를 만들었습니다. base와 madeIn은 계속 코드가 반복되고 있습니다.

spread 연산자를 사용해서 중복되는 코드를 줄여보겠습니다.

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

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

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

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

console.log(redCookie);

중복되는 코드를 줄인 것을 확인할 수 있습니다.
여기서 ...이 스프레드 연산자 입니다. spread연산자는 배열에서도 사용할 수 있습니다.

const candy = ["딸기 캔디", "박하 캔디"];
const topingCandy = ["바나나 캔디", "초콜릿 캔디", "라면 사탕"];

const allCookies = [...candy, ...topingCandy];

console.log(allCookies);

해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.