💡 스프레드 문법이란?

ES6에서 도입된 스프레드 문법 (...)은 하나로 뭉쳐있는 여러 값들의 집합을 개별값으로 펼쳐준다.

스프레드 문법이 적용될 수 있는 대상은 for.. of문으로 순회할 수 있는 형식만 가능하다.

• Array
• String
• Map
• Set
• DOM 컬렉션

또한, 스프레드 문법으로 나눠진 결과는 값이 아니므로 변수에 할당할 수 없다!

// 배열
console.log(...[1,2,3]);    // 결과: 1 2 3

// 문자열
console.log(...'Hello');    // 결과: H e l l o

// Map
console.log(... new Map([['a', '1'], ['b', '2']]));    // 결과: ['a', '1'] ['b', '2']

// Set
console.log(... new Set([1,2,3]));    // 결과: 1 2 3

// 객체는 불가능!
console.log(...{a: 1, b: 2});    // 결과: TypeError

// 변수로 선언 불가!
const example = ...[1,2,3];   // 결과: SyntaxError

스프레드 문법 활용

1. concat (배열 합치기)

ES5에서는 concat을 통해 2개의 배열을 1개의 배열로 합칠 수 있었지만,
스프레드 문법을 사용하면 더욱 간단하게 합칠 수 있다.

// concat 방식
let arr = [1,2].concat([3,4]);
console.log(arr);  // 결과: [1,2,3,4]

// ... 방식
let arr = [...[1,2], ...[3,4]];
console.log(arr);  // 결과: [1,2,3,4]

2. slice (배열 복사)

slice()를 배열을 복사할 수 있지만, 스프레드 문법을 사용하면 더욱 간단하게 복사 가능하다.

// slice 방식
let origin = [1,2];
let copy = origin.slice();

console.log(copy);  // 결과: [1,2]

// ... 방식
let origin = [1,2];
let copy = [...origin];

console.log(copy);  // 결과: [1,2]

3. 객체 편집

객체는 스프레드 문법을 사용할 수 없지만, 객체 내부에서는 사용가능하다.
따라서 기존의 assign 방식 대신 스프레드 문법을 사용하여 객체를 병합, 수정 할 수 있다.

// assign 방식
// 객체 프로퍼티가 중복되는 경우에는 뒤의 프로퍼티가 우선권을 갖는다.
const merged = Object.assign({}, {x: 1, y: 2}, {y: 10, z: 3});

console.log(merged);  // 결과: {x: 1, y: 10, z: 3}

// ... 방식
// (객체 병합)
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: 100};

console.log(added);  // 결과: {x: 1, y: 2, z: 100}

---

💡 Rest 파라미터란?

함수의 파라미터로 오는 값들을 모아서 하나의 배열로 만들어준다.

Spread 가 기존의 배열을 펼쳐서 표현한다면,
Rest 는 배열이 아닌 개별 요소들을 하나의 배열로 만들어 준다.

function example(param, ...rest){
	console.log(param);  // 결과: 1
  	console.log(rest);   // 결과: [2,3,4,5]
}

example(1,2,3,4,5);

Rest 파리미터는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

function example(...rest, param){}

example(1,2,3,4,5); // SyntaxERROR

Rest 파리미터는 하나만 선언 할 수 있다!

function example(...rest1, ...rest2){}

example(1,2,3,4,5); // SyntaxERROR