JS : Spread Operator

Spread Operator

Spread 연산자는 ...을 사용해서 나타내며, 대상을 개별 요소로 분리시키는데, 문법의 대상은 iterable 해야 한다.

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

// 문자열은 이터러블이다.
console.log(...'genius');  // g e n i u s

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

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

배열에서의 사용

👉 더 강력한 배열 리터럴

이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며push(), splice(), concat() 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했다.
하지만 이제 전개구문으로 훨씬 더 간결하게 표현할 수 있게 되었다.

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

...은 배열 리터럴의 어디에서든 사용될 수 있으며 여러번 사용될 수도 있다.

👉 배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

👉 배열을 연결하는 더 나은 방법

보통의 기존의 배열을 유지하면서, 해당 배열을 일부로 하는 새로운 배열을 생성할 때 concat()을 사용했다.
concat()을 사용할 때의 예시는 다음과 같다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 에 붙임
arr1 = arr1.concat(arr2);

하지만 Spread operator를 사용하면 다음과 같아진다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]

또한 spread operator는 unshift()의 기능을 대체할 수도 있다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 의 앞에 붙임
Array.prototype.unshift.apply(arr1, arr2) // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨

위와 같이 unshift()는 존재하는 배열의 시작 지점에 배열의 값들을 삽입하는데 종종 사용된다.
하지만, 전개구문을 사용한다면? 다음과 같이 같아진다.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨

📌 참고사항
unshift()와 달리, 위 예제는 새로운 arr1을 만들며 기존 배열을 변형하지 않는다.