[javascript] 스프레드 문법

스프레드 문법

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

👀 어떻게 사용..?

스프레드 문법을 사용할 수 있는 대상은 Array String Map Set DOM 컬렉션 등의 argments와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다.

적용 대상

// Array
console.log(...[1, 2, 3]);	// 1 2 3

// String
console.log(...'Hell');		// H e l l

// Map, Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']]));	// ['a', '1'] ['b', '2']
console.log(...new Set([1, 2, 3]));	// 1 2 3

// 스프레드 문법의 결과는 값이 아니다.
const list = ...[1, 2, 3,];			// SyntaxError

스프레드 문법은 배열이나 묶여져 있는 값들을 한 단계 안으로 들어가는 개념이다. 때문에 값들의 나열이기 때문에 변수에 할당할 수는 없다.

함수 호출문의 인수로 사용

Math.max 함수 같은 경우, 값이 아닌 배열을 인수로 전달 받았기 때문에 NaN을 반환하는 반면, 스프레드 문법을 사용하면 펼쳐져 값을 나타내기 때문에 인수로 적용시킬 수 있다.

// 배열을 인수로 사용
const arr = [1, 2, 3];
const max = Math.max(arr);	// NaN

// 스프레드 문법을 인수로 사용
const arr = [1, 2, 3];
const max = Math.max(...arr);	// 3

✨ 장점

스프레드 문법은 기존의 배열 리터럴 방식의 사용보다 간결하고 가독성있게 표현할 수 있다.

// 배열 합치기
const arr = [...[1, 2], ...[3, 4]];	// [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(copy);				// [1, 2]
console.log(copy === origin);	// false

객체 적용

얕은 복사를 통해 객체도 복사할 수 있다.

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

console.log(copy);				// { x: 1, y: 2 }
console.log(copy === origin);	// false

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