자바스크립트 spread 연산자

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

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

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

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

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

객체로 종류별의 쿠키를 만들었다.

base와 madeIn 이란 property는 계속 겹친다. 모든 쿠키 객체에 포함되고 계속 같은 값을 가진다.

그거에 가장 근본은 cookie 라는 객체이다. 중복되는 property 를 계속 작성해야하는 상황에서는 spread 연산자를 이용한다.

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

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

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

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

console.log(cookie, chocoCookie, blueberryCookie, strawberryCookie);

... 이라 표현하는 것을 spread 라고 하는데 객체의 값(cookie)을 새로운 객체에 펼쳐주는 연산자이다.

이렇게 spread 연산자를 이용하여 객체에 중복되는 요소를 이렇게 펼쳐줄 수 있는 것을 알 수 있다.

 

또 한 spread 연산자는 객체의 property를 펼치는 것 말고도 배열에도 사용할 수 있다.

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

const allCookies = [...noTopingCookies, ...topingCooikes];

console.log(allCookies);

spread 연산자를 이용하여 모든 쿠키들을 합친 것을 볼 수 있다.

이렇게 spread 연산자를 이용하면 객체의 property를 펼치는 것처럼 배열의 원소를 순서대로 펼칠 수 있다.

또 한 concat 과 다르게 아래와 같이 중간에 값을 넣을 수도 있다.

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

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCooikes];

console.log(allCookies);