[JavaScript] 스프레드 문법

스프레드 문법이란?

ES6에서 도입된 스프레드 문법 … 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정된다.

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다.(-> 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o

// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 아니다.
console.log(...{a: 1, b: 2}); // TypeError

스프레드 문법의 결과는 값이 아니라 값들의 목록이다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

• 함수 호출문의 인수 목록
• 배열 리터럴의 요소 목록
• 객체 리터럴의 프로퍼티 목록

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

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

Math.max처럼 개별적인 값들의 목록을 인수로 전달받는 메서드의 경우 스프레드 문법을 사용하면 간결하게 나타낼 수 있다.

Rest 파라미터

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 … 을 붙이는 것이다.

스프레드 문법은 Rest 파라미터와 형태는 동일하지만 서로 반대의 개념이므로 혼동하지 말아야 한다.

function foo(...rest) {
	console.log(rest);
}
foo(1, 2, 3); // [1, 2, 3]

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

// 두 배열 결합
const arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

// splice 메서드로 배열에 다른 배열의 요소를 추가
const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0 , ...arr2);
console.log(arr1); // [1, 2, 3, 4]

// 배열 복사
const origin = [1, 2];
const copy = [...origin];
console.log(copy); // [1, 2]

// 이터러블인 유사 배열 객체를 배열로 변환
function foo() {
	console.log([...arguments]);
}
foo(1, 2, 3); // [1, 2, 3]

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

스프레드 문법의 대상은 이터러블이어야 하지만 일반 객체 리터럴의 내부에서 스프레드 문법을 사용하는 것은 허용한다.

// 객체 리터럴 밖에서 스프레드 문법을 사용하면 에러가 난다.
const obj = {a: 1, b: 2};
console.log(...obj); // TypeError

// 스프레드 프로퍼티
// 객체 복사
const obj = {a: 1, b: 2};
const copy = {...obj};
console.log(copy); // {a: 1, b: 2}

// 객체 병합
const merged = {x: 1, y: 2, ...{a: 3, b: 4}};
console.log(merged); // {x: 1, y: 2, a: 3, b: 4}