함수 호출문의 인수 목록에서 스프레드 문법

• 가변 인자 함수는 매개변수 개수를 확정할 수 없다.

  • ex) Math.max 메소드

    • 배열 자체를 인수로 넘기면 최대값을 구할 수 없음 --> NaN 반환

	const arr = [1,2,3];
	console.log(Math.max(arr)); // NaN

배열을 펼처서 요소들의 목록을 넘겨야 한다.

const arr = [1,2,3];
console.log(Math.max(...arr)); // 배열의 각 요소를 펼쳐서 전달

• 이전에는 Function.prototype.apply 메소드로 해결함

const arr = [1,2,3];
// 스프레드 문법 이전에 가변 인자 함수를 사용하는 법
console.log(Math.max.apply(null,arr)); // 3

스프레드 문법 vs Rest 파라미터

• 스프레드 문법 : 여러 개의 값이 하나의 뭉쳐 있는 이터러블을 펼쳐서 개별적인 값들의 목록을 반환하기 위해 사용하는 것.

• Rest 파라미터 : 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 사용

const arr = [1, 2, 3];

// 함수에서 매개변수로 전달 받을 시 -> Rest 파라미터
function foo(...rest) {
  console.log(rest); // [ 1, 2, 3 ] << 배열
}

// 인수 전달 시 -> 스프레드 문법
foo(...[1, 2, 3]);

---

배열 리터럴의 요소 목록에서 스프레드 문법

두 개의 배열을 결합

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

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

// ES6부터 배열 결합 방식 (by. 스프레드 문법)
merge = [...arr1, ...arr2];
console.log(merge); // [ 1, 2, 3, 4 ]

배열의 중간에 다른 배열의 요소들을 추가하거나 제거

• ES5 --> Splice 메소드 + Function.prototype.apply 메소드

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

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

1. arr1 : 수정하려는 배열
2. arr2 : 삽입하려는 배열

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

배열을 복사하는 방법

• ES5 : slice();

• ES6 : 스프레드 문법

두 방식 모두 얕은 복사를 따른다.

const arr = [1,2,3,4];
let dup = arr.slice();
console.log(dup); // [1,2,3,4];

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

유사 배열 객체 스프레드 문법 물가능함.

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

// 유사 배열 객체 -> 스프레드 문법 불가능
const arr = [...arrayLike]; // TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

유사 배열 객체나 이터러블에 상관없이 배열로 변경하고 싶다면?

Array.from 메소드 사용하면 된다.

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

const arr = Array.from(arrayLike);
console.log(arr); // [1, 2, 3]
console.log(Array.isArray(arr)); // true

객체 리터럴의 프로퍼티 목록에서 스프레드 문법

• 스프레드 문법은 원래는 일반 객체에서 사용하는 것은 허용하지 않았다.

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


console.log(copy); // { x: 1, y: 2 }
console.log(obj === copy); // false

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

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: 3 });
console.log(added); // { x: 1, y: 2, z: 3 }