Spread Operator 연산자

스프레드 연산자

스프레드 오퍼레이터는 자바스크립트 표현식을 확장(펼칠 수 있는)할 수 있는 연산자 이다.

배열이나 객체에서 주로 사용하고 표현은 점3개 ... 로 한다.
객체 혹은 배열의 속성을 가져올 수 있다.

단순히 배열을 예로 들어서 배울때는 응용을 어떻게 하나 심드렁했다가 객체를 예를 들어서 배우니까 더 와 닿는 느낌이다 .

스프레드 연산자와 배열

const noToppingCookies = ["바닐라쿠키","바닐라쿠키"]
const toppingCookies = ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키"]

const allCookies = [...noToppingCookies, ...toppingCookies]
console.log(allCookies)
// 출력 ["바닐라쿠키", "바닐라쿠키", "바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코칩쿠키"]

=> 전체 상품 불러올때 쓰면 될 거 같다

스프레드 연산자를 사용해 배열 클론

const toppingCookies = ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키"]
let cookies = toppingCookies;

console.log(toppingCookies); // ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키"]
console.log(cookies); // ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키"]

arr1.push("아몬드쿠키");

console.log(toppingCookies); // ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키","아몬드쿠키"]
console.log(cookies); // ["바나나쿠키","블루베리쿠키","딸기쿠키","초코칩쿠키","아몬드쿠키"]

메뉴추가하기 ㅎㅎㅎ

스프레드 연산자와 객체

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

const chocochipCookie = {
  ...cookie,
  topping:"chocochip"
}

console.log(chocochipCookie) 
// {base: "cookie", madeIn: "korea", topping: "chocochip"}

이렇게 공통되는 코드가 반복되는 경우 스프레드로 처리하면 코드가 짧아지고 보기도 좋아진다. 신기하다.