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

---
title: Об'єкт arguments
slug: Web/JavaScript/Reference/Functions/arguments
tags:
  - JavaScript
  - аргументи
  - методи
  - функції
translation_of: Web/JavaScript/Reference/Functions/arguments
---
<div>
<div>{{jsSidebar("Functions")}}</div>
</div>

<p>Подібний до масиву об'єкт <strong><code>arguments</code></strong> описує аргументи, які було передано у функцію.</p>

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

<pre class="syntaxbox">arguments
</pre>

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

<p>Об'єкт <code>arguments</code> — це локальна змінна, яка доступна всередині кожної функції. Цей об'єкт містить інформацію про кількість та значення всіх параметрів, що їх було передано до функції під час її виклику. Для читання чи змінювання значень аргументів можна скористатися синтаксисом доступу до елементів масиву, де індекс першого переданого аргументу починається з <code>0</code>.</p>

<p>Для прикладу, якщо в функцію передано три аргументи, звернутися до них можна так:</p>

<pre class="brush: js">arguments[0]
arguments[1]
arguments[2]
</pre>

<p>Значення можна не лише читати, а й змінювати таким чином:</p>

<pre class="brush: js">arguments[1] = 'new value';
</pre>

<p>Об'єкт <code>arguments</code> не є {{jsxref("Array", "масивом")}}. Він подібний до масиву, але не має жодних властивостей масиву, крім <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/length">length</a> (довжини). Наприклад, він не має методу <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a>. Проте його можна перетворити на справжній масив:</p>

<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
</pre>

<p>Також можна скористатися методом {{jsxref("Array.from()")}} або <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператор_розпакування">оператором розпакування</a>, щоб перетворити arguments на справжній масив:</p>

<pre class="brush: js">var args = Array.from(arguments);

// ES2015
var args = [...arguments];
</pre>

