[ES6] Javascript Spread Operator (전개 구문)

MDN 정의

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

function sum(x, y, z) { 
	return x + y + z;
}

const numbers = [1, 2, 3]; 

console.log(sum(...numbers)); // expected output: 6 
console.log(sum.apply(null, numbers)); // expected output: 6

Apply() 대체

function myFunction(x, y, z){}
let args = [0, 1, 2];
myFunction.apply(null, args);

// 아래와 같이 사용 가능
// 사례 1
function myFunction(x, y, z){}
let args = [0, 1, 2];
myFunction(...args);

// 사례2
nction myFunction(v, w, x, y, z){}
let args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

배열 리터럴에서의 전개

// Case 1
let color1 = ["red", "black"]; 
let color2 = ["blue", ...color1, "pink", "green"]; 
// color2는 ["blue", "red", "black", "pink", "green"]

// Case2
let arr = [1, 2, 3];
let arr2 = [...arr];
arr2.push(4);
// arr2은 [1, 2, 3, 4] 이 됨
// arr은 그대로 [1, 2, 3]

// Case3
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1 = [...arr1, ...arr2];
// arr1은 [1, 2, 3, 4, 5, 6]