34. Rest Parameters (나머지 매개변수)

안녕하세요. 박기린 입니다.

저번에는 Spread Operator (전개 연산자)에 대해 알아봤습니다.

이번에는 전개 연산자와 비슷하게 생겼지만 다른 기능을 가진 'Rest Parameters'에 대해 알아보겠습니다.

 

 

Rest Parameters

Rest Parameters(나머지 매개변수)는 Spread Operator(전개 연산자)처럼 '...'을 사용하지만, 실제로는 Spread Operator와 반대되는 기능을 가집니다.

Spread Operator(전개 연산자) : 배열을 개별요소로 풀어준다.
Rest Parameters(나머지 매개변수) : 개별요소를 수집해서 배열로 압축해준다.

가장 간단한 구분 방식으로는 '...'이 할당 연산자(=)의 우항/좌항 중 어디에 위치하는지를 보면 됩니다.

 

 

Spread Operator, because on RIGHT side of '='

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

 

 

Rest Parameters, because on LEFT side of '='

1. Destructing

const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(others); // [3, 4, 5]

Destructing을 한 후 각 변수에 ArrayElemets를 남을 때, Rest Parameters(나머지 매개변수)를 이용해서 남은 요소들을 한 Array로 묶어서 저장할 수 있습니다.

 

 

2. Functions

const add = function(...numbers) {
  console.log(numbers); // 전달 받은 인자들이 array로 묶여있는 것을 확인할 수 있다.
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  console.log(sum);
};
add(2, 3);
add(5, 3, 7, 2);

임의의 갯수를 가진 인수를 전달하는 경우에 Rest Parameters(나머지 매개변수)를 사용하면 됩니다.

 

 

만약, 위의 add() 함수에 Array를 전달하고자 한다면?

const x = [23, 5, 7];
add(...x);

이전에 배운 전개 연산자(Spread Operator)를 이용해서 넣어주면 됩니다.

Rest와 Spread는 서로 반대됨을 기억합시다!

 

 

 

 

 

---

예제

function orderPizza(mainIngredient, ...otherIngredients) { 
	// 첫 번째 이외에 사용하지 않은 모든 인자가 otherIngredients로 들어간다.
    console.log(mainIngredient); // mushrooms
    console.log(otherIngredients); // 나머지 요소들이 array로 출력
}

orderPizza('mushrooms', 'onion', 'olives', 'spinach');
orderPizza('mushrooms') // 이럴 경우 REST PATTERN에 들어갈 요소가 없어서 빈 배열을 내보낸다.