Revision 783875 of Conditional (ternary) Operator

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

<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 firstCheck = false,
    secondCheck = false,
    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
  
console.log( access ); // logs "Access granted"</pre>

<p>You can also use ternary evaluations in free space in order to do different operations:</p>

<pre class="brush: js">
var stop = false, age = 16;

age &gt; 18 ? location.assign("continue.html") : stop = 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 stop = false, age = 23;

age &gt; 18 ? (
    alert("OK, you can go."),
    location.assign("continue.html")
) : (
    stop = 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 age = 16;

var url = age &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 age &gt; 18
) : (
    alert("You are much too young!"),
    alert("Sorry :-("),
    // etc. etc.
    "stop.html" // the value to be assigned if !(age &gt; 18)
);

location.assign(url); // "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">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
</ul>