35장 스프레드 문법

• ES6에서 도입됨
• 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬
• 사용할 수 있는 대상 : for...of문으로 순회할 수 있는 이터러블
  (ex. Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments)
• 사용 가능한 곳 : 함수 호출문의 인수 목록 / 배열 리터럴의 요소 목록 / 객체 리터럴의 프로퍼티 목록

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

---

const arr = [1, 2, 3];

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

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

---

35.2.1 concat

• 2개의 배열을 1개의 배열로 결합하고 싶은 경우

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

• 스프레드 문법을 사용하면 아래와 같이 사용함

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

35.2.2 splice

• 배열의 중간에 다른 배열의 요소를 추가하거나 제거하고 싶을 경우

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

// 세번째 인수에 배열을 전달하면 배열 자체가 추가됨
arr1.splice(1, 0, arr2);
console.log(arr1); // [1, [2, 3], 4]

• 이 경우엔 배열을 해체해서 전달해야 하므로 추가적인 함수를 더 사용해야 함
• 스프레드 문법을 사용하면 아래와 같이 사용함

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

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

35.2.3 배열 복사

• slice메서드를 사용할 경우

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

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

• 스프레드 문법을 사용하면 아래와 같이 사용함

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

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

• 이 때 얕은 복사로 새로운 복사본을 생성함 (slice메서드도 동일)

35.2.4 이터러블을 배열로 변환

• Function.prototype.apply또는 Function.prototype.call메서드를 사용해서 slice메서드를 호출해야 함

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

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

const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

const arr = Array.prototype.slice.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

35.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}