[JS] Spread 연산자

 

spread 연산자

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

 

 

객체에서 스프레드 연산자 사용하기

내가 먹고싶은 여러가지 쿠키 객체를 만들어 보았다.

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

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

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

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

객체의 값들을 보면 프로퍼티 값이 겹치는 것을 볼 수 있다.

이렇게 중복된 프로퍼티 값을 계속 작성해야할때는 스프레드 연산자를 활용하면 아주 간단해진다.👍

 

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

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

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

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

    console.log(chocochipCookie)

출력해보면 쿠키 객체에 담긴 프로퍼티들을 다 포함하고 있는것을 확인할 수 있다.

...이라고 표기하는 것은 펼쳐주는 스프레드 연산자이다.

 

 

 

배열에서 스프레드 연산자 사용

노토핑쿠키 배열과 토핑쿠키 배열이 있다.

두 개의 배열을 합치고 싶은데, 배열의 내장함수인 concat을 활용해도 가능하지만?

스프레드 연산자를 이용해도 간단하게 합칠 수 있다.

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

    const allCookies = [...noTopingCookies, ...topingCookies]
    console.log(allCookies)

스프레드 연산자를 이용하면 객체의 프로퍼티를 펼치는 것처럼 배열의 원소를 순서대로 펼칠 수 있다.

 

 

스프레드 연산자는 concat과 다르게 중간에 값을 유연하게 넣을 수 있기 때문에 활용도가 높다.

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

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

 

 

스프레드 연산자는 배열과 객체를 한줄로 펼치는 방법이다.
중복된 값을 작성해야할때는 스프레드 연산자를 활용하면 아주 간단해진다.
배열에 어떠한 "중간 값"을 넣어야할 땐, concat보다 스프레드를 활용해보자!