스프레드 문법

스프레드 문법이란?

ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어준다.

스프레드 문법을 사용할 수 있는 대상

Array, String, Map, Set 등과 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.

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];

// arr 요소 중 최댓값 구하기
const max = Math.max(arr) // NaN

메서드에 숫자가 아닌 배열을 인수로 전달하는 것이기 때문에 최대값을 구할 수 없으므로 NaN을 반환한다.

const max = Math.max(...arr) // 3

스프레드 문법으로 배열을 펼쳐서 요소들을 개별적인 값들의 목록으로 만든 후, 메서드의 인수로 전달하면 된다.

배열 리터럴 내부에서 사용할 때

2개의 배열을 1개의 배열로 결합하고 싶은 경우 concat 메서드 대신에 사용한다.

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

//스프레드 문법 사용
let arr = [...[1, 2], ...[3, 4]]; // [1, 2, 3, 4]

배열의 중간에 다른 배열을 추가할 때도 사용할 수 있다.

let arr1 = [1, 4];
let arr2 = [2, 3];

//배열 자체가 추가 되어버린다.
arr1.splice(1, 0, arr2); // [1, [2, 3], 4]

//스프레드 문법 사용
arr1.splice(1, 0, ...arr2); // [1, 2, 3, 4]

배열 자체를 얕은 복사할 때도 사용 가능하다.

let origin = [1, 2];
let copy = [...origin];

console.log(copy) // [1, 2]