확산 구문 대 Rest 매개변수: 차이점 이해

ES2015의 두 가지 새로운 기능인 확산 구문과 나머지 매개변수는 다음을 수행하는 강력한 방법을 제공합니다. 배열과 객체를 조작합니다. 둘 다 비슷해 보이지만 서로 다른 용도로 사용되며 각각 고유한 기능을 가지고 있습니다.

확산 구문

확산 구문(점 3개 "..."로 표시됨) )를 사용하면 반복 가능 항목(예: 배열 또는 객체)을 다른 반복 가능 항목 내의 개별 요소로 확산하거나 확장할 수 있습니다. 이 기능을 사용하면 여러 배열이나 객체를 새로운 배열이나 객체로 편리하게 병합하거나 결합할 수 있습니다.

예를 들어 다음 코드를 고려해 보겠습니다.

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

이 코드 조각에서 ...abc 및 ... def 확산 구문은 abc 및 def 배열을 개별 요소로 확장하여 두 배열의 모든 요소를 ​​포함하는 새로운 알파 배열을 만듭니다.

Rest 매개변수

반면에 , 나머지 매개변수(식별자 앞에 점 3개 "..."로 표시됨)는 함수에 전달된 나머지 인수를 단일 배열로 수집합니다. 나머지 매개변수는 함수 매개변수 목록의 마지막 매개변수여야 합니다.

작동 중인 나머지 매개변수의 예는 다음과 같습니다.

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

이 코드에서 ...numbers 나머지 매개변수는 sumAll 함수에 전달된 나머지 인수(이 경우 1, 2, 3, 4, 5)를 수집하여 다음을 생성합니다. 단일 숫자 배열.