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 845117 of Comma operator

  • Revision slug: Web/JavaScript/Reference/Operators/Comma_Operator
  • Revision title: Comma operator
  • Revision id: 845117
  • Created:
  • Creator: Sebastianz
  • Is current revision? No
  • Comment Replaced static text for specification by macros

Revision Content

{{jsSidebar("Operators")}}

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

Syntax

expr1, expr2, expr3...

Parameters

expr1, expr2, expr3...
Any expressions.

Description

You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a for loop.

Example

If a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to increment two variables at once. Note that the comma in the var statement is not the comma operator, because it doesn't exist within an expression. Rather, it is a special character in var statements to combine multiple of them into one. Practically, that comma behaves almost the same as the comma operator, though. The code prints the values of the diagonal elements in the array:

for (var i = 0, j = 9; i <= 9; i++, j--)
  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);

Processing and then returning

Another example that one could make with comma operator is processing before returning. As stated, only the last element will be returned but all others are going to be evaluated as well. So, one could do:

function myFunc () {
  var x = 0;

  return (x += 1, x); // the same as return ++x;
}

Specifications

Specification Status Comment
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} {{Spec2('ES6')}}  
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} {{Spec2('ES5.1')}}  
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}} {{Spec2('ES1')}} Initial definition

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Yes Yes 3.0 Yes Yes
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Yes Yes Yes Yes Yes Yes

See also

Revision Source

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

<p>The<strong> comma operator</strong> evaluates each of its operands (from left to right)&nbsp;and returns the value of the last operand.</p>

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

<pre class="syntaxbox">
<em>expr1</em>, <em>expr2, expr3...</em></pre>

<h2 id="Parameters">Parameters</h2>

<dl>
 <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
 <dd>Any expressions.</dd>
</dl>

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

<p>You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a <code>for</code> loop.</p>

<h2 id="Example">Example</h2>

<p>If <code>a</code> is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to increment two variables at once. Note that the comma in the <code>var</code> statement is <em><strong>not</strong></em> the comma operator, because it doesn't exist within an expression. Rather, it is a special character in <code>var</code> statements to combine multiple of them into one. Practically, that comma behaves almost the same as the comma operator, though. The code prints the values of the diagonal elements in the array:</p>

<pre class="brush:js;highlight:[1]">
for (var i = 0, j = 9; i &lt;= 9; i++, j--)
  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);</pre>

<h3 id="Processing_and_then_returning">Processing and then returning</h3>

<p>Another example that one could make with comma operator is processing before returning. As stated, only the last element will be returned but all others are going to be evaluated as well. So, one could do:</p>

<pre class="brush: js">
function myFunc () {
  var x = 0;

  return (x += 1, x); // the same as return ++x;
}</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('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition</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>Yes</td>
   <td>Yes</td>
   <td>3.0</td>
   <td>Yes</td>
   <td>Yes</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>Yes</td>
   <td>Yes</td>
   <td>Yes</td>
   <td>Yes</td>
   <td>Yes</td>
   <td>Yes</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li>
</ul>
Revert to this revision