함수에 매개변수 개수 동적으로 입력받기

일반적으로 javascript에서 함수에 매개변수를 넘겨줄 때는 다음과 같이 사용한다.

function sum(a, b) {
  return a + b;
}

이 함수는 a와 b를 인자로 받아 그 둘의 합을 반환하는 함수이다. 그런데 만약 두 개가 아니라 3개를 받고 싶으면 어떻게 할까?

function sum(a, b, c) {
  return a + b + c;
}

그냥 이렇게 매개변수를 하나 더 넘겨주면 된다. 그럼 만약 3개가 아니라 100개 200개 혹은 몇개를 넘겨받을지 모르는 상황이라면 어떻게 해야 할까?

그럴때 사용하는 방법이 나머지 매개변수...이다. 이 방식으로 매개변수를 넘겨준다면 남아있는 매개변수들을 한데 모아 배열에 집어넣는다.

function sum(...numbers) {
	console.log(numbers);
  	return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log( sum(1, 2, 3, 4, 5) ); // [1, 2, 3, 4, 5]    15

이 방식을 이용하면 여러개의 매개변수를 받을 수 있고 그 개수가 정해져 있지 않아도 된다.

또한 이런 방식으로 사용할 수도 있다.

function sumNumbersAndSubTwoNum(num1, num2, ...numbers) {
	console.log(num1, num2, numbers);
  	return numbers.reduce((acc, cur) => acc + cur, 0) - num1 - num2;
}

console.log( sumNumbersAndSubTwoNum(1, 2, 3, 4, 5) ); // 1, 2, [3, 4, 5]    9

예시를 보면 num1과 num2는 숫자로 numbers는 배열로 들어오는 것을 확인할 수 있다. 앞부분의 매개변수는 변수로, 나머지 매개변수들은 배열로 모아지는 것이다.

이때 주의해야 하는 점은 나머지 매개변수는 마지막에 있어야 한다는 점이다. 만약 나머지 매개변수가 마지막에 있지 않으면 에러가 발생한다.