[JavaScript] spread | 전개 연산자

스프레드 연산자('...')는 연결, 복사 등의 용도로 사용되며 배열과 객체를 한 줄로 펼치는 방법이라고 할 수 있다.

 

배열에서는 다음과 같이 사용할 수 있다.

const coffee = ["아메리카노", "바닐라라떼"];
const juice = ["포도주스", "오렌지주스", "토마토주스"];

const menu = [...coffee, "새로운 음료", ...juice];

console.log(menu); // ["아메리카노", "바닐라라떼", "새로운 음료", "포도주스", "오렌지주스", "토마토주스"]

 

상당히 직관적인 예시라고 생각한다 ^-^!

 

객체에서는 다음과 같이 사용할 수 있다.

const latte = {
	base: "milk",
    from: "Starbucks"
};

const banillaLatte = {
	...latte,
    syrup: "banilla"
};

console.log(banillaLatte); // { base: 'milk', from: 'Starbucks', syrup: 'banilla' }

즉, 중복된 프로퍼티를 계속 작성해야할 때 spread의 사용으로 간단하게 코드를 작성할 수 있다.

 

함수에서는 다음과 같이 사용할 수 있다.

function add(...param) {
	let sum = 0;
    for (let n of param) {
    	sum += n;
    }
    return sum;
}

console.log(add(1)); // 1
console.log(add(1,2)); // 3
console.log(add(1,2,3)); // 6

spread 연산자 + 정해지지 않은 인수를 배열로 나타낼 수 있게하는 rest parameter의 조합으로몇 개의 인자가 오든지, 모든 인자를 더하는 함수를 구현할 수 있다.

* 참고로 이 때 들어오는 param은 배열이다.