이터러블 스프레드 문법이란?
- 함수를 호출하거나 배열을 생성할 때, 결괏값을 이산값으로 분산하여 이터러블을 소비하는 방법이다.
- 속성 스프레드 문법 과 같이
... 기호를 사용하지만, 다르다.
- 속성 스프레드 문법은 객체 내부에서만 유효하다.
- 이터러블 스프레드 문법은
iterable 객체 앞에서만 유효하다.
- 이터러블 스프레드 문법이 유효한 곳
예제 1: 함수의 인자에서 사용
- 이터러블 스프레드 문법을 함수의 인자에서 사용할 수 있다.
이터러블 스프레드 문법 적용 전
Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 0);
Math.min() 은 원래 위처럼 인자를 하나씩 넣어주어야 한다.- 배열에 저 모든 숫자가 들어있다면, 인자를 넣기가 쉽지 않다.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
Math.min(arr[0], arr[1], arr[2], arr[3]); // ...
이터러블 스프레드 문법 적용 후
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
Math.min(...arr);
예제 2: 배열 리터럴에서 사용
- 이터러블 스프레드 문법을 배열 리터럴에서 사용할 수 있다.
이터러블 스프레드 문법 적용 전
- 두 배열을 합쳐서 새로운 배열을 만들고 싶다고 가정하자.
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const arr2 = [10, 11, 12];
const arr3 = [];
for (const e of arr1) {
arr1.push(e);
}
for (const e of arr2) {
arr3.push(e);
}
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 10, 11, 12]
arr1 과 arr2 를 합치기 위해 반복문을 사용했다.
이터러블 스프레드 문법 적용 후
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const arr2 = [10, 11, 12];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 10, 11, 12]