Revision 650063 of if...else

<div>
 {{JsStatementsQLAlpha()}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong>if statement</strong> executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
if (<em>condition</em>)
   <em>statement1</em>
[else
   <em>statement2</em>]
</pre>
<dl>
 <dt>
  <code>condition</code></dt>
 <dd>
  An expression that evaluates to true or false.</dd>
</dl>
<dl>
 <dt>
  <code>statement1</code></dt>
 <dd>
  Statement that is executed if <code>condition</code> evaluates to true. Can be any statement, including further nested <code>if</code> statements. To execute multiple statements, use a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">block</a> statement ({ ... }) to group those statements, to execute no statements, use an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty</a> statement.</dd>
</dl>
<dl>
 <dt>
  <code>statement2</code></dt>
 <dd>
  Statement that is executed if <code>condition</code> evaluates to false and the <code>else</code> clause exists. Can be any statement, including block statements and further nested <code>if</code> statements.</dd>
</dl>
<h2 id="Description" name="Description">Description</h2>
<p>Multiple <code>if...else</code> statements can be nested to create an <code>else if</code> clause. Note that there is no <code>elseif</code> (in one word) keyword in JavaScript.</p>
<pre class="eval">
if (<em>condition1</em>)
   <em>statement1</em>
else if (<em>condition2</em>)
   <em>statement2</em>
else if (<em>condition3</em>)
   <em>statement3</em>
...
else
   <em>statementN</em>
</pre>
<p>To see how this works, this is how it would look like if the nesting were properly indented:</p>
<pre class="eval">
if (<em>condition1</em>)
   <em>statement1</em>
else
   if (<em>condition2</em>)
      <em>statement2</em>
   else
      if (<em>condition3</em>)
...
</pre>
<p>To execute multiple statements within a clause, use a block statement (<code>{ ... }</code>) to group those statements. In general, it is a good practice to always use block statements, especially in code involving nested <code>if</code> statements:</p>
<pre class="eval">
if (<em>condition</em>) {
   <em>statements1</em>
} else {
   <em>statements2</em>
}
</pre>
<p>Do not confuse the primitive boolean values <code>true</code> and <code>false</code> with the true and false values of the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> object. Any value that is not <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, or the empty string (<code>""</code>), and any object, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. For example:</p>
<pre class="brush: js">
var b = new Boolean(false);
if (b) // this condition evaluates to true
</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Example: Using <code>if...else</code></h3>
<pre class="brush: js">
if (cipher_char === from_char) {
   result = result + to_char;
   x++;
} else {
   result = result + clear_char;
}
</pre>
<h3>Example: Using <code>else...if</code></h3>
<p>Note that there is no <code>elseif</code> syntax in JavaScript. However, you can write it with a space between <code>else</code> and <code>if</code>:</p>
<pre class="brush: js">
if (x &gt; 5) {

} else if (x &gt; 50) {

} else {

}</pre>
<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Example: Assignment within the conditional expression</h3>
<p>It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:</p>
<pre class="brush: js">
if (x = y) {
   /* do the right thing */
}
</pre>
<p>If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:</p>
<pre class="brush: js">
if ((x = y)) {
   /* do the right thing */
}
</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.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</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>{{jsxref("Statements/block", "block")}}</li>
 <li>{{jsxref("Statements/switch", "switch")}}</li>
</ul>