[modern JS Deep Dive] - 35장 . 스프레드 문법

---

스프레드 문법

• ES6 에서 도입되었다.
• 하로 뭉쳐 있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다.
• 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션과 같이 for …of 문으로 순회할 수 있는 이터러블에 한정된다.
• 이터러블 문법의 결과는 값이 아니라 값들의 목록 이기 때문에, 변수에 할당할 수 없다.

---

스프레드 문법의 결과물의 활용

스프레드 문법의 결과물은 값으로 사용할 수 없고, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다

1. 함수 호출문의 인수 목록
2. 배열 리터럴의 요소 목록
3. 객체 리터럴의 프로퍼티 목록

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

const arr = [1,2,3]

const max = Math.max(arr)//NaN
//Math.max 메서드는 여러개의 숫자를 인수로 전달받아 인수 중에 최대값을 반환하기에, 배열을 인수로 전달하면 NaN을 반환한다.

const max = Math.max(...arr) //옳은 방법 

2. 배열 리터럴의 요소 목록에서 사용하는 경우

//1. concat
2개의 배열을 1개로 결합하고 싶은 경우 
ES5 방법
var arr = [1,2].concat([3,4])

ES6 방법
const arr = [...[1,2],...[3,4]]

//2. splice 
ES5 방법
var arr1 = [1,4]
var arr2 = [2,3]

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

ES6 방법
arr1.splice(1,0,...arr2) //[1,2,3,4]

…

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

• 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다.
• 스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다.

//객체 복사
const user = { name: 'Min', age: 26 };

const newUser = { ...user };

console.log(newUser); 
// { name: 'Min', age: 26 }

//객체 병합
//여러 객체를 합칠 때 순서가 중요함. 뒤에 오는 속성이 앞의 같은 키를 덮어씀.
const base = { name: 'Min', age: 26 };
const extra = { job: 'Frontend Developer', country: 'Korea' };

const profile = { ...base, ...extra };

console.log(profile);
// { name: 'Min', age: 26, job: 'Frontend Developer', country: 'Korea' }