🚨 차이점

<개념>

• Rest Parameter : 여러 엘리먼트를 수집하며 이를 하나의 엘리먼트로 "압축"
• Spread 연산자 : 배열을 그 엘리먼트로 "확장"

<함수 매개변수>

• Rest Parameter : 함수를 선언할 때 매개변수로 사용
• Spread 연산자 : 함수를 호출할 때, 매개변수로 사용

<위치>

• Rest Parameter : 마지막 매개변수으로만 써야한다.
• Spread 연산자 : 위치에 상관이 없다.

Rest Parameter(나머지 매개변수)란?

함수를 선언할 때, 함수의 마지막 매개변수 앞에 ...을 붙여 사용자가 제공한 모든 나머지 인수를 배열로 묶는다.
즉, 정해지지 않은 수의 인수를 배열로 나타낸다.

function func(a, b, ...others) {
  conosle.log("a", a);
  console.log("b", b);
  console.log("others", others);//others라는 배열에 할당

func("one", "tow", "three", "four", "five");
// 출력결과 :
// a, one
// b, two
// others, [three, four, five]

🚩 마지막 매개변수로만 써야한다.

🚩 arguments와의 차이점

• 나머지 매개변수는 비교적 최신문법이다.
• arguments는 유사 배열 객체로 배열 메서드를 사용할 수 없다.
• arguments는 인수 전체를 담는다.

Spread syntax(Spread연산자)란?

spread연산자는 배열 또는 문자열과 같이 반복가능한 객체를 개별 요소로 분리한다.

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

//문자열
console.log(...'hello');   //h e l l o

1. 함수를 호출할 때, 매개변수로 사용

function foo(x, y, z) {
  console.log(x);
  console.log(y);
  console.log(z);
}

const arr = [1, 2, 3];

foo(...arr); // 1 2 3을 각각 출력

2. 여러번 사용 가능

const func = function(x, y, z, v, w) {};
let args = [0, 1, 2];

// func.apply(null, args)
func(1, ...args, ...[3]);

• Spread연산자는 여러번 사용가능하며,
• 인수와 혼합해서 사용 가능하다.

3. apply()를 대체할 수 있다.

• 일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때,Function.prototype.apply()를 사용했는데, 이를 Spread연산자로 대체할 수 있다.

const func = function(x, y, z) {};
let args = [0, 1, 2];

// func.apply(null, args)
func(...args);

✅new 생성자 함수에 적용 가능

• new를 사용해 생성자함수를 호출 할 때, 배열과 apply를 직접 사용할 수 없는데
• spread연산자로 배열과 new를 같이 사용할 수 있다.

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

4. 배열의 복사

⛔But 다차원 배열에는 적합하지 않다.

var arr = [1, 2];
var copiedArr = [...arr]; // arr.slice() 와 유사
copiedArr.push(3);

// copiedArr는 [1, 2, 3] 이 됨
// arr는 영향을 받지 않고 남아 있음

5. 배열의 연결 - concat(), unshift() 대체

• .concat([배열]) : 배열의 끝에 배열 연결하고 새로운 배열 반환
• .unshift() :배열의 시작지점에 새로운 요소 삽입하고 새로운 길이 반환

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1은 [3, 4, 5, 0, 1, 2]