spread 연산자

객체

중복되는 객체를 사용하려면 어떻게 하면 될까?

[...객체이름]을 사용하면 객체의 요소를 다른 객체에서 사용할 수 있다.

ex)

const cookie = {
    ingredient: 'flour',
    ingredient2: 'egg'    
};
const chocochipCookie = {
    ...cookie,
    toping: 'chocochip'
};

console.log(chocochipCookie);
//{ ingredient: 'flour', ingredient2: 'egg', toping: 'chocochip' }

출력결과 cookie의 요소들이 chocochipCookie에서 사용된걸 알 수 있다.

배열

spread를 이용해서 배열의 요소들을 재사용 할 수 있다.

const cookies =["딸기쿠키", "사과쿠키", "밀크쿠키"];
const scone = ["딸기스콘", "플레인스콘", "초코스콘"];
let bakery = [...cookies, ...scone];
console.log(bakery);
//[ '딸기쿠키', '사과쿠키', '밀크쿠키', '딸기스콘', '플레인스콘', '초코스콘' ]

위와같이 cookies와 scone이 합쳐진 것을 알 수 있다.

spread를 이용하면 concat과 다르게 요소를 추가할 수 있다.

const cookies =["딸기쿠키", "사과쿠키", "밀크쿠키"];
const scone = ["딸기스콘", "플레인스콘", "초코스콘"];
let bakery = [...cookies, ...scone, "바닐라스콘"];
console.log(bakery);
//[ '딸기쿠키', '사과쿠키', '밀크쿠키', '딸기스콘', '플레인스콘', '초코스콘', '바닐라스콘' ]

위와같이 마지막에 "바닐라스콘"이 추가된것을 알 수 있다.