나머지 매개변수

나머지 매개변수 (Rest parameters)

나머지 매개변수(rest parameter) 문법은 함수가 무한한 수의 인자를 배열로 받아들일 수 있게 해주며, JavaScript에서 가변 인자 함수(variadic functions)를 표현하는 방법을 제공합니다.

호환성: Baseline — 널리 사용 가능(Widely available). 이 기능은 잘 확립되어 있으며 많은 기기와 브라우저 버전에서 작동합니다. 2016년 9월부터 브라우저에서 사용할 수 있습니다.

출처: Rest parameters

본문

Try it

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10

구문 (Syntax)

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

다음과 같은 추가 구문 제한이 있습니다.

함수 정의에는 나머지 매개변수를 하나만 둘 수 있습니다.
나머지 매개변수는 함수 정의에서 마지막 매개변수여야 합니다.
나머지 매개변수 뒤에는 후행 쉼표가 허용되지 않습니다.
나머지 매개변수는 기본값을 가질 수 없습니다.

설명 (Description)

함수 정의의 마지막 매개변수 앞에 ...(세 개의 U+002E FULL STOP 문자)를 붙일 수 있습니다. 그러면 나머지 모든 (사용자 제공) 매개변수가 Array 객체 안에 배치됩니다.

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"]

나머지 매개변수는 구조 분해될 수 있으며, 이를 통해 특정 매개변수 위치를 무시할 수 있습니다.

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

그러나 다음은 모두 구문 오류입니다.

function wrong1(...one, ...wrong) {}
function wrong2(...wrong, arg2, arg3) {}
function wrong3(...wrong,) {}
function wrong4(...wrong = []) {}

나머지 매개변수는 함수의 length 속성에 포함되지 않습니다.

나머지 매개변수와 arguments 객체의 차이

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

arguments 객체는 진짜 배열이 아니지만, 나머지 매개변수는 Array 인스턴스입니다. 즉 sort(), map(), forEach(), pop() 같은 메서드를 직접 적용할 수 있습니다.
arguments 객체에는 추가적인 (사용 권장되지 않는) callee 속성이 있습니다.
단순 매개변수를 가진 비-엄격 함수에서 arguments 객체는 그 인덱스를 매개변수의 값과 동기화합니다. 반면 나머지 매개변수 배열은 명명된 매개변수가 다시 할당되어도 자신의 값을 절대 갱신하지 않습니다.
나머지 매개변수는 모든 추가 매개변수를 단일 배열로 묶지만, ...restParam 앞에 정의된 어떤 명명된 인자도 포함하지 않습니다. arguments 객체는 ...restParam 배열 안의 매개변수를 포함한 모든 매개변수를 하나의 배열형 객체로 묶습니다.

예제 (Examples)

나머지 매개변수 사용 (Using rest parameters)

이 예제에서 첫 번째 인자는 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"] <-- an array

아래는 값이 하나뿐인데도 마지막 인자가 여전히 배열에 담깁니다.

// Using the same function definition from example above

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

// a, "one"
// b, "two"
// manyMoreArgs, ["three"] <-- an array with just one value

아래는 세 번째 인자가 제공되지 않지만 manyMoreArgs는 여전히 배열입니다(비록 빈 배열이지만).

// Using the same function definition from example above

myFun("one", "two");

// a, "one"
// b, "two"
// manyMoreArgs, [] <-- still an array

아래는 인자가 하나만 제공되므로 b는 기본값 undefined를 얻지만, manyMoreArgs는 여전히 빈 배열입니다.

// Using the same function definition from example above

myFun("one");

// a, "one"
// b, undefined
// manyMoreArgs, [] <-- still an array

인자 길이 (Argument length)

theArgs는 배열이므로 요소 수는 length 속성으로 주어집니다. 함수의 유일한 매개변수가 나머지 매개변수라면, restParams.length는 arguments.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) => multiplier * element);
}

const arr = multiply(2, 15, 25, 42);
console.log(arr); // [30, 50, 84]

arguments에서 배열로 (From arguments to an array)

배열 메서드는 나머지 매개변수에는 사용할 수 있지만 arguments 객체에는 사용할 수 없습니다.

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

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

function sortArguments() {
  const sortedArgs = arguments.sort();
  return sortedArgs; // this will never happen
}

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

나머지 매개변수는 인자 집합을 배열로 변환하는 데 흔히 사용되던 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.

나머지 매개변수 이전에는 배열 메서드를 호출하기 전에 인자를 일반 배열로 변환해야 했습니다.

function fn(a, b) {
  const normalArray = Array.prototype.slice.call(arguments);
  // — or —
  const normalArray2 = [].slice.call(arguments);
  // — or —
  const normalArrayFrom = Array.from(arguments);

  const first = normalArray.shift(); // OK, gives the first argument
  const firstBad = arguments.shift(); // ERROR (arguments is not a normal array)
}

이제 나머지 매개변수를 사용해 일반 배열에 쉽게 접근할 수 있습니다.

function fn(...args) {
  const normalArray = args;
  const first = normalArray.shift(); // OK, gives the first argument
}

명세 (Specifications)

ECMAScript® 2027 언어 명세 — sec-function-definitions