나머지 매개변수

나머지 매개변수(rest parameter) 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

구문

function(a, b, ...theArgs) {
  // ...
}

설명

함수의 마지막 유명(named) 인수가 ...로 시작되는 경우, 그 요소가 0(포함)에서 함수에 전달되는 실제 인수에 의해 제공되는 theArgs.length(제외)인 배열이 됩니다.

위 예제에서, theArgs는 함수의 세 번째 인수 (첫 번째는 a 두 번째는 b로 맵핑되었기에) 및 연이은 인수 모두를 수집할 겁니다.

나머지 매개변수 및 arguments 객체간 차이

나머지 매개변수와 arguments 객체 사이에 세 가지 주요 차이점이 있습니다:

• 나머지 매개변수는 개별 이름이 주어지지 않은 유일한 대상이고 arguments 객체는 함수에 전달되는 모든 인수를 포함합니다;
• arguments 객체는 실제 배열이 아니고 나머지 매개변수는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다
• 즉 arguments 객체는 자체에 특정 추가 기능이 있습니다 (callee 속성처럼).

arguments에서 배열까지

나머지 매개변수는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.

// 나머지 매개변수 이전에는, 다음을 볼 수 있음:
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length);

  // …
}

// 위는 아래와 같음

function f(a, b, ...args) {

}

예

theArgs가 배열이기에, length 속성을 사용하여 그 요소의 수를 얻을 수 있습니다:

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

다음 예에서, 두 번째 인수에서 끝까지 인수를 수집하기 위해 나머지 매개변수를 사용합니다. 그 뒤에 그들을 첫 번째 인수에 곱합니다:

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function (element) {
    return multiplier * element;
  });
}

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

다음 예는 arguments 객체가 아니라 나머지 매개변수에 Array 메서드를 사용할 수 있음을 보입니다:

function sortRestArgs(...theArgs) {
  var sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5,3,7,1)); // 1,3,5,7로 보임

function sortArguments() {
  var sortedArgs = arguments.sort();
  return sortedArgs; // 이는 결코 일어나지 않음
}

// TypeError 발생: arguments.sort는 함수가 아님
console.log(sortArguments(5,3,7,1));

arguments 객체에 Array 메서드를 사용하기 위해서는, 먼저 실제 배열로 바꿀 필요가 있습니다.

스펙

브라우저 호환성

참조

• arguments 객체
• Array
• 함수
• 전개 연산자
• Original proposal at ecmascript.org
• JavaScript arguments object and beyond