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

---
title: Залишкові параметри
slug: Web/JavaScript/Reference/Functions/решта_параметрів
tags:
  - JavaScript
  - Rest
  - параметри
  - функції
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
---
<div>{{jsSidebar("Functions")}}</div>

<div>Синтаксис <strong>залишкових параметрів</strong> дозволяє представити невизначену кількість аргументів у вигляді масиву.</div>

<div></div>

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

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox notranslate">function f(a, b, ...theArgs) {
  // ...
}
</pre>

<h2 id="Опис">Опис</h2>

<p>Перед останнім параметром функції може стояти <code>...</code>, в результаті решта аргументів (наданих користувачем) будуть розміщені у  "стандартному" масиві JavaScript.</p>

<p>Лише останній параметр може бути "залишковим".</p>

<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("один", "два", "три", "чорити", "п'ять", "шість");

// Виведе:
// a, один
// b, два
// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]</pre>

<h3 id="Різниця_між_залишковими_параметрами_та_обєктом_arguments">Різниця між залишковими параметрами та об'єктом <code>arguments</code></h3>

<p>Існують три основні відмінності між залишковими параметрами та об'єктом {{jsxref("Functions/arguments", "arguments")}}:</p>

<ul>
 <li>залишковими є лише ті параметри, яким не надали окремого імені, в той час, як об'єкт <code>arguments</code> містить усі аргументи, передані у функцію;</li>
 <li>об'єкт <code>arguments</code> не є справжнім масивом, в той час, як залишкові параметри є екземплярами {{jsxref("Global_Objects/Array", "Array")}}, тобто, методи на кшталт {{jsxref("Array.sort", "sort")}}, {{jsxref("Array.map", "map")}}, {{jsxref("Array.forEach", "forEach")}} чи {{jsxref("Array/pop", "pop")}} можуть викликатись безпосередньо на них;</li>
 <li>об'єкт <code>arguments</code> має також власну, специфічну функціональність (наприклад, властивість <code>callee</code>).</li>
</ul>

<h3 id="Від_arguments_до_масиву">Від arguments до масиву</h3>

<p>Залишкові параметри були запроваджені, щоб зменшити кількість шаблонного коду, спричиненого об'єктом arguments.</p>

<pre class="brush: js notranslate">// До появи залишкових параметрів, "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(); // OK, вертає перший аргумент
  let first = arguments.shift(); // ERROR (arguments не є справжнім масивом)
}

// Тепер ми легко можемо отримати звичайний масив за допомогою залишкових параметрів

function f(...args) {
  let normalArray = args;
  let first = normalArray.shift(); // OK, вертає перший аргумент
}</pre>

<h2 id="Приклади">Приклади</h2>

<h3 id="Використання_залишкових_параметрів">Використання залишкових параметрів</h3>

<p>У цьому прикладі перший аргумент відповідає <code>"a"</code>, а другий <code>"b"</code>, отже, ці іменовані аргументи можуть використовуватись як звичайні.</p>

<p>Однак, третій аргумент, <code>"manyMoreArgs"</code>, буде масивом, який містить 3-й, 4-й, 5-й, 6-й ... n-й -- стільки аргументів, скільки надасть користувач.</p>

<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("один", "два", "три", "чотири", "п'ять", "шість");

// a, один
// b, два
// manyMoreArgs, ["три", "чотири", "п'ять", "шість"]</pre>

<p>Нижче... хоча тут всього одне значення, останній аргумент все одно додається у масив.</p>

<pre class="brush: js notranslate">// використовуємо ту саму функцію з наведеного вище прикладу

myFun("один", "два", "три");

// a, один
// b, два
// manyMoreArgs, ["три"]</pre>

<p>Нижче... третій аргумент не був переданий, але "manyMoreArgs" все одно є масивом (хоча й порожнім).</p>

<pre class="brush: js notranslate">// використовуємо ту саму функцію з наведеного вище прикладу

myFun("один", "два");

// a, один
// b, два
// manyMoreArgs, []</pre>

<h3 id="Кількість_аргументів">Кількість аргументів</h3>

<p>Оскільки <code>theArgs</code> є масивом, кількість його елементів надається властивістю <code>length</code>:</p>

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

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

<h3 id="Звичайний_параметр_та_залишкові_параметри">Звичайний параметр та залишкові параметри</h3>

<p>У наступному прикладі залишковий параметр використовується, щоб зібрати усі аргументи після першого у масиві. Далі кожен з них помножується на перший параметр, і масив повертається:</p>

<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}

let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]</pre>

<h3 id="Використання_з_обєктом_arguments">Використання з об'єктом arguments</h3>

<p>Методи <code>Array</code> можуть використовуватись на залишкових параметрах, але не на об'єкті <code>arguments</code>:</p>

<pre class="brush: js notranslate">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; // цього ніколи не станеться
}

// викидає TypeError: arguments.sort is not a function
console.log(sortArguments(5, 3, 7, 1));
</pre>

<p>Щоб скористатись методами <code>Array</code> на об'єкті <code>arguments</code>, він спочатку має бути перетворений на справжній масив.</p>

<pre class="brush: js notranslate">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>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>

<div>
<div>


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

<h2 id="Див._також">Див. також</h2>

<ul>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Оператор розкладу</a> (також ‘<code>...</code>’)</li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Об'єкт arguments</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Функції</a></li>
 <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
 <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">Деструктуризаційне присвоєння</a></li>
</ul>