Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1117751 of Arguments object

  • Revision slug: Web/JavaScript/Reference/Functions/arguments
  • Revision title: Arguments object
  • Revision id: 1117751
  • Created:
  • Creator: ariyankhan
  • Is current revision? No
  • Comment

Revision Content

{{jsSidebar("Functions")}}

The arguments object is an Array-like object corresponding to the arguments passed to a function.

Syntax

arguments

Description

The arguments object is a local variable available within all functions. You can refer to a function's arguments within the function by using the arguments object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0. For example, if a function is passed three arguments, you can refer to them as follows:

arguments[0]
arguments[1]
arguments[2]

The arguments can also be set:

arguments[1] = 'new value';

The arguments object is not an {{jsxref("Array")}}. It is similar to an Array, but does not have any Array properties except length. For example, it does not have the pop method. However it can be converted to a real Array:

var args = Array.prototype.slice.call(arguments);

You can also use the {{jsxref("Array.from()")}} method or the spread operator to convert arguments to a real Array:

var args = Array.from(arguments);
var args = [...arguments];

Using slice on arguments prevents optimizations in some JavaScript engines (V8 for example - more information). If you care for them, try constructing a new array by iterating through the arguments object instead. An alternative would be to use the despised Array constructor as a function:

var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

You can use the arguments object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. Use arguments.length to determine the number of arguments passed to the function, and then process each argument by using the arguments object. To determine the number of parameters in the function signature, use the Function.length property.

Properties

arguments.callee
Reference to the currently executing function.
arguments.caller {{ Obsolete_inline() }}
Reference to the function that invoked the currently executing function.
arguments.length
Reference to the number of arguments passed to the function.
arguments[@@iterator]
Returns a new Array Iterator object that contains the values for each index in the arguments.

Examples

Defining a function that concatenates several strings

This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}

You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.

// returns "red, orange, blue"
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

Defining a function that creates HTML lists

This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "u" if the list is to be unordered (bulleted), or "o" if the list is to be ordered (numbered). The function is defined as follows:

function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;
}

You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:

var listHTML = list("u", "One", "Two", "Three");

/* listHTML is:

"<ul><li>One</li><li>Two</li><li>Three</li></ul>"

*/

Rest, default and destructured parameters

The arguments object can be used in conjunction with rest parameters, default parameters or destructured parameters.

function foo(...args) {
  return arguments;
}
foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }

However, in non-strict functions, a mapped arguments object is only provided if the function does not contain any rest parameters, any default parameters or any destructured parameters. For example, in the following function that uses a default parameter, 10 instead of 100 is returned:

function bar(a=1) { 
  arguments[0] = 100;
  return a;
}
bar(10); // 10

In this example, where there are no rest parameters, any default parameters or any destructured parameters, 100 is returned:

function zoo(a) { 
  arguments[0] = 100;
  return a;
}
zoo(10); // 100

Actually if there are no  rest parameters, any default parameters or any destructured parameters,  the formal arguments will refer the arguments object's latest values, when the formal arguments value needs to be read then arguments latest data will be read, and when formal arguments value changes, arguments will also be updated. See the code below: 

function func(a, b) {
    arguments[0] = 90;
    arguments[1] = 99;
    console.log(a + " " + b);
}

func(1, 2); //90, 99

or,

function func(a, b) {
    a = 9;
    b = 99;
    console.log(arguments[0] + " " + arguments[1]);
}

func(3, 4); //9, 99

But if rest parameters, or any default parameters or any destructured parameters are present, then normal behaviour like default parameters will be proccessed. See,

function func(a, b, c=9) {
    arguments[0] = 99;
    arguments[1] = 98;
    console.log(a + " " + b);
}

func(3, 4); //3, 4

Specifications

