Revision 639709 of Conditional (ternary) Operator

<div>
 {{JSOperatorsQLAlpha()}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong>conditional (ternary) operator</strong> is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> statement.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
<em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre>
<h2 id="Parameters">Parameters</h2>
<dl>
 <dt>
  <code>condition</code></dt>
 <dd>
  An expression that evaluates to <code>true</code> or <code>false</code>.</dd>
</dl>
<dl>
 <dt>
  <code>expr1</code>, <code>expr2</code></dt>
 <dd>
  Expressions with values of any type.</dd>
</dl>
<h2 id="Description">Description</h2>
<p>If <code>condition</code> is <code>true</code>, the operator returns the value of <code>expr1</code>; otherwise, it returns the value of <code>expr2</code>. For example, to display a different message based on the value of the <code>isMember</code> variable, you could use this statement:</p>
<pre class="brush: js">
"The fee is " + (isMember ? "$2.00" : "$10.00")
</pre>
<p>You can also assign variables depending on a ternary result:</p>
<pre class="brush: js">
var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
<p>Multiple ternary evaluations are also possible (note: the conditional operator is right associative):</p>
<pre class="brush: js">
var hadRelations = false,
  isSure = false,
  presidentQuote = hadRelations ? "Had relations" : isSure ? "Did not have relations" : "I admit";
  
console.log( presidentQuote ); // Prints "I admit" in the console</pre>
<p>You can also use ternary evaluations in free space in order to do different operations:</p>
<pre class="brush: js">
var bStop = false, nAge = 16;

nAge &gt; 18 ? location.assign("continue.html") : bStop = true;
</pre>
<p>You can also do more than one single operation per case, separating them with a comma:</p>
<pre class="brush: js">
var bStop = false, nAge = 23;

nAge &gt; 18 ? (
    alert("Ok, you can go."),
    location.assign("continue.html")
) : (
    bStop = true,
    alert("Sorry, you are much too young!")
);
</pre>
<p>You can also do more than one operation during the assignation of a value. In this case, <strong><em>the last comma-separated value of the parenthesis</em> will be the value to be assigned</strong>.</p>
<pre class="brush: js">
var nAge = 16;

var sURL = nAge &gt; 18 ? (
    alert("Ok, you can go."), 
    // alert returns "undefined", but it will be ignored because
    // isn't the last comma-separated value of the parenthesis
    "continue.html" // the value to be assigned if nAge &gt; 18
) : (
    alert("You are much too young!"),
    alert("Sorry :-("),
    // etc. etc.
    "stop.html" // the value to be assigned if !(nAge &gt; 18)
);

location.assign(sURL); // "stop.html"</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>ECMAScript 1st Edition.</td>
   <td>Standard</td>
   <td>Initial definition. Implemented in JavaScript 1.0</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
   <td>{{Spec2('ES6')}}</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" name="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
</ul>