Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

 

구문

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

설명

함수의 마지막 파라미터의 앞에 ... 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

 

Rest 파라미터 및 arguments 객체간 차이

Rest 파라미터와 arguments 객체 사이에 세 가지 주요 차이점이 있습니다:

  • Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, arguments 객체는 함수로 전달된 모든 인수를 포함합니다.
  • arguments 객체는 실제 배열이 아니고 rest 파라미터는 Array 인스턴스로, sort, map, forEach 또는 pop 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.
  • arguments 객체는 자체에 특정 추가 기능이 있습니다 (callee 속성처럼).

arguments에서 배열까지

Rest 파라미터는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.

// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음

function f(a, b) {

  var normalArray = Array.prototype.slice.call(arguments);
  // -- 또는 --
  var normalArray = [].slice.call(arguments);
  // -- 또는 --
  var normalArray = Array.from(arguments);

  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)

}

// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음

function f(...args) {
  var normalArray = args;
  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
}

Rest 파라미터 해체

Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. 구조 분해 할당 문서를 보세요.

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b 와 c 는 undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)

예제

이 예제에서, 첫 번째 인수는 "a", 두 번째 인수는 "b" 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 "manyMoreArgs" 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

아래를 보면, 하나의 값만 있더라도 마지막 인수는 여전히 배열을 갖습니다.

// 위 예제와 동일한 함수 정의를 사용

myFun("one", "two", "three");

// a, one
// b, two
// manyMoreArgs, [three]

아래를 보면, 3번 째 인수가 제공되지 않더라도, "manyMoreArgs" 는 여전히 배열입니다(비어있긴하지만).

// 위 예제와 동일한 함수 정의를 사용

myFun("one", "two");

// a, one
// b, two
// manyMoreArgs, []

theArgs 가 배열이므로, length 프로퍼티를 사용해 엘리먼트의 수를 얻을 수 있습니다.

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

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

다음 예제에서, rest 파라미터는 첫 번째 인수 다음의 모든 인수를 배열로 모으는데 사용됩니다. 각각은 첫 번째 파라미터와 곱해져 배열로 반환됩니다.

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]

Array 메소드는 rest 파라미터에서 사용될 수 있지만, arguments 객체에서는 그렇지 않습니다.

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; // this will never happen
}


console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)

arguments 객체에서 Array 메소드를 사용하려면, 이를 먼저 실제 배열로 변환해야합니다.

function sortArguments() {
  var args = Array.from(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7

명세

명세 상태 설명
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Function Definitions' in that specification.
Standard 초기 정의.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Function Definitions' in that specification.
Draft  

브라우저 호환성

 

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 47Edge Full support 12Firefox Full support 15IE No support NoOpera Full support 34Safari Full support 10WebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support 12Firefox Android Full support 15Opera Android Full support 34Safari iOS Full support 10Samsung Internet Android Full support 5.0nodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --harmony runtime flag.
Destructuring rest parametersChrome Full support 49Edge No support NoFirefox Full support 52IE No support NoOpera Full support 36Safari ? WebView Android Full support 49Chrome Android Full support 49Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 36Safari iOS ? Samsung Internet Android Full support 5.0nodejs Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: cs09g, Netaras
최종 변경자: cs09g,