나머지 매개변수 - JavaScript | MDN

Toggle sidebar

Theme

OS default
Light
Dark

한국어

Remember language Learn more

나머지 매개변수

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016년 9월.

나머지 매개변수 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있습니다. JavaScript에서 가변항 함수를 표현할 때 사용합니다.

시도해 보기

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

구문

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

설명

함수의 마지막 매개변수 앞에 "..."(세 개의 U+002E FULL STOP 문자)를 붙이면 (사용자가 제공한) 모든 후속 매개변수를 표준 JavaScript 배열에 넣도록 지정합니다. 마지막 매개변수만 나머지 매개변수로 설정할 수 있습니다.

js
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 객체는 실제 배열이 아닙니다. 그러나 나머지 매개변수는 Array 인스턴스이므로 sort, map, forEach, pop 등의 메서드를 직접 적용할 수 있습니다.
arguments 객체는 callee 속성과 같은 추가 기능을 포함합니다.
...restParam은 후속 매개변수만 배열에 포함하므로 ...restParam 이전에 직접 정의한 매개변수는 포함하지 않습니다. 그러나 arguments 객체는, ...restParam의 각 항목까지 더해 모든 매개변수를 포함합니다.

인수에서 배열로

나머지 매개변수는 다수의 인수를 배열로 변환하는 과정의 보일러플레이트 코드를 줄이기 위해 도입됐습니다.

js
// 나머지 매개변수 이전에 "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번째 인수까지, 사용자가 제공한 만큼의 인수를 포함한 배열입니다.

js
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"] <-- 배열임에 주목

매개변수를 세 개만 제공하더라도 마지막 인수는 여전히 배열인 것을 확인할 수 있습니다.

js
// 위에 정의한 함수를 그대로 사용

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

// a, "one"
// b, "two"
// manyMoreArgs, ["three"] <-- 요소가 하나지만 여전히 배열임

그리고 아래에선 매개변수를 두 개만 제공했지만, manyMoreArgs는 여전히 (빈) 배열입니다.

js
// 위에 정의한 함수를 그대로 사용

myFun("one", "two");

// a, "one"
// b, "two"
// manyMoreArgs, [] <-- 여전히 배열

매개변수 길이

theArgs가 배열이므로, length 속성을 사용하면 길이를 알아낼 수 있습니다.

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

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

나머지 매개변수를 일반 매개변수와 함께 사용하기

이 예제에서는 첫 번째 이후의 모든 매개변수를 배열에 모은 후, 각각의 값을 첫 번째 매개변수로 곱한 결과를 반환합니다.

js
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 객체에서는 사용할 수 없습니다.

js
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를 실제 배열로 변환해야 합니다.

js
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® 2027 Language Specification
# sec-function-definitions

브라우저 호환성

Enable JavaScript to view this browser compatibility table.

함께 보기

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025년 6월 27일 by MDN contributors.

View this page on GitHub • Report a problem with this content

나머지 매개변수

In this article

Help improve MDN