이터러블 스프레드 문법이란?

이터러블 스프레드 문법이란?

• 함수를 호출하거나 배열을 생성할 때, 결괏값을 이산값으로 분산하여 이터러블을 소비하는 방법이다.
• 속성 스프레드 문법 과 같이 ... 기호를 사용하지만, 다르다.
  • 속성 스프레드 문법은 객체 내부에서만 유효하다.
  • 이터러블 스프레드 문법은 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]

• 손쉽게 두 배열을 합쳤다.