35장 스프레드 문법

ES6에서 도입된 스프레드 문법 (전개 문법 ...)은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for ... of 문으로 순회 가능한 이터러블에 한정된다.

스프레드 문법의 결과는 값이 아니기에 변수에 할당 할 수 없다.

const list = ...[1,2,3] // SyntaxError

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

스프레드 문법은 Rest 파라미터와 형태가 동일해 혼동할 수 있다.

Rest 파라미터는 함수에 전달된 인수들의 목록을 전달받기 위해 매개변수 이름 앞에 ... 을 붙이는 것이고, 스프레드 문법은 여러 값이 하나로 뭉쳐 있는 이터러블을 펼쳐 개별적인 값들의 목록을 만드는 것으로, 서로 반대의 개념이다.

function foo (...rest){
    console.log(rest) // 1, 2, 3 => [1,2,3]
}

foo(...[1,2,3]) // [1,2,3] => 1, 2, 3

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

스프레드 문법을 배열 내부에서 사용하면 ES5 방식보다 더욱 간결하고 가독성 좋게 표현 가능하다.

35.2.1 concat

// ES 5
var arr = [1, 2].concat([3,4])
console.log(arr) // [1,2,3,4]

// ES 6
const arr = [...[1,2], ...[3,4]]
console.log(arr) // [1,2,3,4]

35.2.2 splice

// ES 5
var arr1 = [1,4]
var arr2 = [2,3]

Array.prototype.splice(arr1, [1, 0].concat(arr2))
console.log(arr1) // [1, 2, 3, 4]

// ES 6
const arr1 = [1, 2]
const arr2 = [3, 4]

arr1.splice(1, 0, ...arr2)
console.log(arr1) // [1, 2, 3, 4]

35.2.3 배열 복사

// ES 5
var origin = [1, 2]
var copy = origin.slice()

console.log(copy) // [1, 2]
console.log(copy === origin) // false

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

console.log(copy) // [1, 2]
console.log(copy === origin) // false

// 얕은 복사가 이루어짐

35.2.4 이터러블을 배열로 변환

ES 5에서 이터러블을 배열로 변환하려면 apply 또는 call 메서드를 사용해 slice 메서드를 호출해야 한다.

// ES 5
function sum () {
    var args = Array.prototype.slice.call(arguments)
    
    return args.reduce(funciton (pre, cur) {
        return pre + cur;
    }, 0)
}

console.log(sum(1,2,3)) // 6

// 유사 배열 객체도 배열로 전환 가능
const arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}

const arr = Array.prototype.call(arrayLike) // [1,2,3]
console.log(Array.isArray(arr)) // true

스프레드 문법을 사용하면 좀 더 간편하게 이터러블을 배열로 변환할 수 있다.

function sum () {
    return [...arguments].reduce(pre, cur) => pre + cur, 0)
}
console.log(sum(1,2,3)) // 6

// 유사 배열 객체는 불가능
const arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}

const arr = [...arrayLike] // TypeError

// Array.from 메서드를 사용해 배열로 변경해야함

더 나은 방법은 Rest 파라미터를 사용하는 것

const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0)
console.log(sum(1,2,3)) // 6

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

객체 내부에서도 스프레드 문법을 사용할 수 있다.

const obj = {x: 1, y: 2}
const copy = {...obj} // {x: 1 , y: 2}

스프레드 프로퍼티라고 하며, 이를 활용해 객체를 병합하거나, 특정 프로퍼티를 변경 및 추가 가능하다.

const merged = {...{x: 1, y: 2}, ...{y: 10, z: 3}}
console.log(merged) // { x: 1, y: 10, z: 3}

const changed = {...{x: 1, y: 2}, y: 100}
console.log(changed) // {x : 1, y: 100}

const added = {...{x: 1, y:2}, z:0}
console.log(added) // {x: 1, y: 2, z: 0}