[JS DeepDive] 35. 스프레드 문법

Spread Syntax

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.

🟠 함수 호출문의 인수 목록에서 사용하는 경우

요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록을 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.

const arr = [1, 2, 3]
const max = Math.max(arr) // NaN

// 스프레드 문법 사용, Math.max(...[1,2,3])은 Math.max(1,2,3)과 같다
const max = Math.max(...arr) // 3

🟠 배열 리터럴 내부에서 사용하는 경우

1. concat

const arr = [...[1, 2], ...[3, 4]] // [1, 2, 3, 4]

2. splice

const arr1 = [1, 4]
const arr2 = [2, 3]

arr.splice(1, 0, ...arr2) // [1, 2, 3, 4]

3. 배열 복사

const origin = [1, 2]
const copy = [... origin] // [1, 2]

console.log(copy === origin) //false

🟠 객체 리터럴 내부에서 사용하는 경우

//객체 복사(얕은 복사)
const obj = {x: 1, y: 2}
const copy = { ... obj } // {x: 1, y: 2}
console.log(obj === copy) //false

//객체 병합
const merged = {x:1, y:2, ... {a:3, b:4}}
console.log(merged) // {x:1, y:2, a:3, b:4}