스프레드 문법

• ES6에서 도입된 스프레드 문법(전개 문법) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만듦

• 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정됨

1. 함수 호출문의 인수 목록에서 사용하는 경우

Math.max(1, 2, 3); // 3

const arr = [1, 2, 3];
Math.max(...arr); // 3

// Rest 파라미터는 값들의 목록으로 배열을 만듦
function foo(...rest) {
	console.log(rest); // 1, 2, 3 -> [ 1, 2, 3 ]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듦
foo(...[1,2,3]);

2. 배열 리터럴 내부에서 사용하는 경우

concat

// ES5
var arr = [1, 2].concat([3,4]);

// ES6
const arr = [...[1, 2], ...[3, 4]];

splice

• 어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거하고 싶을 때

//ES5
var arr1 = [1, 4];
var arr2 = [2, 3];

arr1.splice(1, 0, arr2); // [1, [2, 3], 4]

Array.prototype.splice.apply(arr1, [1,0].concat(arr2)); // [1, 2, 3, 4]

// ES6
const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0, ...arr2);

배열 복사(slice)

//ES5
var origin = [1, 2];
var copy = origin.slice();

console.log(copy); // [1, 2];
console.log(copy === origin); // false

//ES6
const origin = [1, 2];
const copy = [... origin];

console.log(copy); // [1, 2]
console.log(origin === copy); // false

• 위와 같이 복사본을 만들면 DeepCopy 가 일어나서 origin 의 값을 바꾸어도 copy 의 값은 바뀌지 않음

이터러블을 배열로 변환

• arguments 객체는 이터러블이면서 유사 배열 객체임 → 스프레드 문법의 대상이 될 수 있음

// ES5
function sum() {
	var args = Array.prototype.slice.call(arguments);

	return args.reduce(function (pre, cur) {
		return pre + cur;
	}, 0);
}

console.log(sum(1, 2, 3));

// ES6
function sum() {
	return [ ...arguments].reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1, 2, 3));

const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);

3. 객체 리터럴 내부에서 사용하는 경우

• Rest 프로퍼티와 함께 2021년 1월 TC39 프로세스의 stage 4(Finished) 단계에 제안되어 있는 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있음

// 객체 복사(깊은 복사)
const obj = { x: 1, y: 2};
const copy = { ...obj };
console.log(copy); // { x : 1, y : 2 }
console.log(obj === copy); // false

//객체 병합. 프로퍼티 중복 시 뒤에 있는 것이 우선권
const merged = Object.assign({}, { x : 1, y : 2 }, { y : 10, z : 3 });
console.log(merged); // {x : 1, y: 10, z: 3}

const merged = { ... { x: 1, y : 2}, ... { y : 10, z : 3 } };
console.log(merged); // {x : 1, y: 10, z: 3}