Specification Status Comment
{{SpecName('ES1')}} {{Spec2('ES1')}} Initial definition. Implemented in JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} {{Spec2('ES5.1')}}  
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} {{Spec2('ES6')}}  
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} {{Spec2('ESDraft')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • {{jsxref("Function")}}

Revision Source

<div>
<div>{{jsSidebar("Functions")}}</div>
</div>

<p>The <strong><code>arguments</code></strong> object is an <code>Array</code>-like object corresponding to the arguments passed to a function.</p>

<h2 id="Syntax">Syntax</h2>

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

<h2 id="Description">Description</h2>

<p>The <code>arguments</code> object is a local variable available within all functions. You can refer to a function's arguments within the function by using the <code>arguments</code> object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0. For example, if a function is passed three arguments, you can refer to them as follows:</p>

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

<p>The arguments can also be set:</p>

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

<p>The <code>arguments</code> object is not an {{jsxref("Array")}}. It is similar to an <code>Array</code>, but does not have any <code>Array</code> properties except <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">length</a></code>. For example, it does not have the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a></code> method. However it can be converted to a real <code>Array</code>:</p>

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

<p>You can also use the {{jsxref("Array.from()")}} method or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> to convert arguments to a real Array:</p>

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

<div class="warning">
<p>Using slice on arguments prevents optimizations in some JavaScript engines (V8 for example - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">more information</a>). If you care for them, try constructing a new array by iterating through the arguments object instead. An alternative would be to use the despised <code>Array</code> constructor as a function:</p>

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

<p>You can use the <code>arguments</code> object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. Use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> to determine the number of arguments passed to the function, and then process each argument by using the <code>arguments</code> object. To determine the number of parameters in the function <a href="/en-US/docs/Glossary/Signature/Function">signature</a>, use the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> property.</p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
 <dd>Reference to the currently executing function.</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
 <dd>Reference to the function that invoked the currently executing function.</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
 <dd>Reference to the number of arguments passed to the function.</dd>
 <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
 <dd>Returns a new Array Iterator object that contains the values for each index in the arguments.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Defining_a_function_that_concatenates_several_strings">Defining a function that concatenates several strings</h3>

<p>This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>

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

<p>You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.</p>

<pre class="brush:js">
// returns "red, orange, blue"
myConcat(", ", "red", "orange", "blue");

// returns "elephant; giraffe; lion; cheetah"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// returns "sage. basil. oregano. pepper. parsley"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre>

<h3 id="Defining_a_function_that_creates_HTML_lists">Defining a function that creates HTML lists</h3>

<p>This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "<code>u</code>" if the list is to be unordered (bulleted), or "<code>o</code>" if the list is to be ordered (numbered). The function is defined as follows:</p>

<pre class="brush:js">
function list(type) {
  var result = "&lt;" + type + "l&gt;&lt;li&gt;";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("&lt;/li&gt;&lt;li&gt;");
  result += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list

  return result;
}</pre>

<p>You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:</p>

<pre class="brush:js">
var listHTML = list("u", "One", "Two", "Three");

/* listHTML is:

"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"

*/</pre>

<h3 id="Rest_default_and_destructured_parameters">Rest, default and destructured parameters</h3>

<p>The <code>arguments</code> object can be used in conjunction with <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>.</p>

<pre class="brush: js">
function foo(...args) {
  return arguments;
}
foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }
</pre>

<p>However, in non-strict functions, a <strong>mapped <code>arguments</code> object</strong> is only provided if the function does <strong>not</strong> contain any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or any <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>. For example, in the following function that uses a default parameter, <code>1</code>0 instead of 100 is returned:</p>

<pre class="brush: js">
function bar(a=1) { 
  arguments[0] = 100;
  return a;
}
bar(10); // 10
</pre>

<p>In this example, where there are no <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or any <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>, 100 is returned:</p>

<pre class="brush: js">
function zoo(a) { 
  arguments[0] = 100;
  return a;
}
zoo(10); // 100

</pre>

<p>Actually if there are no&nbsp; <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or any <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>, &nbsp;the formal arguments will refer the <strong><code>arguments</code></strong> object's latest values, when the formal arguments&nbsp;value needs to be read then&nbsp;<strong><code>arguments </code></strong>latest&nbsp;data&nbsp;will be read, and when formal arguments value changes, <strong><code>arguments&nbsp;</code></strong>will also be updated. See the code below:&nbsp;</p>

<pre class="brush: js">
function func(a, b) {
    arguments[0] = 90;
    arguments[1] = 99;
    console.log(a + " " + b);
}

func(1, 2); //90, 99</pre>

<p>or,</p>

<pre class="brush: js">
function func(a, b) {
    a = 9;
    b = 99;
    console.log(arguments[0] + " " + arguments[1]);
}

func(3, 4); //9, 99</pre>

<p>But if&nbsp;<a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>, or any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> or any <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured parameters</a>&nbsp;are present, then normal behaviour like&nbsp;<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a>&nbsp;will be proccessed. See,</p>

<pre class="brush: js">
function func(a, b, c=9) {
    arguments[0] = 99;
    arguments[1] = 98;
    console.log(a + " " + b);
}

func(3, 4); //3, 4</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.1</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</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="See_also">See also</h2>

<ul>
 <li>{{jsxref("Function")}}</li>
</ul>
Revert to this revision