[JavaScript] 자바스크립트 spread 연산자

[JavaScript] spread 연산자

spread 연산자를 사용하면 중복되는 값을 효과적으로 관리할 수 있다.

 

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

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

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

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

 

 

위와 같이 cookie, chocochipCookie, blueberryCookie, strawberryCookie에서 겹치는 객체인

{base: "cookie", madeIn: "korea"}

는 다음과 같이 spread 연산자를 사용하면 효과적으로 사용할 수 있다.

 

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

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

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

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

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

>>> {base: "cookie", madeIn: "korea", toping: "chocochip"}
>>> {base: "cookie", madeIn: "korea", toping: "blueberry"}
>>> {base: "cookie", madeIn: "korea", toping: "strawberry"}

 

 

spread 연산자를 사용하여 다른 두 변수의 객체를 하나로 합칠 수 있다.

 

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

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

>>> (6) ["촉촉한 쿠키", "안촉촉한 쿠키", "바나나 쿠키", "블루베리 쿠키", "딸기 쿠키", "초코칩 쿠키"]
	0: "촉촉한 쿠키"
	1: "안촉촉한 쿠키"
	2: "바나나 쿠키"
	3: "블루베리 쿠키"
	4: "딸기 쿠키"
	5: "초코칩 쿠키"