Spread Syntax (...)
About
Spread syntax(...
)는 0개 이상의 변수(함수 호출의 경우) 또는 요소(배열의 경우)를 필요로 할 때 iterable(배열이나 문자열 등)을 펼칠 수 있도록(확장) 한다.
...
를 쓴다는 점에서 Rest parameter와 똑같이 생겼다. 어떤 면에서 rest syntax의 완전히 반대라고 할 수 있다. Spread syntax는 배열(array)을 요소들(elements)로 "확장"하지만, rest syntax는 여러 요소를 "응축" 시킨다.
Rest syntax에 대한 내용은 Rest Parameters (...)참고.
Syntax
Spread 문법은 객체 또는 배열의 모든 요소가 새로운 객체 또는 배열에 포함되어야 할 때나, 요소들이 함수 호출의 매개변수 목록에 각각 적용되어야 할 때 사용할 수 있다.
이게 무슨 소리냐면... spread 문법이 적용될 수 있는 곳은 3가지가 있다.
함수 매개변수 목록 (
myFunction(a, ...iterableObj, b)
)배열 리터럴 (
[1, ...iterableObj, '4', 'five', 6]
)객체 리터럴 (
{ ...obj, key: 'value' }
}
이 세 개가 같아보이지만 의미가 조금씩 다르다.
Iterable 객체(e.g., 배열)만 배열과 함수 매개변수에 대해 spread가 가능하다. Symbol.iterator()
메소드를 갖고 있지 않은 순수 객체(Plain Object)를 포함한 많은 객체들은 iterable하지 않다.
Note: 객체 리터럴에서 spread하면 객체의 프로퍼티를 enumerate(열거, 번호를 매김)하게 된다. 그리고 일반적인 배열에서는 모든 인덱스가 enumerable한 프로퍼티이므로, 배열도 객체로 spread가 가능하다.
Spread 문법을 함수 호출에 적용할 때, JavaScript의 아규먼트 길이(limit)를 넘지 않도록 주의해야 한다. MDN 문서를 참고하자.
REF
Last updated