path: root/files/ko/web/javascript/reference/functions/rest_parameters/index.html

---
title: Rest 파라미터
slug: Web/JavaScript/Reference/Functions/rest_parameters
tags:
  - Functions
  - JavaScript
  - Rest
  - Rest parameters
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
---
<div>{{jsSidebar("Functions")}}</div>

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

<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p>

<div class="hidden">
<p>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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>

<p> </p>

<h2 id="구문">구문</h2>

<pre class="brush: js">function f(a, b, ...theArgs) {
  // ...
}
</pre>

<h2 id="설명">설명</h2>

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

<pre class="brush: 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");

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

<p> </p>

<h3 id="Rest_파라미터_및_arguments_객체간_차이">Rest 파라미터 및 <code>arguments</code> 객체간 차이</h3>

<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p>

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

<h3 id="arguments에서_배열까지">arguments에서 배열까지</h3>

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

<pre class="brush: js">// 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, 첫 번째 인수를 반환
}</pre>

<h3 id="Rest_파라미터_해체">Rest 파라미터 해체</h3>

<p>Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a> 문서를 보세요.</p>

<pre class="brush: js">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번 째 파라미터는 해체되지 않음)</pre>

<h2 id="예제">예제</h2>

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

<pre class="brush: 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]</pre>

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

<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용

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

// a, one
// b, two
// manyMoreArgs, [three]</pre>

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

<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용

myFun("one", "two");

// a, one
// b, two
// manyMoreArgs, []</pre>

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

<pre class="brush: js">function fun1(...theArgs) {
  console.log(theArgs.length);
}

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

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

<pre class="brush: js">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]</pre>

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

<pre class="brush: js">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)</pre>

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

<pre class="brush: js">function sortArguments() {
  var args = Array.from(arguments);
  var sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>초기 정의.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p> </p>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("javascript.functions.rest_parameters")}}</p>

<h2 id="함께_보기">함께 보기</h2>

<ul>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Spread 문법</a> (또한 ‘<code>...</code>’)</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments 객체</a></li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수</a></li>
 <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
 <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a></li>
</ul>