Spread Syntax (...)

About

Spread syntax(...)는 0개 이상의 변수(함수 호출의 경우) 또는 요소(배열의 경우)를 필요로 할 때 iterable(배열이나 문자열 등)을 펼칠 수 있도록(확장) 한다.

...를 쓴다는 점에서 Rest parameter와 똑같이 생겼다. 어떤 면에서 rest syntax의 완전히 반대라고 할 수 있다. Spread syntax는 배열(array)을 요소들(elements)로 "확장"하지만, rest syntax는 여러 요소를 "응축" 시킨다.

Rest syntax에 대한 내용은 Rest Parameters (...)참고.

Syntax

function sum(x, y, z) {
  return x + y + z
}

const numbers = [1, 2, 3]

console.log(sum(...numbers)) // 6

Spread 문법은 객체 또는 배열의 모든 요소가 새로운 객체 또는 배열에 포함되어야 할 때나, 요소들이 함수 호출의 매개변수 목록에 각각 적용되어야 할 때 사용할 수 있다.

이게 무슨 소리냐면... spread 문법이 적용될 수 있는 곳은 3가지가 있다.

1. 함수 매개변수 목록 (myFunction(a, ...iterableObj, b))

2. 배열 리터럴 ([1, ...iterableObj, '4', 'five', 6])

3. 객체 리터럴 ({ ...obj, key: 'value' }}

이 세 개가 같아보이지만 의미가 조금씩 다르다.

Iterable 객체(e.g., 배열)만 배열과 함수 매개변수에 대해 spread가 가능하다. Symbol.iterator() 메소드를 갖고 있지 않은 순수 객체(Plain Object)를 포함한 많은 객체들은 iterable하지 않다.

const obj = { key1: 'value1' }
const array = [...obj] // TypeError: obj is not iterable

Note: 객체 리터럴에서 spread하면 객체의 프로퍼티를 enumerate(열거, 번호를 매김)하게 된다. 그리고 일반적인 배열에서는 모든 인덱스가 enumerable한 프로퍼티이므로, 배열도 객체로 spread가 가능하다.

const array = [1, 2, 3]
const obj = { ...array } // { 0: 1, 1: 2, 2: 3 }

Spread 문법을 함수 호출에 적용할 때, JavaScript의 아규먼트 길이(limit)를 넘지 않도록 주의해야 한다. MDN 문서를 참고하자.

REF

MDN Web Docs - Spread syntax (...)