Web/JavaScripts

[JavaScripts] Spread연산자

usingsystem 2023. 4. 17. 16:16
728x90

Spread연산자 사용방법.

 

객체에서 

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

const chocochipCookie = {
  base: "cookie",
  madeIn: "Korea",
  toping: "chocochip"
};

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

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

위에 3개의 쿠키들은 공통적인 프로퍼티를 갖는다 이를 객체마다 써주기에는 불필요하다. 이때 사용되는 게... spread연산자이다. 

아래처럼... 을 사용하여 cookie를 사용하여 코드를 줄일 수 있다.

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

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

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

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

배열

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

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies];
console.log(allCookies);

allCookies에서 ...을 사용하여 배열을 한 번에 나열하여 합칠 수 있으며... 연산자 사이에 다른 요소도 넣을 수 있다.

728x90