35장 스프레드 문법, 36장 디스트럭처링 할당 - 동우님

1. 스프레드 문법

• ES6에서 도입되었으며, …은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

• 대상은 Array, String, Map, Set, DOM 컬렉션 arguments와 같이 for …of로 순회할 수 있는 이터러블에 한정된다.

• 스프레드 문법의 결과물은 값이 아니다.

const a = ...[1,2,3] // 안돼요~~

• 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.
• 함수 호출문의 인수 목록
• 배열 리터럴의 요소 목록
• 객체 리터럴의 프로퍼티 목록

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

// Math.max, min
const arr = [1,2,3];
const max = Math.max(arr) // -> NaN 

// 근데 사람들은 배열을 쓴다. 어떻게 쓰는것인가..?
// Math.max 메서드는 ,로 구분된 인수 목록들중 가장 큰 값을 반환한다.
// 또한 매개변수 개수를 확정할 수 없는 가변 인자 함수다. 
// 그러므로 배열을 펼쳐서, 요소들을 개별적인 값으로 만든 후에 인수로 전달해야 한다.
// 우리가 배운 apply함수를 사용하면 두번째 배열을 펼쳐서 전달가능했다. 
const max = Math.max.apply(null, arr)); // -> 3

// 스프레드 문법을 사용하면 한방에 가능하다~!
const max = Math.max(...arr);

• Rest 파라미터와 형태가 동일하여 혼동될 수 있으므로 주의가 필요하다. (반대의 개념)

function foo(...rest) {
  console.log(rest); // 1,2,3 -> [1,2,3]
}

foo(...[1,2,3]); // 1 2 3 전달 -> ...rest -> [1,2,3] 되버리기

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

// 1. concat -> 두 배열 합치기
const a = [1,2];
const b = [3,4];
let arr = a.concat(b);
console.log(arr); // -> [1,2,3,4];
let concatArr = [...a, ...b]
console.log(concatArr); // -> [1,2,3,4];

// 2. splice
const a = [1,4];
const b = [2,3];

// splice 는 배열 추가 or 삭제가 가능합니다. (원본 배열이 바뀐다)
// 세번째 인자에 배열을 추가하면 해당 위치에 추가가 됩니다.
a.splice(1,0,b);
console.log(a); // -> [1,2,3,4] x [1,[2,3],4]

Array.prototype.splice.apply(a, [1,0].concat(b)); // 복잡하게 넣기
a.splice(1,0,...b); // -> [1,2,3,4]

// 3. 배열 복사 (slice)
// slice는 원본 배열을 바꾸지 않습니다!
const origin = [1,2];
const copy = origin.slice();
const copy = [...origin];

// 4. 이터러블을 배열로 변환
// 유사배열 객체이면서, 이터러블일때 많이 사용
function sum() {
	let args = Array.prototype.slice.call(arguments); // 배열로 변환

	// 원래 방법
	return args.reduce((acc,cur) => acc+=cur, 0);
	// 스프레드
	return [...arguments].reduce((acc,cur) => acc += cur, 0);
}

// rest 파라미터 (args에 전달된 인수들의 목록을 배열로 전달받는다.)
const sum = (...args) => args.reduce((acc,cur) => pre+cur, 0);
console.log(sum(1,2,3)); // -> 6

// 이터러블이 아닌 유사 배열 객체를 변환할 때
Array.from(array);

1. 객체 리터럴 내부에서 사용하는 경우 (최신 기술)

// 객체 복사나 객체 병합에 많이 쓰임
// 원래 방법
// Object.assign을 써야 되었음
const merged = Object.assign({}, {x:1, y:2}, {y: 10}, {z: 3});
console.log(merged); // -> {x: 1, y: 10, z: 3};



// 객체 복사
const obj = {x: 1, y: 2};
const copy = {...obj};

// 객체 병합
const merged = {x: 1, y: 2, ...{a: 3, b: 4}};
console.log(merged); // {x:1, y:2, a:3, b:4}

1. 객체 리터럴 내부에서 사용하는 경우 (최신 기술)