--- 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 > 5) { } else if (x > 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>