35 스프레이드 문법

• ES6에서 도입된 스프레드 문법(spread syntax) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산) 개별적인 값들의 목록 생성
• 스프레드 문법을 사용할 수 있는 대상 : Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for ...of 문으로 순회할 수 잇는 이터러블
• 스프레드 문법의 결과물은 값으로 사용 불가능
  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소
  • 객체 리터럴의 프로퍼티 목록

---

함수 호출문의 인수 목록에서 사용

const arr = [1, 2, 3];

// 배열의 arr요소 중에서 최대값을 구하기 위해 Math.max를 사용
// Math.max 메서드는 매개변수 개수를 확정할 수 없는 가변 인자 함수므로 숫자가 아닌 
// 배열을 인수로 전달하면 오류 발생
const max = Math.max(arr); // -> NaN
 
// 배열을 펼쳐서 요소들의 목록을 함수의 인자로 전달하고 싶은 경우 Function.prototype.apply 사용
var max2 = MAth.max.apply(null, arr);

// 스프레드 문법사용
// Math.max(...[1,2,3]) -> Math.max(1,2,3)와 같음
const max3 = Math.max(...arr);

• 스프레이드 문법은 Rest 파라미터와 형태와 동일하므로 주의할 필요가 있음
  • Rest 파라미터와 스프레드 문법은 서로 반대 개념

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

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐 목록으로 만듬
foo(...[1, 2, 3]); // [1, 2, 3] -> 1, 2, 3

---

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

concat

• 2개의 배열을 1개의 배열로 결합하는 경우

// 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];

// 세 번째 인수 arr2를 해체하여 전달 해야 -> [1,2,3,4]
// 그렇지 않으면 arr1에 arr2 배열 자체가 추가
arr1.splice(1, 0, arr2);
console.log(arr1); // [1, [2,3], 4]


var arr3 = [1,4];
var arr4 = [2,3];
// apply 메서드의 2번째 인수(배열)은 apply 메서드가 호출한 splice 메서드의 인수 목록
// arr[1]부터 0개의 요소를 제거하고 그 자리에 (arr[1])에 새로운 요소 (2,3)삽입
Array.prototype.splice.apply(arr3, [1, 0].concat(arr4));
console.log(arr3); // [1,2,3,4]


// ES6
const arr5 = [1,4];
const arr6 = [2,3];

arr5.aplice(1, 0, ...arr6);
console.log(arr5); // [1, 2, 3, 4]

배열 복사

• 배열을 복사하려면 slice 메서드 사용
  • 원본 배열의 각 요소를 얕은 복사(shallow copy)

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

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

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

이터러블을 배열로 변환

• 이터러블을 배열로 변경하려면 Function.prototype.apply 또는 Function.prototype.call 메서드를 사용하여 slice 메서드 호출

// ES5
function sum() {
 // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
 var args = Array.prototype.slice.call(arguments);
 return args.reduce(function (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.slice.call(arrayLike); // [1,2,3]
console.log(arr.isArray(arr)); // true

// ES6
// 스프레드 문법 사용
function sum() {
 return [...arguments].reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3)); // 6

// Rest 파라미터 사용
const sum = (...arg) => arg.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: object is not iterable
// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환
Array.from(arrayLike); // [1, 2, 3]

---

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

• 스프레드 프로퍼티를 사용하면객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용 가능

const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(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 }

• 스프레드 프로퍼티가 제안되기 전 Object.assign 메서드를 사용하여 여러 개의 객체를 병합, 특정 프로퍼티를 변경 또는 추가함

// 객체 병합
// 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖음
const merged = Object.assign({}, { x: 1, y: 2, { y: 10, z: 3 });
console.log(merged); // { x: 1, y: 10, z: 3 }

// 특정 프로퍼티 변경
const changed = Object.assign({}, { x: 1, y: 2 }, { y: 100});
console.log(changed); // {x: 1, y: 100 }

// 프로퍼티 추가
const added = Object.assign({}, { x: 1, y: 2 }, { z: 0});
console.log(merged); // { x: 1, y: 2, z: 0 }

• 스프레드 프로퍼티

// 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖음
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 };
// const added = {...{ x: 1, y: 2 }, ...{ z: 0 } };
console.log(merged); // { x: 1, y: 2, z: 0 }

📖 참고도서 : 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리 / 이웅모 저 | 위키북스