---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
tags:
  - JavaScript
  - Statement
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>

<p class="seoSummary">Die <strong>if-Anweisung</strong> führt Anweisungen aus, wenn eine bestimmte Bedingung zu <code>true</code> ausgewertet wird. Wird die Bedingung zu <code>false</code> ausgewertet, können andere Anweisungen ausgeführt werden.</p>

<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>



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

<pre class="syntaxbox">if (bedingung)<em> anweisung1</em> [else <em>anweisung2</em>]
</pre>

<dl>
 <dt><code>bedingung</code></dt>
 <dd>Ein <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Ausdruck</a>, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd>
</dl>

<dl>
 <dt><code>anweisung1</code></dt>
 <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird. Diese Anweisung kann jede gültige Anweisung sein, auch eine if-Anweisung. Um mehrere Anweisungen auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) genutzt werden, um die Anweisungen zu gruppieren. Wenn keine Anweisung ausgeführt werden soll, muss die {{jsxref("Statements/empty", "empty")}}-Anweisung genutzt werden.</dd>
</dl>

<dl>
 <dt><code>anweisung2</code></dt>
 <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu false ausgewertet wird und die <code>else</code> Klausel existiert. Auch hier können alle Anweisungen, egal ob {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) oder weitere if-Anweisungen genutzt werden.</dd>
</dl>

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

<p>Mehrere <code>if...else</code>-Anweisungen können verschachtelt werden, wenn eine <code>else if</code>-Klausel erstellt wird. Zu beachten ist, dass es in JavaScript kein Schlüsselwort <code>elseif</code> (in einem Wort) gibt.</p>

<pre class="eval">if (<em>bedingung1</em>)
   <em>anweisung1</em>
else if (<em>bedingung2</em>)
   <em>anweisung2</em>
else if (<em>bedingung3</em>)
   <em>anweisung3</em>
...
else
   <em>anweisungN</em>
</pre>

<p>Um zu sehen wie das funktioniert, ist es hilfreich, die verschachtelten Anweisungen einzurücken:</p>

<pre class="eval">if (<em>bedingung1</em>)
   <em>anweisung1</em>
else
   if (<em>bedingung2</em>)
      <em>anweisung2</em>
   else
      if (<em>bedingung3</em>)
...
</pre>

<p>Um mehrere Anweisungen in einer Klausel auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung genutzt werden. Allgemein ist es immer gute Praxis (best practice) eine {{jsxref("Statements/block", "block")}}-Anweisung zu nutzen, besonders bei verschachtelten <code>if</code>-Anweisungen.</p>

<pre class="eval">if (<em>bedingung</em>) {
  <em>anweisung1</em>
} else {
  <em>anweisung2</em>
}
</pre>

<p>Man sollte den primitiven boolean-Datentyp nicht mit dem {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt verwechseln. Jeder Wert, der nicht <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, oder der leere string (<code>""</code>) ist, wird zu <code>true</code> ausgewertet. Dabei ist auch ein {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt mit dem Wert false inbegriffen.</p>

<pre class="brush: js">var b = new Boolean(false);
if (b) // wird zu true ausgewertet
</pre>

<h2 id="Examples" name="Examples">Beispiele</h2>

<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Einsatz von <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 id="Einsatz_von_else_if">Einsatz von <code>else if</code></h3>

<p>Zu beachten ist, dass in JavaScript kein <code>elseif</code>-Schlüsselwort existiert. Man kann jedoch immer ein Leerzeichen zwischen <code>else</code> und <code>if</code> benutzen.</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">Zuweisungen in der Bedingung</h3>

<p>Es ist nicht <span class="dpf_sent" id="dpfsent_1">ratsam </span>einfache Zuweisungen in die Bedingung zu schreiben, weil sie zu <span class="dpf_sent" id="dpfsent_1">Verwechselungen </span>mit dem Gleichheit-Operator führen kann. Zum Beispiel führt folgender Quelltext, der eine Zuweisung enthält immer zu 'true' und sollte daher so nicht benutzt werden:</p>

<pre class="brush: js example-bad">if (x = y) {
   /* tu das richtige */
}
</pre>

<p>Wenn es nötig ist, eine Zuweisung in einer Bedingungs-Anweisunge zu benutzen, dann sollten Klammern um die Zuweisung gesetzt werden. Der Effekt ist jedoch derselbe, wie im vorangegangenen Code. Zum Beispiel:</p>

<pre class="brush: js example-good">if ((x = y)) {
   /* tu das richtige */
}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initiale Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>



<p>{{Compat("javascript.statements.if_else")}}</p>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li>{{jsxref("Statements/switch", "switch")}}</li>
 <li>{{jsxref("Operators/conditional_operator", "Bedingter (ternärer) Operator")}}</li>
</ul>