Revision 1025956 of Comma operator

<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="Examples">Examples</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 assignments such as the <code>var</code> statement are <em><strong>not</strong></em> comma operators, because they don't exist within an expression. Rather, it is a special character in such statements to combine multiple of them into one. Practically, that comma behaves similarly to 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>

<p>However, the commas joining assignments returns the left-most assignment instead of the right-most operand as does the comma operator.</p>

<pre class="brush: js">
// Note that the following creates 'b' and 'c' (and 'y' and 'z') as globals and is disallowed in strict mode.

var a = b = 3, c = 4;
console.log(a); // 3 (left-most)

var x = (y = 5, z = 6);
console.log(x); // 6 (right-most)
</pre>

<p>And, naturally, the comma operator is different from the comma within arrays, objects, and function arguments and parameters.</p>

<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('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>&nbsp;</td>
  </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>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.0</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><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li>
</ul>