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

ES6 도입
값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬
...이터러블
for ...of 으로 순회가능한 이터러블만 가능
Array, String, Map, Set, DOM 컬렉션, arguments
스프레드 문법의 결과는 값이 아님 -> 변수 할당 불가

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

함수의 인수 목록에 여러값을 전달해야 할 때

const arr = [1,2,3,4,5];
Math.max(1,2,3,4,5); 
Math.max(...arr);

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

concat

배열 두개를 합칠 때

const arr1 = [1,2];
const arr2 = [3,4];
const arr3 = arr1.concat(arr2); 
const arr4 = [...arr1,...arr2]; 

splice

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

배열 복사

const origin = [1,2,3,4,5];
const copy = [...origin]; // 얕은 복사

이터러블을 배열로 반환

arguments 객체는 이터러블이면서 유사 배열 객체임 -> 스프레드 문법 가능

function sum(){
	return [...arguments].reduce((acc,cur)=>acc+cur,0);
}

// Rest 파라미터는 인수들을 배열로 받아오니 이게 더 Good
function sum(...args){
	return args.reduce((acc,cur)=> acc+cur,0);
}

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

const arr = [...arrayLike]; // 에러, 이터러블이 아닌 유사배열객체는 스프레드 불가
Array.from(arrayLike); // 유사 배열 객체를 배열로 만들어줌

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

스프레드 프로퍼티 제안
일반 객체에서도 스프레드 문법이 적용이 됨

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

const merged = {...{x:1,y:2},...{y:200}}; // {x:1,y:200} 중복 시 나중에 값으로

이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)