[JavaScript] 모던 자바스크립트 Deep Dive 35장 - 스프레드 문법

---

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

const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ...

---

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

const arr = [1, 2, 3];

const max = Math.max(arr); // NaN

const max2 = Math.max(...arr); // 3

Rest 파라미터와 스프레드 문법의 차이점

// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest){
    console.log(rest); // 1, 2, 3 -> [1, 2, 3]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

---

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

스프레드 문법을 배열 리터럴에서 사용하면 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다.

 

- concat

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

// ES6
var arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

---

- splice

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

// ES6
var arr1 = [1, 4];
var arr2 = [2, 3];

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

---

- 배열복사

// ES5
var origin = [1, 2];
var copy = origin.slice();

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

// ES6
const origin = [1, 2];
const copy = [...origin]; // 이때 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성한다. slice도 마찬가지

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

---

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

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { 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 }

// 특정 프로퍼티 변경
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 }