35장 스프레드 문법
ES6에서 도입된 스프레드 문법(spread syntax) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. Array, String, Map, Set, Dom 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.
함수 호출문의 인수 목록에서 사용하는 경우
요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.
// Math.max 메서드는 숫자를 인자로 받는다.
Math.max([1,2,3]); // NAN
Math.max(...[1,2,3]); // 3
배열 리터럴 내부에서 사용하는 경우
스프레드 문법을 배열 리터럴에서 사용하면 ES5에서 사용하던 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다.
// 1. concat을 사용하지 않고 두 배열 합치기
const arr1 = [...[1,2],...[3,4]]
arr1 // [1,2,3,4]
// 2. splice + spread
const arr2 = [1,4]
arr2.splice(1,0,...[2,3])
arr2 // [1,2,3,4]
// 3. 배열 복사
const arr3 = [1,2,3,4]
const arr_copy = [...arr3]
arr_copy // [1,2,3,4]
// 4. 이터러블을 배열로 반환
function sum() {
return [...arguments].reduce((pre,cur) => pre+cur,0);
}
sum(1,2,3) // 6
객체 리터럴 내부에서 사용하는 경우
Rest 프로퍼티와 함께 스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다. 스프레드 문법의 대상은 리터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다.
const obj = {a:1,b:2,c:3};
// 복사
const copy = {...obj}
console.log(copy);
// 병합, 추가
const merge = {...obj,...{d:4}}
console.log(merge);
// 수정
const changed = {...obj,d:5}
console.log(changed);
'딥다이브' 카테고리의 다른 글
| [딥다이브] 37장 Set과 Map (0) | 2023.04.24 |
|---|---|
| [딥다이브] 36장 디스트럭처링 할당 (2) | 2023.04.24 |
| [딥다이브] 34장 이터러블 (1) | 2023.04.19 |
| 프로미스,async/await 문제 (0) | 2023.04.19 |
| [딥다이브] 46장 제너레이터와 async/await (2) | 2023.04.17 |