✅spread문법

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용

function sum(x, y, z) {
  return x + y + z;
}
//전달하려는 인자가 배열을 담은 변수
const numbers = [1, 2, 3];
//변수 안의 요소를 풀어서 전달
sum(...numbers) 

✅rest 문법

파라미터를 배열의 형태도 받아서 사용, 파라미터 개수가 가변적일때 유용

// 함수는 가변적 갯수의 인자를 rest문법으로 받을 수 있다.
unction sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
// 함수 호출시 들어가는 파라미터의 갯수가 가변적일 때!
sum(1,2,3) 
sum(1,2,3,4) 

=> 함수 호출할 때 : 배열의 요소를 풀어서 넣어야 할 때!

• rest 파라미터

  ...arr 를 사용하여 함수의 파라미터를 작성한 형태
  즉, rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 '배열'로 전달받을 수 있다.

function foo(...rest) { 
console.log(Array.isArray(rest)); // true  
console.log(rest); // [ 1, 2, 3, 4, 5 ]
}
foo(1, 2, 3, 4, 5);

=> 함수를 만들 때 : 들어오는 인자의 갯수가 가변적일 때!

• spread 연산자

  연산자의 대상 배열 또는 문자열을 '개별' 요소로 분리한다.

// 배열
console.log(...[1, 2, 3]); // -> 1, 2, 3 

// 문자열console.log(...'Helllo');  // H e l l l o 
// Map과 Set
console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

• 배열에서 사용하는 방법

//ES5var arr = [1, 2, 3];console.log(arr.concat([4, 5, 6])); // [ 1, 2, 3, 4, 5, 6 ] // ES6const arr = [1, 2, 3];// ...arr은 [1, 2, 3]을 개별 요소로 분리한다console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

코드예시 출처 :
http://poiemaweb.com/es6-extended-parameter-handling