가변 인자 함수란?

가변 인자 함수는 매개변수 개수를 확정할 수 없는 함수를 말한다.

일반 함수

보통 함수는 매개변수의 개수를 지정하고 그 수만큼 인수를 받는다.

function sum(x, y) {
  return x + y;
}

console.log(sum());    // NaN
console.log(sum(1));    // NaN
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3));    // 3

자바스크립트는 매개변수 개수와 인수의 개수가 일치하는지 확인하지 않기 때문에 개수를 맞추지 않아도 에러가 나지 않는다.
매개변수는 함수 내에서 undefined로 초기화된 이후 인수가 할당된다.

• 매개변수 개수 > 인수 개수
  • 인수가 전달되지 않은 매개변수는 undefined로 초기화
  • 따라서 sum()과 sum(1)을 계산하면 각각 'undefined + undefined', '1 + undefined'이기 때문에 NaN이 출력된다.
• 매개변수 개수 < 인수 개수
  • 초과된 인수는 무시
  • 초과된 인수는 그냥 버려지지 않고 arguments 객체의 프로퍼티로 보관

arguments 객체

arguments 객체란 함수 호출 시 전달된 인수들의 정보를 담고 있는 객체다.

• 순회 가능한 (이터러블한) 유사 배열 객체
• 함수 안에서 지역 변수처럼 사용
• 함수 외부에서 참조 불가

arguments 객체를 사용하면 가변 인자 함수를 구현할 수 있다.

function sum() {
  let result = 0;
  
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  
  return result;
}

console.log(sum());    // 0
console.log(sum(1));    // 1
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3));    // 6

위의 코드를 살펴보면,

• arguments 객체는 유사 배열 객체이기 때문에 for문으로 순회 가능
• 모든 인수는 arguments 객체의 프로퍼티로 순서대로 보관되기 때문에 차례대로 접근할 수 있다.

Rest 파라미터

Rest 파라미터 (나머지 매개변수)는 ES6에서 도입되었다.

• 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수
• 함수에 전달된 인수를 배열로 전달받음

Rest 파라미터를 사용하면 가변 인자 함수를 구현할 수 있다.

function sum(...args) {
  return args.reduce((pre, cur) => pre + cur, 0);
}

console.log(sum());    // 0
console.log(sum(1));    // 1
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3));    // 6

위의 코드를 살펴보면,

• Rest 파라미터로 인수를 배열로 전달받음.
• reduce 메서드에서 전달받은 콜백 함수로 누적값 계산
  • reduce에 대한 자세한 내용은 아래 참고
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Rest 파라미터의 장점

1. arguments 객체에 비해 간편함

   • arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call, Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움 발생

   function sum() {
     var array = Array.prototype.slice.call(arguments);
     
     return array.reduce(function (pre, cur) {
       return pre + cur;
     }, 0);
   }
   
   console.log(sum(1, 2));    // 3

   • Rest 파라미터를 사용하면 가변 인자 함수의 인수 목록을 배열로 직접 전달 받을 수 있음

   function sum(...args) {
     return args.reduce((pre, cur) => pre + cur, 0);
   }
   
   console.log(sum(1, 2));    // 3

2. 화살표 함수로 가변 인자 함수를 구현할 때

   • 화살표 함수는 함수 자체의 arguments 객체를 갖지 않기 때문에 화살표 함수로 가변 인자 함수를 구현해야 할 때는 Rest 파라미터 사용

   function foo(...rest) {
     console.log(rest);    // [ 1, 2, 3 ]
   }
   
   foo(1, 2, 3);

출처 : 모던 자바스크립트 Deep Dive