스프레드 문법
ES6 에서 도입된 스프레드(전개) 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.
스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다.
...[1,2,3] 은 1,2,3 을 의미한다. 스프레드 문법의 결과는 값이 아니다. 1,2,3 = 목록이다.
스프레드 문법은 Rest 와 형태가 동일하여 혼동할 수 있다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받을 수 있고, 스프레드 문법은 정반대로 배열을 인수들의 목록으로 함수에 전달 할 수 있다.
// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
const foo = (...rest) => {
console.log(rest); // [1, 2, 3]
}
// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
foo(...[1, 2, 3]); // foo(1, 2, 3) 와 동일하다.인수 목록으로 사용하는 경우
Math.max 메서드는 인수를 여러개 받는다. 즉 인수 목록을 받는다. (가변 인자 함수)
배열의 요소 중에서 최대값을 얻고 싶은 경우, 다음과 같이 할 수 있다.
const arr = [1, 2, 3];
// apply 함수는 2번째 인수로 함수의 인수가 될 요소들의 배열을 받는다.
const max1 = Math.max.apply(null, arr); // 3
// 스프레드 문법을 사용하면 간결해진다.
const max2 = Math.max(...arr); // 3배열 리터럴 내부에서 사용하는 경우
배열 리터럴에서 사용하면 더욱 간결하고 가독성 좋게 표현할 수 있다.
// 2 개의 배열 결합
const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1, 2, 3, 4]
// 배열 중간에 다른 배열의 요소를 추가, 삭제
const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0, ...arr2); // [1, 2, 3, 4]
// 배열 복사 (앝은)
const origin = [1, 2];
const copy = [...origin];
console.log(origin === copy); // false
// 이터러블을 배열로 변환
const arrayLike = { // 유사 배열 객체
0: 1,
1: 2,
2: 3,
length: 3
};
const arr3 = [...arrayLike];
const arr4 = Array.from(arrayLike);객체 리터럴 내부에서 사용하는 경우
// 객체 병합
const merged = Object.assign({ x: 1, y: 2 }, { y: 3, z: 4 });
console.log(merged); // { x: 1, y: 3, z: 4 }
// 스프레드 문법 사용
const merged2 = { ...{ x: 1, y: 2 }, ...{ y: 3, z: 4 } };
console.log(merged2); // { x: 1, y: 3, z: 4 }