<div class="warning">
<p>Застосування методу <code>slice</code> до <code>arguments</code> заважає оптимізації в деяких рушіях JavaScript (<a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">наприклад, V8</a>). Отже, якщо вас це обходить, створюйте новий масив шляхом перебору елементів псевдомасиву arguments. Можна також скористатися конструктором <code>Array</code> як функцією:</p>

<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
</pre>
</div>

<p>Об'єкт <code>arguments</code> корисний в тих випадках, коли кількість аргументів функції заздалегідь невідома. Існує чимало прикладів того, коли функцію можна викликати із різною множиною аргументів, реалізуючи таким чином поведінку на кшталт «перевантаження», яке в чистому вигляді відсутнє в JavaScript. Очевидно, що така «перевантажена» функція не завше може задовольнитися переліком формальних аргументів однієї <a href="/uk/docs/Glossary/Signature/Function">сигнатури</a>. Саме тут arguments може стати в нагоді.</p>

<p>Завважте, що властивість <a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a> — це кількість фактичних (а не формальних) аргументів, які дійсно було передано до функції. Натомість для визначення кількості формальних параметрів, оголошених сигнатурою функції, скористайтесь властивістю <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/length">Function.length</a>.</p>

<p>Як свідчить <code>typeof</code>, <code>arguments</code> є об'єктом:</p>

<pre class="brush: js">console.log(typeof arguments);  // 'object'</pre>

<p>Тип кожного окремого аргументу можна визначити за допомогою typeof та індексації псевдомасиву <code>arguments</code>:</p>

<pre class="brush: js">console.log(typeof arguments[0]);  // значення typeof конкретного аргументу</pre>

<h2 id="Властивості">Властивості</h2>

<dl>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
 <dd>Посилання на функцію, що саме виконується.</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
 <dd>Посилання на функцію, з якої здійснили виклик поточної (яка саме виконується).</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
 <dd>Кількість аргументів, що було фактично передано до функції.</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
 <dd>Вертає новий ітератор масиву, що містить значення за кожним індексом в <code>arguments</code>.</dd>
</dl>

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

<h3 id="Функція_що_з'єднує_кілька_рядків">Функція, що з'єднує кілька рядків</h3>

<p>В цьому прикладі наведно функцію, яка з'єднує кілька рядків в один. Єдиний формальний аргумент функції — це рядок, що виступатиме розділовою послідовністю символів між складовими, що підлягають з'єднуванню. Це можна втілити наступним чином:</p>

<pre class="brush:js">function myJoin(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}</pre>

<p>Отже, можна передавати довільну кількість аргументів, послідовність яких (окрім першого, що виступає розділовою послідовністю символів) перетворюється на масив, а тоді з'єднується за допомогою {{jsxref("Array.join()")}}.</p>

<p>Отож маємо:</p>

<pre class="brush:js">// вертає "камінь, ножиці, папір"
myJoin(", ", "камінь", "ножиці", "папір");

// вертає "я; дух; одвічна стихія; потопа"
myJoin("; ", "я", "дух", "одвічна стихія", "потопа");

// вертає "Чому Пінгвіни Живуть Зимою Без Своїх Фантазій"
myJoin(" ", "Чому", "Пінгвіни", "Живуть", "Зимою", "Без", "Своїх", "Фантазій");</pre>

<h3 id="Функція_що_створює_HTML-списки">Функція, що створює HTML-списки</h3>

<p>В наступному прикладі наведено функцію, що створює HTML-розмітку списку. Єдиний формальний аргумент функції — текстовий рядок, що визначає різновид списку ("o" для впорядкованого списку, чи то пак — нумерованого, — або "u" для невпорядкованого). Решта аргументів, визначатиме власне елементи списку. Одна з можливих реалізацій виглядає наступним чином:</p>

<pre class="brush:js">function list(type) {
  var markup = "&lt;" + type + "l&gt;";

  for (var i = 1; i &lt; arguments.length; i++) {
    markup += "&lt;li&gt;" + arguments[i] + "&lt;/li&gt;";
  }
  markup += "&lt;/" + type + "l&gt;";

  return markup
}</pre>

<p>До функції можна передати будь-яку кількість аргументів, створивши список з довільною кількістю елементів. Наприклад, так:</p>

<pre class="brush:js">var markup = list("u", "Крижина", "Стежина", "Чужина");

console.log(markup);  // виводить "&lt;ul&gt;&lt;li&gt;Крижина&lt;/li&gt;&lt;li&gt;Стежина&lt;/li&gt;&lt;li&gt;Чужина&lt;/li&gt;&lt;ul&gt;"
</pre>

<h3 id="Решта_типові_та_деструктуризовані_параметри">Решта, типові та деструктуризовані параметри</h3>

<p>Об'єкт <code>arguments</code> можна використовувати в поєднанні з <a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">рештою</a>, <a href="/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters">типовими</a> та <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">деструктуризованими</a> параметрами.</p>

<pre class="brush: js">function foo(...args) {
  return arguments;
}

foo(1, 2, 3);  // вертає {"0": 1, "1": 2, "2": 3}
</pre>

<p>І хоча присутність <em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em> параметрів не змінює поведінки об'єкта <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode#Спрощення_eval_та_arguments">arguments в суворому режимі</a>, в звичайному режимі все ж є невеличка різниця. За відсутності <em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em> параметрів функція, яка виконується в звичайному (не в суворому) режимі, передбачає збереження зв'язку між значеннями формальних параметрів та значеннями, що їх містить об'єкт <code>arguments</code>:</p>

<pre class="brush: js">function foo(a) {
  arguments[0] = 99;  // змінюючи arguments[0] ми також змінюємо a
  console.log(a);
}

foo(10);  // 99</pre>

<p>І навпаки:</p>

<pre class="brush: js">function foo(a) {
  a = 99;  // змінюючи a ми також змінюємо arguments[0]
  console.log(arguments[0]);
}

foo(10);  // 99</pre>

<p>Натомість, наявність таких (<em>решти</em>, <em>типових</em> чи <em>деструктуризованих</em>) параметрів той зв'язок порушує:</p>

<pre class="brush: js">function foo(a = 55) {
  arguments[0] = 99;  // змінюючи arguments[0] ми більше не впливаємо на a
  console.log(a);
}

foo(10); // 10</pre>

<p>І навпаки:</p>

<pre class="brush: js">function foo(a = 55) {
  a = 99;  // змінюючи a ми більше не впливаємо на arguments[0]
  console.log(arguments[0]);
}

foo(10); // 10</pre>

<p>Ба більше:</p>

<pre class="brush: js">function foo(a = 55) {
  console.log(arguments[0]);
}

foo();  // undefined</pre>

<p>Ясна річ, цей зв'язок поширюється лише на значення змінних, а не на вміст об'єктів:</p>

<pre class="brush: js">function foo(object = {}) {
  object.value = 222;
  console.debug(arguments[0].value);
}

foo({value: 111});  // Object {value: 222}</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Первинне визначення. Реалізовано у JavaScript 1.1</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>{{jsxref("Function")}}</li>
</ul>