나머지 매개변수
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. JavaScript에서 가변항 함수를 표현할 때 사용합니다.
시도해보기
구문
function f(a, b, ...theArgs) {
// ...
}
설명
함수의 마지막 매개변수 앞에 "...
"(세 개의 U+002E FULL STOP 문자)를 붙이면 (사용자가 제공한) 모든 후속 매개변수를 표준 JavaScript 배열에 넣도록 지정합니다. 마지막 매개변수만 나머지 매개변수로 설정할 수 있습니다.
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]
빠른 참조
함수 정의에는 하나의 ...
만 존재할 수 있습니다.
foo(...one, ...wrong, ...wrong);
나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 합니다.
foo(...wrong, arg2, arg3);
foo(arg1, arg2, ...correct);
나머지 매개변수와 arguments
객체의 차이
나머지 매개변수와 arguments
객체 사이에는 세 개의 주요 차이가 있습니다.
인수에서 배열로
나머지 매개변수는 다수의 인수를 배열로 변환하는 과정의 보일러플레이트 코드를 줄이기 위해 도입됐습니다.
// 나머지 매개변수 이전에 "arguments"를 일반 배열로 변환하던 방법
function f(a, b) {
let normalArray = Array.prototype.slice.call(arguments);
// -- 또는 --
let normalArray = [].slice.call(arguments);
// -- 또는 --
let normalArray = Array.from(arguments);
let first = normalArray.shift(); // 동작, 첫 번째 매개변수 반환
let first = arguments.shift(); // 오류, arguments는 실제 배열이 아님
}
// 이제는 나머지 매개변수를 사용해 쉽게 배열로 가져올 수 있음
function f(...args) {
let normalArray = args;
let first = normalArray.shift(); // 동작, 첫 번째 매개변수 반환
}
예제
나머지 매개변수 사용하기
아래 예제에서, 첫 번째 인수는 a
, 두 번째 인수는 b
로 맵핑되므로 이 두 개의 인수는 일반적인 방법으로 사용할 수 있습니다.
그러나 세 번째 인수인 manyMoreArgs
는 셋, 넷, 다섯, 여섯, ... n번째 인수까지, 사용자가 제공한 만큼의 인수를 포함한 배열입니다.
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"] <-- 요소가 하나지만 여전히 배열임
그리고 아래에선 매개변수를 두 개만 제공했지만, 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
나머지 매개변수를 일반 매개변수와 함께 사용하기
이 예제에서는 첫 번째 이후의 모든 매개변수를 배열에 모은 후, 각각의 값을 첫 번째 매개변수로 곱한 결과를 반환합니다.
function multiply(multiplier, ...theArgs) {
return theArgs.map((element) => {
return multiplier * element;
});
}
let arr = multiply(2, 15, 25, 42);
console.log(arr); // [30, 50, 84]
나머지 매개변수는 실제 배열, arguments
는 유사 배열
나머지 매개변수에서는 Array
메서드를 사용할 수 있지만, arguments
객체에서는 사용할 수 없습니다.
function sortRestArgs(...theArgs) {
let sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7
function sortArguments() {
let sortedArgs = arguments.sort();
return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1));
// TypeError 발생 (arguments.sort is not a function)
arguments
객체에 Array
메서드를 사용하려면 우선 arguments
를 실제 배열로 변환해야 합니다.
function sortArguments() {
let args = Array.from(arguments);
let sortedArgs = args.sort();
return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
명세서
Specification |
---|
ECMAScript Language Specification # sec-function-definitions |
브라우저 호환성
BCD tables only load in the browser
함께 보기
- 전개 구문 (같은 '
...
' 사용) - 구조 분해 할당
arguments
객체Array