Spread 연산자

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

1. 객체의 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"
};

// 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. 배열의 spread

// spread 연산자 활용하여 배열 합치기
const noTopingCookies = ["촉촉한쿠키", "안촉촉한쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코칩쿠키"];

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies]; // 중간에 값을 유연하게 넣을 수 있다.

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

참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런