Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
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
객체 사이에 세 가지 주요 차이점이 있습니다:
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
명세
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.