initial commit

17 files changed, 7502 insertions, 0 deletions

diff --git a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html
new file mode 100644
index 0000000000..7a0e723c6c
--- /dev/null
+++ b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html
@@ -0,0 +1,965 @@
+---
+title: Ausdrücke und Operatoren
+slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+tags:
+  - Beginner
+  - Extensions
+  - Guide
+  - JavaScript
+  - Operatoren
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.</p>
+
+<p>Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den <a href="/de-DE/docs/Web/JavaScript/Reference/Operators">Referenzen</a> zu finden.</p>
+
+<h2 id="Operatoren">Operatoren</h2>
+
+<p>JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.</p>
+
+<ul>
+ <li>{{ web.link("#Assignment_operators", "Zuweisungs-Operatoren") }}</li>
+ <li>{{ web.link("#Comparison_operators", "Vergleichs-Operatoren") }}</li>
+ <li>{{ web.link("#Arithmetic_operators", "Arithmetische Operatoren") }}</li>
+ <li>{{ web.link("#Bitwise_operators", "Bit-Operatoren") }}</li>
+ <li>{{ web.link("#Logical_operators", "Logische Operatoren") }}</li>
+ <li>{{ web.link("#String_operators", "String Operatoren") }}</li>
+ <li>{{ web.link("#Conditional_(ternary)_operator", "Bedingter (ternärer) Operator")}}</li>
+ <li>{{ web.link("#Comma_operator", "Komma Operator")}}</li>
+ <li>{{ web.link("#Unary_operators", "Unäre Operatoren")}}</li>
+ <li>{{ web.link("#Relational_operators", "Vergleichsoperator")}}</li>
+</ul>
+
+<p>JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:</p>
+
+<pre class="syntaxbox"><em>operand1</em> <em>operator</em> <em>operand2</em>
+</pre>
+
+<p>Zum Beispiel: <code>3+4</code>, oder <code>x*y</code>.</p>
+
+<p>Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:</p>
+
+<pre class="syntaxbox"><em>operator</em> <em>operand</em>
+</pre>
+
+<p>oder</p>
+
+<pre class="syntaxbox"><em>operand</em> <em>operator</em>
+</pre>
+
+<p>Zum Beispiel: <code>x++</code>, oder <code>++x</code>.</p>
+
+<h3 id="Zuweisungsoperatoren">Zuweisungsoperatoren</h3>
+
+<p>Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (<code>=</code>), welches den Wert des rechten Operanden dem linken Operanden zuweist.</p>
+
+<p>Zum Beispiel: <code>x = y</code> (<code>y</code> wid der Wert von <code>x</code> zugewiesen).</p>
+
+<p>Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:</p>
+
+<table class="standard-table">
+ <caption>Zusammengesetzte Zuweisungsoperatoren</caption>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Abgekürzter Operator</th>
+   <th>Ausgeschriebener Operator</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment" title="Zuweisung">Zuweisung</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment">Addition</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment">Subraktion</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment">Multiplikation</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment">Division</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment">Modulo (Division mit Rest)</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment">Exponentiation assignment</a> {{experimental_inline}}</td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment">Left shift assignment</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment">Right shift assignment</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment">Unsigned right shift assignment</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment">Bitwise AND assignment</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment">Bitwise XOR assignment</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment">Bitwise OR assignment</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Destrukturierung">Destrukturierung</h4>
+
+<p>Komplexere Zuweisungen ermöglicht Javascript über die sogenannte <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destrukturierung</a>. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.</p>
+
+<pre class="brush: js">var foo = ["eins", "zwei", "drei"];
+
+// Ohne Destrukturierung
+var eins   = foo[0];
+var zwei   = foo[1];
+var drei   = foo[2];
+
+// mit Destrukturierung
+var [eins, zwei, drei] = foo;</pre>
+
+<h3 id="Vergleichsoperatoren">Vergleichsoperatoren</h3>
+
+<p>Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.</p>
+
+<p>Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren <code>===</code> und <code>!==</code>, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.</p>
+
+<p>Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:</p>
+
+<pre class="brush: js">var var1 = 3;
+var var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>Vergleichsoperatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Beispiele, die <code>true</code> zurückgeben</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equal</a> (<code>==</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden gleich sind.</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Not equal</a> (<code>!=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden ungleich sind.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict equal</a> (<code>===</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness">sameness in JS</a>.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict not equal</a> (<code>!==</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater than</a> (<code>&gt;</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand größer dem rechten Operanden ist.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater than or equal</a> (<code>&gt;=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less than</a> (<code>&lt;</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand kleiner dem rechten Operanden ist.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">Less than or equal</a> (<code>&lt;=</code>)</td>
+   <td>Gibt <code>true</code> zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note: </strong>(<strong>=&gt;</strong>) ist kein Operator, hiermit werden <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> notiert.</p>
+</div>
+
+<h3 id="Arithmetische_Operatoren_(Rechenzeichen)">Arithmetische Operatoren (Rechenzeichen)</h3>
+
+<p>Ein <a href="/de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">arithmetischer Operator</a> nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (<code>+)</code>, Subtraktion (<code>-</code>), Multiplikation (<code>*</code>) und Division (<code>/</code>). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).</p>
+
+<pre class="brush: js">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // this is true
+</pre>
+
+<p>Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:</p>
+
+<table class="fullwidth-table">
+ <caption>Arithmetische Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a> (<code>%</code>)</td>
+   <td>Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.</td>
+   <td><code>12 % 5</code> gibt <code>2</code> zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Increment</a> (<code>++</code>)</td>
+   <td>
+    <p>Unärer Operator. Addiert 1 zu seinem Operanden.</p>
+
+    <p>Wenn der Operator vorangestellt wird (<code>++x</code>), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (<code>x++</code>), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.</p>
+   </td>
+   <td>Wenn <code>x</code> gleich 3 ist, setzt <code>++x</code> <code>x</code> auf 4 und gibt 4 zurück, wobei <code>x++</code>  3 zurückgibt und erst danach <code>x</code> auf 4 setzt.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Decrement</a> (<code>--</code>)</td>
+   <td>
+    <p>Unärer Operator. Subtrahiert 1 von seinem Operanden.</p>
+
+    <p>Der Rückgabewert verhält sich analog zum increment Operator.</p>
+   </td>
+   <td>Wenn <code>x</code> gleich 3 ist, setzt <code>--x</code> <code>x</code> auf 2 und gibt 2 zurück, wobei <code>x--</code> 3 zurückgibt und erst danach, <code>x</code> auf 2 setzt.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary negation</a> (<code>-</code>)</td>
+   <td>Unärer Operator. Gibt die Negierung seines Operanden zurück.</td>
+   <td>Wenn <code>x</code> gleich 3 ist, gibt <code>-x</code> -3 zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary plus</a> (<code>+</code>)</td>
+   <td>Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.</td>
+   <td><code>+"3"</code> gibt <code>3</code> zurück.<br>
+    <code>+true</code> gibt <code>1</code> zurück.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation operator</a> (<code>**</code>) {{experimental_inline}}</td>
+   <td>Calculates the <code>base</code> to the <code>exponent</code> power, that is, <code>base<sup>exponent</sup></code></td>
+   <td><code>2 ** 3</code> gibt <code>8</code> zurück.<br>
+    <code>10 ** -1</code> gibt <code>0.1 </code>zurück.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Bitweise_Operatoren">Bitweise Operatoren</h3>
+
+<p>Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von <code>1001</code>. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.</p>
+
+<p>Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.</p>
+
+<table class="standard-table">
+ <caption>Bitweise Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Verwendung</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Returns a one in each bit position for which the corresponding bits of both operands are ones.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a></td>
+   <td><code>a | b</code></td>
+   <td>Returns a zero in each bit position for which the corresponding bits of both operands are zeros.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Returns a zero in each bit position for which the corresponding bits are the same.<br>
+    [Returns a one in each bit position for which the corresponding bits are different.]</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a></td>
+   <td><code>~ a</code></td>
+   <td>Inverts the bits of its operand.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">Left shift</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the left, shifting in zeros from the right.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">Sign-propagating right shift</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the right, discarding bits shifted off.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">Zero-fill right shift</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> bits to the right, discarding bits shifted off, and shifting in zeros from the left.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Bitweise logische Operatoren</h4>
+
+<p>Konzeptuell arbeiten bitweise logische Operatoren wie folgt:</p>
+
+<ul>
+ <li>Die Operanden werden zu 32 Bit Integer Zahlen konvertiert und als Folge von Bits (Nullen und Einsen) dargestellt. Zahlen mit mehr als 32 Bits verlieren dabei ihre signifikanten Bits bis auf eine Länge von 32. Im folgenden Beispiel wird eine Zahl mit mehr als 32 Bits zu einer 32 Bit Integer Zahl konvertiert:
+  <pre>Before: 11100110111110100000000000000110000000000001
+After:              10100000000000000110000000000001</pre>
+ </li>
+ <li>Jedes Bit des ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: Erstes Bit mit dem ersten Bit, zweites Bit mit dem zweiten Bit und so weiter.</li>
+ <li>Der Operator wird auf jedes paar von Bits angewendet und das Ergebnis bitweise erstellt.</li>
+</ul>
+
+<p>Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:</p>
+
+<table class="standard-table">
+ <caption>Beispiele für bitweise Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Ausdruck</th>
+   <th scope="col">Ergebnis</th>
+   <th scope="col">Binäre Darstellung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). <code>~x</code> wird also genauso ausgewertet wie <code>-x - 1</code>.</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Bitweise Schiebeoperatoren</h4>
+
+<p>Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.</p>
+
+<p>Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.</p>
+
+<p>Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.</p>
+
+<table class="fullwidth-table">
+ <caption>Bitwise shift operators</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Description</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_(Left_shift)">Left shift</a><br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</td>
+   <td><code>9&lt;&lt;2</code> yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_(Sign-propagating_right_shift)">Sign-propagating right shift</a> (<code>&gt;&gt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.</td>
+   <td><code>9&gt;&gt;2</code> yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, <code>-9&gt;&gt;2</code> yields -3, because the sign is preserved.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_(Zero-fill_right_shift)">Zero-fill right shift</a> (<code>&gt;&gt;&gt;</code>)</td>
+   <td>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.</td>
+   <td><code>19&gt;&gt;&gt;2</code> yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Logische_Operatoren">Logische Operatoren</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logische Operatoren</a> werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren <code>&amp;&amp;</code> und <code>||</code> geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: </p>
+
+<table class="fullwidth-table">
+ <caption>Logische Operatoren</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Verwendung</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a><code> </code>(<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>Gibt <code>expr1</code> zurück, sofern es zu <code>false</code> konvertiert werden kann; ansonsten wird <code>expr2</code> zurückgegeben. Insofern mit booleschen Werten verwendet, <code>&amp;&amp;</code> gibt <code>true</code> zurück, wenn beide Operanden wahr sind; ansonsten <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR </a>(<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>
+    <p>Gibt <code>expr1</code> zurück, sofern er zu <code>true</code> konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator <code>||</code> true zurück, wenn einer von beiden Operanden <code>true</code> ist; wenn beide <code>false</code> sind, wird <code>false</code> zurückgegeben. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT </a>(<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>
+    <p>Gibt <code>false</code> zurück, wenn sein einziger Operand in <code>true</code> konvertiert werden kann; andernfalls gibt er <code>true</code> zurück. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Beispiele von Ausdrücken, die in <code>false</code> umgewandelt werden können, sind solche, die <code>null</code>, 0, <code>NaN</code>, einen leeren String ("") oder <code>undefined</code> sind. </p>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>&amp;&amp;</code> (logisches UND) Operators.</p>
+
+<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t returns true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f returns false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t returns false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f returns false
+var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t returns Dog
+var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t returns false
+var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f returns false
+</pre>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>||</code> (logisches ODER) Operators:</p>
+
+<pre class="brush: js">var o1 =  true || true;     // t || t returns true
+var o2 = false || true;     // f || t returns true
+var o3 =  true || false;    // t || f returns true
+var o4 = false || (3 == 4); // f || f returns false
+var o5 = "Cat" || "Dog";    // t || t returns Cat
+var o6 = false || "Cat";    // f || t returns Cat
+var o7 = "Cat" || false;    // t || f returns Cat
+</pre>
+
+<p>Die folgenden Zeilen zeigen Beispiele des <code>!</code> (logisches NICHT) Operators:</p>
+
+<pre class="brush: js">var n1 = !true;  // !t returns false
+var n2 = !false; // !f returns true
+var n3 = !"Cat"; // !t returns false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Short-circuit-Bewertung </h4>
+
+<p>Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>irgendwas</em> wird abgekürzt als <code>false</code> bewertet.</li>
+ <li><code>true</code> || <em>irgendwas</em> wird abgekürtz als <code>true</code> bewertet. </li>
+</ul>
+
+<p>Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der <em>irgendwas</em>-Operand werden in den o.g. Beispielen hierbei nicht bewertet. </p>
+
+<h3 id="String-Operatoren">String-Operatoren</h3>
+
+<p>In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">console.log("my " + "string"); // console logs the string "my string".</pre>
+
+<p>The shorthand assignment operator += can also be used to concatenate strings.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">var mystring = "alpha";
+mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.</pre>
+
+<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">conditional operator</a> is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:</p>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em>
+</pre>
+
+<p>If <code>condition</code> is true, the operator has the value of <code>val1</code>. Otherwise it has the value of <code>val2</code>. You can use the conditional operator anywhere you would use a standard operator.</p>
+
+<p>For example,</p>
+
+<pre class="brush: js">var status = (age &gt;= 18) ? "adult" : "minor";
+</pre>
+
+<p>This statement assigns the value "adult" to the variable <code>status</code> if <code>age</code> is eighteen or more. Otherwise, it assigns the value "minor" to <code>status</code>.</p>
+
+<h3 id="Comma_operator" name="Comma_operator">Comma operator</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">comma operator</a> (<code>,</code>) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a <code>for</code> loop, to allow multiple variables to be updated each time through the loop.</p>
+
+<p>For example, if <code>a</code> is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:</p>
+
+<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9];
+var a = [x, x, x, x, x]
+
+for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+</pre>
+
+<h3 id="Unary_operators">Unary operators</h3>
+
+<p>A unary operation is an operation with only one operand.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:</p>
+
+<pre class="brush: js">delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // legal only within a with statement
+</pre>
+
+<p>where <code>objectName</code> is the name of an object, <code>property</code> is an existing property, and <code>index</code> is an integer representing the location of an element in an array.</p>
+
+<p>The fourth form is legal only within a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> statement, to delete a property from an object.</p>
+
+<p>You can use the <code>delete</code> operator to delete variables declared implicitly but not those declared with the <code>var</code> statement.</p>
+
+<p>If the <code>delete</code> operator succeeds, it sets the property or element to <code>undefined</code>. The <code>delete</code> operator returns true if the operation is possible; it returns <code>false</code> if the operation is not possible.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // create property h
+delete x;       // returns true (can delete if declared implicitly)
+delete y;       // returns false (cannot delete if declared with var)
+delete Math.PI; // returns false (cannot delete predefined properties)
+delete myobj.h; // returns true (can delete user-defined properties)
+delete myobj;   // returns true (can delete if declared implicitly)
+</pre>
+
+<h5 id="Deleting_array_elements">Deleting array elements</h5>
+
+<p>When you delete an array element, the array length is not affected. For example, if you delete <code>a[3]</code>, <code>a[4]</code> is still <code>a[4]</code> and <code>a[3]</code> is undefined.</p>
+
+<p>When the <code>delete</code> operator removes an array element, that element is no longer in the array. In the following example, <code>trees[3]</code> is removed with <code>delete</code>. However, <code>trees[3]</code> is still addressable and returns <code>undefined</code>.</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+delete trees[3];
+if (3 in trees) {
+  // this does not get executed
+}
+</pre>
+
+<p>If you want an array element to exist but have an undefined value, use the <code>undefined</code> keyword instead of the <code>delete</code> operator. In the following example, <code>trees[3]</code> is assigned the value <code>undefined</code>, but the array element still exists:</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+trees[3] = undefined;
+if (3 in trees) {
+  // this gets executed
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> operator</a> is used in either of the following ways:</p>
+
+<pre class="syntaxbox">typeof operand
+typeof (operand)
+</pre>
+
+<p>The <code>typeof</code> operator returns a string indicating the type of the unevaluated operand. <code>operand</code> is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.</p>
+
+<p>Suppose you define the following variables:</p>
+
+<pre class="brush: js">var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var today = new Date();
+</pre>
+
+<p>The <code>typeof</code> operator returns the following results for these variables:</p>
+
+<pre class="brush: js">typeof myFun;     // returns "function"
+typeof shape;     // returns "string"
+typeof size;      // returns "number"
+typeof today;     // returns "object"
+typeof dontExist; // returns "undefined"
+</pre>
+
+<p>For the keywords <code>true</code> and <code>null</code>, the <code>typeof</code> operator returns the following results:</p>
+
+<pre class="brush: js">typeof true; // returns "boolean"
+typeof null; // returns "object"
+</pre>
+
+<p>For a number or string, the <code>typeof</code> operator returns the following results:</p>
+
+<pre class="brush: js">typeof 62;            // returns "number"
+typeof 'Hello world'; // returns "string"
+</pre>
+
+<p>For property values, the <code>typeof</code> operator returns the type of value the property contains:</p>
+
+<pre class="brush: js">typeof document.lastModified; // returns "string"
+typeof window.length;         // returns "number"
+typeof Math.LN2;              // returns "number"
+</pre>
+
+<p>For methods and functions, the <code>typeof</code> operator returns results as follows:</p>
+
+<pre class="brush: js">typeof blur;        // returns "function"
+typeof eval;        // returns "function"
+typeof parseInt;    // returns "function"
+typeof shape.split; // returns "function"
+</pre>
+
+<p>For predefined objects, the <code>typeof</code> operator returns results as follows:</p>
+
+<pre class="brush: js">typeof Date;     // returns "function"
+typeof Function; // returns "function"
+typeof Math;     // returns "object"
+typeof Option;   // returns "function"
+typeof String;   // returns "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> operator</a> is used in either of the following ways:</p>
+
+<pre class="syntaxbox">void (expression)
+void expression
+</pre>
+
+<p>The <code>void</code> operator specifies an expression to be evaluated without returning a value. <code>expression</code> is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.</p>
+
+<p>You can use the <code>void</code> operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.</p>
+
+<p>The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, <code>void(0)</code> evaluates to <code>undefined</code>, which has no effect in JavaScript.</p>
+
+<pre class="brush: html"><a>Click here to do nothing</a>
+</pre>
+
+<p>The following code creates a hypertext link that submits a form when the user clicks it.</p>
+
+<pre class="brush: html"><a>
+Click here to submit</a></pre>
+
+<h3 id="Relational_operators">Relational operators</h3>
+
+<p>A relational operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> returns true if the specified property is in the specified object. The syntax is:</p>
+
+<pre class="brush: js">propNameOrNumber in objectName
+</pre>
+
+<p>where <code>propNameOrNumber</code> is a string or numeric expression representing a property name or array index, and <code>objectName</code> is the name of an object.</p>
+
+<p>The following examples show some uses of the <code>in</code> operator.</p>
+
+<pre class="brush: js">// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees;        // returns true
+3 in trees;        // returns true
+6 in trees;        // returns false
+"bay" in trees;    // returns false (you must specify the index number,
+                   // not the value at that index)
+"length" in trees; // returns true (length is an Array property)
+
+// built-in objects
+"PI" in Math;          // returns true
+var myString = new String("coral");
+"length" in myString;  // returns true
+
+// Custom objects
+var mycar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in mycar;  // returns true
+"model" in mycar; // returns true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> operator</a> returns true if the specified object is of the specified object type. The syntax is:</p>
+
+<pre class="syntaxbox">objectName instanceof objectType
+</pre>
+
+<p>where <code>objectName</code> is the name of the object to compare to <code>objectType</code>, and <code>objectType</code> is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.</p>
+
+<p>Use <code>instanceof</code> when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.</p>
+
+<p>For example, the following code uses <code>instanceof</code> to determine whether <code>theDay</code> is a <code>Date</code> object. Because <code>theDay</code> is a <code>Date</code> object, the statements in the <code>if</code> statement execute.</p>
+
+<pre class="brush: js">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // statements to execute
+}
+</pre>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>The <em>precedence</em> of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.</p>
+
+<p>The following table describes the precedence of operators, from highest to lowest.</p>
+
+<table class="standard-table">
+ <caption>Operator precedence</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator type</th>
+   <th scope="col">Individual operators</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>member</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>call / create instance</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>negation/increment</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>multiply/divide</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>addition/subtraction</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>bitwise shift</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>relational</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>equality</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-and</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-xor</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>bitwise-or</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>logical-and</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>logical-or</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>conditional</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>assignment</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>comma</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A more detailed version of this table, complete with links to additional details about each operator, may be found in <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript Reference</a>.</p>
+
+<h2 id="Expressions">Expressions</h2>
+
+<p>An <em>expression</em> is any valid unit of code that resolves to a value.</p>
+
+<p>Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.</p>
+
+<p>The expression <code>x = 7</code> is an example of the first type. This expression uses the =<em> operator</em> to assign the value seven to the variable <code>x</code>. The expression itself evaluates to seven.</p>
+
+<p>The code <code>3 + 4</code> is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.<br>
+ <br>
+ JavaScript has the following expression categories:</p>
+
+<ul>
+ <li>Arithmetic: evaluates to a number, for example 3.14159. (Generally uses {{ web.link("#Arithmetic_operators", "arithmetic operators") }}.)</li>
+ <li>String: evaluates to a character string, for example, "Fred" or "234". (Generally uses {{ web.link("#String_operators", "string operators") }}.)</li>
+ <li>Logical: evaluates to true or false. (Often involves {{ web.link("#Logical_operators", "logical operators") }}.)</li>
+ <li>Primary expressions: Basic keywords and general expressions in JavaScript.</li>
+ <li>Left-hand-side expressions: Left values are the destination of an assignment.</li>
+</ul>
+
+<h3 id="Primary_expressions">Primary expressions</h3>
+
+<p>Basic keywords and general expressions in JavaScript.</p>
+
+<h4 id="this" name="this"><code>this</code></h4>
+
+<p>Use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> to refer to the current object. In general, <code>this</code> refers to the calling object in a method. Use <code>this</code> either with the dot or the bracket notation:</p>
+
+<pre class="syntaxbox">this["propertyName"]
+this.propertyName
+</pre>
+
+<p>Suppose a function called <code>validate</code> validates an object's <code>value</code> property, given the object and the high and low values:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival){
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log("Invalid Value!");
+}
+</pre>
+
+<p>You could call <code>validate</code> in each form element's <code>onChange</code> event handler, using <code>this</code> to pass it the form element, as in the following example:</p>
+
+<pre class="brush: html"></pre>
+
+<p>Enter a number between 18 and 99:</p>
+
+<p><input></p>
+
+<h4 id="Grouping_operator">Grouping operator</h4>
+
+<p>The grouping operator <code>( )</code> controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+</pre>
+
+<h4 id="Comprehensions">Comprehensions</h4>
+
+<p>Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:</p>
+
+<dl>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Array comprehensions.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Generator comprehensions.</dd>
+</dl>
+
+<p>Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.</p>
+
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letter of abc) letter.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3>
+
+<p>Left values are the destination of an assignment.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> to create an instance of a user-defined object type or of one of the built-in object types. Use <code>new</code> as follows:</p>
+
+<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super keyword</a> is used to call functions on an object's parent. It is useful with <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> to call the parent constructor, for example.</p>
+
+<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+</pre>
+
+<h4 id="Spread_operator">Spread operator</h4>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</p>
+
+<p><strong>Example:</strong> Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of <code>push</code>, <code>splice</code>, <code>concat</code>, etc. With spread syntax this becomes much more succinct:</p>
+
+<pre class="brush: js">var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
+
+<p>Similarly, the spread operator works with function calls:</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/de/web/javascript/guide/einführung/index.html b/files/de/web/javascript/guide/einführung/index.html
new file mode 100644
index 0000000000..b38cb1b700
--- /dev/null
+++ b/files/de/web/javascript/guide/einführung/index.html
@@ -0,0 +1,140 @@
+---
+title: Einführung
+slug: Web/JavaScript/Guide/Einführung
+tags:
+  - Beginner
+  - Guide
+  - Introduction
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</div>
+
+<p class="summary">Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.</p>
+
+<h2 id="Was_solltest_du_bereits_wissen">Was solltest du bereits wissen</h2>
+
+<p>Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:</p>
+
+<ul>
+ <li>Ein allgemeines Verständnis vom Internet und dem World Wide Web ({{Glossary("WWW")}}).</li>
+ <li>Gute praktische Kenntnisse in der HyperText Markup Language ({{Glossary("HTML")}}).</li>
+ <li>Etwas Programmiererfahrung. Falls du erst mit dem Programmieren beginnst, folge einem der Tutorials, die auf der Hauptseite zu <a href="/de/docs/Web/JavaScript" title="/en-US/docs/">JavaScript</a> verlinkt sind.</li>
+</ul>
+
+<h2 id="Wo_findest_du_Informationen_zu_JavaScript">Wo findest du Informationen zu JavaScript</h2>
+
+<p>Die Dokumentation zu JavaScript im MDN umfasst Folgendes:</p>
+
+<ul>
+ <li><a href="/de/Learn">Learning the Web [de]</a> vermittelt Informationen für Einsteiger und präsentiert grundlegende Konzepte der Programmierung und des Internets.</li>
+ <li><a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide [de]</a> (dieser Artikel) gibt einen Überblick über JavaScript und die Komponenten der Sprache.</li>
+ <li><a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> enthält ausführliches Referenzmaterial über JavaScript.</li>
+</ul>
+
+<p>Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von <a href="/de/Learn">Learning the Web [de]</a> und dem <a href="/de/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide [de]</a>. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die <a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.</p>
+
+<h2 id="Was_ist_JavaScript">Was ist JavaScript?</h2>
+
+<p>JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.</p>
+
+<p>JavaScript beinhaltet eine Standardbibliothek von Objekten wie <code>Array</code>, <code>Date</code>, und <code>Math</code>, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:</p>
+
+<ul>
+ <li><em>Clientseitiges JavaScript</em> erweitert die Kernsprache durch die Bereitstellung von Objekten, mit denen ein Browser und sein Document Object Model (DOM) steuern lassen. Zum Beispiel ermöglichen clientseitige Erweiterungen einer Anwendung, Elemente in einem HTML-Formular anzulegen und auf Benutzerereignisse wie Mausklicks, Formulareingaben und Seitennavigation zu reagieren.</li>
+ <li><em>Serverseitiges JavaScript</em> erweitert die Kernsprache durch Bereitstellung von Objekten, die für die Ausführung von JavaScript auf einem Server von Bedeutung sind. Zum Beispiel ermöglichen es serverseitige Erweiterungen einer Applikation, mit einer Datenbank zu kommunizieren, Information von einem Aufruf der Applikation zum nächsten zu erhalten oder Änderungen an Dateien auf einem Server vorzunehmen.</li>
+</ul>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript und Java</h2>
+
+<p>JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.</p>
+
+<p>Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.</p>
+
+<p>JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.</p>
+
+<p>Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.</p>
+
+<p>Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.</p>
+
+<table class="standard-table">
+ <caption>JavaScript im Vergleich zu Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.</td>
+   <td>Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.</td>
+  </tr>
+  <tr>
+   <td>Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Datentypen von Variablen müssen deklariert werden (statische Typisierung)</span></td>
+  </tr>
+  <tr>
+   <td>Kein automatischer Schreibzugriff auf die Festplatte.</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Kein automatischer Schreibzugriff auf die Festplatte.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel <a href="/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Einzelheiten des Objektmodells</a>.</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript und die ECMAScript-Spezifikation</h2>
+
+<p>JavaScript wird durch <a class="external" href="http://www.ecma-international.org/">Ecma International</a> standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter <a href="/de/docs/Web/JavaScript/New_in_JavaScript">Neu in JavaScript</a> erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.</p>
+
+<p>ECMA-262 ist auch von der <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">der Website von Ecma International</a>. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> und der <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a> standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel <a href="/de/docs/Web/JavaScript/JavaScript_technologieuebersicht">JavaScript Technologieübersicht</a>.</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript-Dokumentation vs. ECMAScript-Spezifikation</h3>
+
+<p>Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.</p>
+
+<p>Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.</p>
+
+<p>Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.</p>
+
+<p>Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.</p>
+
+<h2 id="Erste_Schritte_mit_JavaScript">Erste Schritte mit JavaScript</h2>
+
+<p>Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.</p>
+
+<p>Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.</p>
+
+<h3 id="Die_Web-Konsole">Die Web-Konsole</h3>
+
+<p>Die <a href="/de/docs/Tools/Web_Konsole">Web-Konsole</a> zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine <a href="/de/docs/Tools/Web_Konsole#Der_Kommandozeileninterpreter">Kommandozeile</a>, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.</p>
+
+<p>Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="JavaScript-Umgebung_(Scratchpad)">JavaScript-Umgebung (Scratchpad)</h3>
+
+<p>Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die <a href="/de/docs/Tools/Scratchpad">JavaScript-Umgebung</a> die bessere Wahl.</p>
+
+<p>Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p>
+
+<h3 id="Hello_world">Hello world</h3>
+
+<p>Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:</p>
+
+<pre class="brush: js">function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+</pre>
+
+<p>Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.</p>
+
+<p>Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</p>
diff --git a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
new file mode 100644
index 0000000000..4d5e46ac26
--- /dev/null
+++ b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
@@ -0,0 +1,721 @@
+---
+title: Feinheiten des Objektmodells
+slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}</div>
+
+<p class="summary">JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.</p>
+
+<p>Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.</p>
+
+<h2 id="Klassenbasierte_vs._Prototypbasierte_Sprachen">Klassenbasierte vs. Prototypbasierte Sprachen</h2>
+
+<p>Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.</p>
+
+<ul>
+ <li>Eine <em>Klasse</em> definiert alle Eigenschaften (was Methoden und Felder in Java oder Members in C++ entspricht), welche eine Menge von Objekten charakterisiert. Eine Klasse ist ein abstrakter Bauplan für Objekte. Die Klasse repräsentiert den Aufbau ihrer Objekte. Zum Beispiel kann die Klasse <code>Employee</code> die Menge aller Mitarbeiter repräsentieren.</li>
+ <li>Eine <code>Instanz</code> ist auf der anderen Seite eine Instanz einer Klasse. Diese Instanz ist ein Mitglied der oben genannten Objektmenge. Zum Beispiel kann <code>Victoria</code> eine Instanz der <code>Employee</code> Klasse sein und somit einen individuellen Mitarbeiter repräsentieren. Eine Instanz hat genau die selben Eigenschaften wie die Elternklasse (keine mehr und keine weniger).</li>
+</ul>
+
+<p>Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines <em>prototypischen Objektes</em>, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als <em>Prototyp</em> für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.</p>
+
+<h3 id="Eine_Klasse_definieren">Eine Klasse definieren</h3>
+
+<p>In einer Klassenbasierten Sprache definiert man Klassen in separaten <em>Klassendefinitionen</em>. In diesen Definitionen spezifiziert man spezielle Methoden, <em>Konstruktoren</em> genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den <code>new</code> Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.</p>
+
+<p>JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den <code>new</code> Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.</p>
+
+<h3 id="Unterklassen_und_Vererbung">Unterklassen und Vererbung</h3>
+
+<p>In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine <em>Unterklasse</em> der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die <code>Employee</code> Klasse hat nur die Eigenschaften <code>name</code> und <code>dept</code> und <code>Manager</code> ist eine Unterklasse von <code>Employee</code> welche die Eigenschaft <code>reports</code> hinzufügt. In diesem Fall hat eine Instanz der <code>Manager</code> Klasse alle drei Eigenschaften: <code>name</code>, <code>dept</code> und <code>reports</code>.</p>
+
+<p>JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche <code>Employee</code> — <code>Manager</code> Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die <code>Employee</code> Konstruktorfunktion, welche die Eigenschaften <code>name</code> und <code>dept</code> spezifiziert. Als nächstes definiert man die <code>Manager</code> Konstruktorfunktion, ruft den <code>Employee</code> Konstruktor auf und spezifiziert die <code>reports</code> Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von <code>Employee.prototype</code> stammt und als <code>prototype</code> für die <code>Manager</code> Konstruktorfunktion dient. Dann, wenn man einen neuen <code>Manager</code> erstellt, erbt dieser die Eigenschaften <code>name</code> und <code>dept</code> von dem <code>Employee</code> Objekt.</p>
+
+<h3 id="Hinzufügen_und_Entfernen_von_Eigenschaften">Hinzufügen und Entfernen von Eigenschaften</h3>
+
+<p>In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.</p>
+
+<h3 id="Zusammenfassung_von_Unterschieden">Zusammenfassung von Unterschieden</h3>
+
+<p>Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.</p>
+
+<table class="standard-table">
+ <caption>Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen</caption>
+ <thead>
+  <tr>
+   <th scope="col">Klassenbasiert (Java)</th>
+   <th scope="col">Prototypbasiert (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Klassen und Instanzen sind verschiedene Dinge.</td>
+   <td>Alle Objekte können von anderen Objekt erben.</td>
+  </tr>
+  <tr>
+   <td>Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.</td>
+   <td>Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.</td>
+  </tr>
+  <tr>
+   <td>Erstellt ein Objekt mit dem <code>new</code> Operator.</td>
+   <td>Genauso.</td>
+  </tr>
+  <tr>
+   <td>Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.</td>
+   <td>Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.</td>
+  </tr>
+  <tr>
+   <td>Erbt Eigenschaften entlang der Klassenkette.</td>
+   <td>Erbt Eigenschaften entlang der Prototypenkette.</td>
+  </tr>
+  <tr>
+   <td>Klassendefinitionen spezifizieren <em>alle</em> Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.</td>
+   <td>Konstruktorfunktionen oder Prototypen spezifizieren eine <em>initiale Menge</em> von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Das_Mitarbeiter-Beispiel">Das Mitarbeiter-Beispiel</h2>
+
+<p>Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.</p>
+
+<div style="display: table-row;">
+<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;">
+<p>Eine einfache Objekthierarchie mit den folgenden Objekten:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+</div>
+
+<div style="display: table-cell; vertical-align: middle; padding: 10px;">
+<ul>
+ <li><code>Employee</code> (Mitarbeiter) hat die Eigenschafte <code>name</code> (die als Initialwert einen leerer String hat) und <code>dept</code> (Abteilung) (die als Initialwert "general" hat).</li>
+ <li><code>Manager</code> basiert auf <code>Employee</code>. Er fügt die Eigenschaft <code>reports</code> (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von <code>Employee</code>s vorgesehen ist).</li>
+ <li><code>WorkerBee</code> (Arbeitsbiene) basiert ebenfalls auf <code>Employee</code>. Er fügt die Eigenschaft <code>projects</code> hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).</li>
+ <li><code>SalesPerson</code> (Verkäufer) basiert auf <code>WorkerBee</code>. Er fügt die Eigenschaft <code>quota</code> (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die <code>dept</code> Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.</li>
+ <li><code>Engineer</code> (Ingenieur) basiert auf <code>WorkerBee</code>. Er fügt die Eigenschaft <code>machine</code> (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft <code>dept</code> mit dem Wert "engineering".</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Erstellen_der_Hierarchie">Erstellen der Hierarchie</h2>
+
+<p>Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.</p>
+
+<p>Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.</p>
+
+<p>In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe <a href="#Flexiblere_Konstruktoren">Flexiblere Konstruktoren</a> für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.</p>
+
+<p>Die folgenden Java und JavaScript <code>Employee</code> Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine <a href="https://de.wikipedia.org/wiki/Starke_Typisierung">stark typisierte Sprache</a> ist, während JavaScript eine schwach typisierte Sprache ist).</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+</pre>
+
+<h4 id="Java"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+</div>
+
+<p>Die <code>Manager</code> und <code>WorkerBee</code> Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft <code>prototype</code> der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+</pre>
+
+<h4 id="Java_2"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+</pre>
+</div>
+
+<p>Die <code>Engineer</code> und <code>SalesPerson</code> Definition erstellt Objekte, welche von <code>WorkerBee</code> und somit auch von <code>Employee</code> abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten <code>dept</code> Eigenschaft mit einem neuen Wert für diese Objekte.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+</pre>
+
+<h4 id="Java_3"><br>
+ Java</h4>
+
+<pre class="brush: java notranslate">public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+</pre>
+</div>
+
+<p>Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Der Term <em>Instanz</em> hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass <code><code>jane</code></code> eine Instanz von <code><code>Engineer</code></code> ist. Ebenso haben die Terme <em>Eltern</em>, <em>Kind</em>, <em>Vorfahre</em><strong><em> </em></strong>und <em>Nachfahre</em> keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.</p>
+</div>
+
+<h3 id="Objekte_mit_der_einfachen_Definition_erstellen">Objekte mit der einfachen Definition erstellen</h3>
+
+<div class="twocolumns">
+<h4 id="Objekthierarchie">Objekthierarchie</h4>
+
+<p>Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+
+<h4 id="Individuelle_Objekte_Jim_Sally_Mark_Fred_Jane_etc._Instanzen_erstellt_vom_Konstruktor">Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.<br>
+ "Instanzen" erstellt vom Konstruktor</h4>
+
+<pre class="brush: js notranslate">var jim = new Employee;
+// Parentheses can be omitted if the
+// constructor takes no arguments.
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+</pre>
+</div>
+
+<h2 id="Objekteigenschaften">Objekteigenschaften</h2>
+
+<p>Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.</p>
+
+<h3 id="Eigenschaften_vererben">Eigenschaften vererben</h3>
+
+<p>Es wird vorausgesetzt, dass das Objekt <code>mark</code> als <code>WorkerBee</code> mit dem folgenden Statement erstellt wurde:</p>
+
+<pre class="brush: js notranslate">var mark = new WorkerBee;
+</pre>
+
+<p>Wenn JavaScript den <code>new</code> Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert <code>WorkerBee.prototype</code> und setzt die <em><code>this</code></em> Referenz in der <code>WorkerBee</code> Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable <code>mark</code> mit diesem Objekt.</p>
+
+<p>Dieser Prozess fügt keine Werte in das <code>mark</code>-Objekt (lokale Werte) für Eigenschaften, die <code>mark</code> von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das <code>mark</code> Objekt folgende Eigenschaften und Werte:</p>
+
+<pre class="brush: js notranslate">mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+</pre>
+
+<p>Das <code>mark</code> Objekt hat lokale Werte für die <code>name</code> und <code>dept</code> Eigenschaft über den <code>Employee</code> Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft <code>projects</code> vom <code>WorkerBee</code> Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in <a href="#Eigenschaftsvererbung_erneut_besuchen">Eigenschaftsvererbung erneut besuchen</a> behandelt.</p>
+
+<p>Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit <code>WorkerBee</code> erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für <code>mark</code> wie folgt vergeben:</p>
+
+<pre class="brush: js notranslate">mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];</pre>
+
+<h3 id="Eigenschaften_hinzufügen">Eigenschaften hinzufügen</h3>
+
+<p>In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:</p>
+
+<pre class="brush: js notranslate">mark.bonus = 3000;
+</pre>
+
+<p>Jetzt hat das <code>mark</code> Objekt eine <code>bonus</code> Eigenschaft, aber kein anderer <code>WorkerBee</code> hat diese Eigenschaft.</p>
+
+<p>Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine <code>specialty</code> Eigenschaft zu allen <code>employee</code>s mit dem folgenden Statement hinzufügen:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Nach der Ausführung dieses Statements durch JavaScript, hat das <code>mark</code> Objekt auch die <code>specialty</code> Eigenschaft mit dem Wert <code>"none"</code>. Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum <code>Employee</code> Prototyp und das Überschreiben des <code>Engineer</code> Prototypen.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Eigenschaften hinzufügen</strong></small></p>
+
+<h2 id="Flexiblere_Konstruktoren">Flexiblere Konstruktoren</h2>
+
+<p>Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1</strong></small></p>
+
+<p>Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.</p>
+
+<div class="twocolumns">
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<h4 id="Java_4">Java</h4>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+</pre>
+
+<pre class="brush: java notranslate">public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<pre class="brush: java notranslate">public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+
+<pre class="brush: java notranslate">public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+</div>
+
+<p>Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:</p>
+
+<pre class="brush: js notranslate">this.name = name || '';
+</pre>
+
+<p>Der logische ODER Operator (<code>||</code>) von JavaScript wertet das erste Argument aus. Wenn das Argument zu <code>true</code> konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob <code>name</code> einen nützlichen Wert für die <code>name</code> Eigenschaft hat. Wenn das der Fall ist, wird <code>this.name</code> auf diesen Wert gesetzt. Andernfalls wird <code>this.name</code> auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu <code><code>false</code></code> konvertiert werden (wie <code>0</code> (null) und der leere String (<code>""</code>)). In diesen Fällen wird der Standardwert benutzt.</p>
+</div>
+
+<p>Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen <code>Engineer</code> zu erstellen:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer('belau');
+</pre>
+
+<p><code>Jane</code>'s Eigenschaften sind jetzt:</p>
+
+<pre class="brush: js notranslate">jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+</pre>
+
+<p>Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie <code>name</code> spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.</p>
+
+<p>Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2</strong></small></p>
+
+<p>Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den <code>Engineer</code>-Konstruktor:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<p>Angenommen, man erstellt ein neues <code>Engineer</code>-Objekt wie folgt:</p>
+
+<pre class="brush: js notranslate">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+</pre>
+
+<p>JavaScript folgt folgenden Schritten:</p>
+
+<ol>
+ <li>Der <code>new</code> Operator erstellt ein generisches Objekt und setzt die <code>__proto__</code> EIgenschaft auf <code>Engineer.prototype</code>.</li>
+ <li>Der <code>new</code> Operator übergibt das neue Objekt dem <code>Engineer</code> Konstruktor als Wert des <code>this</code> Schlüsselwortes.</li>
+ <li>Der Konstruktor erstellt eine neue Eigenschaft namens <code>base</code> für dieses Objekt und weist dieser den Wert des <code>WorkerBee</code> Konstruktors zu. Das macht den <code>WorkerBee</code> Konstruktor zu einer Methode des <code>Engineer</code> Objektes. Der Name der <code>base</code> Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; <code>base</code> erinnert einfach an den Zweck.</li>
+ <li>Der Konstruktor ruft die <code>base</code> Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors (<code>"Doe, Jane"</code> und <code>["navigator", "javascript"]</code>) und zudem den String <code>"engineering"</code>. Der explizite Einsatz von <code>"engineering"</code> im Konstruktor zeigt, dass alle <code>Engineer</code> Objekte den selben Wert für dei geerbte <code>dept</code> Eigenschaft haben und dieser Wert den vererbten Wert von <code>Employee</code> überschreibt.</li>
+ <li>Weil <code>base</code> eine Methode von <code>Engineer</code> ist, weshalb JavaScrip beim Aufruf von <code>base</code> das Schlüsselwort <code>this</code> an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die <code>WorkerBee</code> Funktion die <code>"Doe, Jane"</code> und <code>"engineering"</code> Argumente zu der <code>Employee</code> Konstruktorfunktion. Nach der Rückgabe der <code>Employee</code> Konstruktorfunktion verwendet die <code>WorkerBee</code> Funktion das restliche Argument, um die <code>projects</code> Eigenschaft zu setzen.</li>
+ <li>Nach der Rückgabe der <code>base</code> Methode initialisiert der <code>Engineer</code> Konstruktor die Objekteigenschaft <code>machine</code> mit <code>"belau"</code>.</li>
+ <li>Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der <code>jane</code> Variablen zu.</li>
+</ol>
+
+<p>Man kann denken, dass man, nachdem der <code>WorkerBee</code>-Konstruktor innerhalb des <code>Engineer</code>-Konstruktors aufgerufen wird, die Vererbung für das <code>Engineer</code>-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des <code>WorkerBee</code> Konstruktors stellt sicher, dass ein <code>Engineer</code> Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum <code>Employee</code> oder <code>WorkerBee</code> Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von <code>Engineer</code> Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Das <code>jane</code> Objekt erbt nicht die <code>specialty</code> Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:</p>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+</pre>
+
+<p>Jetzt ist der Wert der <code>specialty</code> Eigenschaft des <code>jane</code> Objektes <code>"none"</code>.</p>
+
+<p>Ein anderer Weg wür Vererbung ist der Einsatz der <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> / <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a> Methoden. Die folgenden Beispiele sind äquivalent:</p>
+
+<div class="twocolumns">
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+
+<pre class="brush: js notranslate">function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+</pre>
+</div>
+
+<p>Der Einsatz von javascript <code>call()</code> Methode ergibt ein sauberere Implementierung, weil <code>base</code> nicht mehr benötigt wird.</p>
+
+<h2 id="Eigenschaftsvererbung_erneut_besuchen">Eigenschaftsvererbung erneut besuchen</h2>
+
+<p>Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.</p>
+
+<h3 id="Lokale_versus_vererbte_Werte">Lokale versus vererbte Werte</h3>
+
+<p>Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:</p>
+
+<ol>
+ <li>Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.</li>
+ <li>Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die <code>__proto__</code> Eigenschaft) geprüft.</li>
+ <li>Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.</li>
+ <li>Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.</li>
+</ol>
+
+<p>Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:</p>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>Nimmt man mit diesen Definitionen an, man erstellt <code>amy</code> als eine Instanz von <code>WorkerBee</code> mit folgendem Statement:</p>
+
+<pre class="brush: js notranslate">var amy = new WorkerBee;
+</pre>
+
+<p>Das <code>amy</code> Objekt hat eine lokale Eigenschaft, <code>projects</code>. Die Werte der <code>name</code> und <code>dept</code> Eigenschaften sind nicht lokal in <code>amy</code> und werden über die Objekteigenschaft <code>__proto__</code> von <code>amy</code> erreicht. Deshalb hat <code>amy</code> diese Eigenschaftswerte:</p>
+
+<pre class="brush: js notranslate">amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+</pre>
+
+<p>Nimmt man jetzt an, man ändert den Wert der <code>name</code> Eigenschaft in dem <code>Employee</code> Prototyp:</p>
+
+<pre class="brush: js notranslate">Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von <code>Employee</code> propagiert wird. Jedoch ist das falsch.</p>
+
+<p>Wenn man irgendeine Instanz des <code>Employee</code> Objektes erstellt, bekommt die Instanz einen <strong>lokalen Wert</strong> für die <code>name</code> Eigenschaft (der leere String). Das bedeutet, wenn man den <code>WorkerBee</code> Prototyp mit einem neuen <code>Employee</code> Objekt einstellt, dass <code>WorkerBee.prototype</code> einen lokalen Wert für die <code>name</code> Eigenschaft hat. Wenn demnach JavaScript nach der <code>name</code> Eigenschaft im <code>amy</code> Objekt sucht (eine Instanz von <code>WorkerBee</code>), wird der lokale Wert der Eigenschaft <code>WorkerBee.prototype</code> gefunden. Demnach wird nicht tiefer in der Kette in <code>Employee.prototype</code> gesucht.</p>
+
+<p>Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:</p>
+
+<pre class="brush: js notranslate">function Employee() {
+  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = '';    // A single copy
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+</pre>
+
+<p>In diesem Fall wird die <code>name</code> Eigenschaft von <code>amy</code> <code>"Unknown"</code>.</p>
+
+<p>Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.</p>
+
+<h3 id="Instanzbeziehungen_prüfen">Instanzbeziehungen prüfen</h3>
+
+<p>Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft <code>__proto__</code>. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.</p>
+
+<p>Die spezielle Eigenschaft <code>__proto__</code> wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der <code>prototype</code> Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck <code>new Foo()</code> ein Objekt mit <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Folglich ändert die Änderung der <code class="moz-txt-verticalline">Foo.prototype</code> Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit <code>new Foo()</code> erstellt wurden.</p>
+
+<p>Alle Objekte haben eine <code>__proto__</code> Objekteigenschaft (außer <code>Object</code>); Alle Funktionen haben eine <code>prototype</code> Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem <code>__proto__</code> eines Objekts mit einer <code>prototype</code> Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der <code>instanceof</code> Operator prüft ein Objekt gegen eine Funktion und gibt <code>true</code> zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in <a href="#Eigenschaften_vererben">Eigenschaften vererben</a> haben. Ein <code>Engineer</code> wird wie folgt erstellt:</p>
+
+<pre class="brush: js notranslate">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+</pre>
+
+<p>Mit diesem Objekt, sind alle folgenden Statements <code>true</code>:</p>
+
+<pre class="brush: js notranslate">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>Damit kann man eine <code>instanceOf</code> Funktion wie folgt schreiben:</p>
+
+<pre class="brush: js notranslate">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Hinweis:</strong> Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.</div>
+
+<p>Der Einsatz der oben definierten <code>instanceOf</code> Funktion führt bei folgenden Ausdrücken zu <code>true</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+</pre>
+
+<p>Jedoch ist der folgende Ausdruck <code>false</code>:</p>
+
+<pre class="brush: js notranslate">instanceOf(chris, SalesPerson)
+</pre>
+
+<h3 id="Globale_Informationen_in_Konstruktoren">Globale Informationen in Konstruktoren</h3>
+
+<p>Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen <code>employee</code> zugewiesen wird, kann man die folgende Definition für <code>Employee</code> benutzen:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+</pre>
+
+<p>Wenn man mit dieser Definition ein neuen <code>Employee</code> erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist <code>victoria.id == 1</code> und <code>harry.id == 2</code>:</p>
+
+<pre class="brush: js notranslate">var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+</pre>
+
+<p>Auf den ersten Blick ist das super. Jedoch wird <code>idCounter</code> jedes mal, wenn ein <code>Employee</code> erstellt wird, wofür auch immer, inkrementiert. Wenn man eine <code>Employee</code> Hierarchie wie im Kapitel oben gezeigt, so wird der <code>Employee</code> Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:</p>
+
+<pre class="brush: js notranslate">var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+</pre>
+
+<p>Angenommen die Definitionen lassen hier die <code>base</code> Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das <code>mac</code> Objekt die id 5.</p>
+
+<p>Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:</p>
+
+<pre class="brush: js notranslate">function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>Wenn eine Instanz von <code>Employee</code> erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem <code>Employee</code> einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist <code>mac.id == 1</code>.</p>
+
+<p>Alternativ kann man <code>WorkerBee</code> eine Kopie des <code>Employee</code> Prototypenobjektes zuweisen:</p>
+
+<pre class="brush: js notranslate">WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+</pre>
+
+<h3 id="Keine_Mehrfachvererbung">Keine Mehrfachvererbung</h3>
+
+<p>Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.</p>
+
+<p>Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.</p>
+
+<p>In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:</p>
+
+<pre class="brush: js notranslate">function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+</pre>
+
+<p>Vorausgesetzt wird, die Definition von <code>WorkerBee</code> früher in diesem Kapitel. In diesem Fall hat das <code>dennis</code> Objekt die folgenden Eigenschaften:</p>
+
+<pre class="brush: js notranslate">dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+</pre>
+
+<p><code>dennis</code> hat also die <code>hobby</code> Eigenschaften des <code>Hobbyist</code> Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen <code>Hobbyist</code> hinzugefügt werde:</p>
+
+<pre class="brush: js notranslate">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+</pre>
+
+<p>Das <code>dennis</code> Objekt erbt diese neue Eigenschaft nicht.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}</div>
diff --git a/files/de/web/javascript/guide/funktionen/index.html b/files/de/web/javascript/guide/funktionen/index.html
new file mode 100644
index 0000000000..3eeeb4f4e5
--- /dev/null
+++ b/files/de/web/javascript/guide/funktionen/index.html
@@ -0,0 +1,657 @@
+---
+title: Funktionen
+slug: Web/JavaScript/Guide/Funktionen
+tags:
+  - Beginner
+  - Functions
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}</div>
+
+<p class="summary">Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.</p>
+
+<p>Siehe ebenfalls in der <a href="/de/docs/Web/JavaScript/Reference/Functions">ausführlichen Referenz über JavaScript Funktionen</a> nach, um noch mehr Detail zu erfahren.</p>
+
+<h2 id="Funktionen_definieren">Funktionen definieren</h2>
+
+<h3 id="Funktionsdeklaration">Funktionsdeklaration</h3>
+
+<p>Eine <strong>Funktionsdefinition</strong> (auch <strong>Funktionsdeklaration </strong>oder <strong>Funktionsanweisung</strong> genannt) besteht aus dem Schlüsselwort <a href="/de/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, gefolgt von:</p>
+
+<ul>
+ <li>Den Namen der Funktion.</li>
+ <li>Eine Liste von Parametern, die in runden Klammern geschrieben sind und durch Kommas getrennt sind.</li>
+ <li>Die JavaScript Anweisungen, die durch die Funktion definiert werden und innerhalb von geschweiften Klammern steht<code>.</code></li>
+</ul>
+
+<p>Das folgende Beispiel definiert eine Funktion mit dem Namen <code>square</code>:</p>
+
+<pre class="brush: js">function square(number) {
+  return number * number;
+}
+</pre>
+
+<p>Die Funktion <code>square </code>nimmt einen Parameter entgegen, welcher <code>number</code> heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist <code>number</code>), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  <a href="/de/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> Statement an, welcher Wert von der Funktion zurückzugeben wird.</p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p>Bei Primitive Parameter, wie Zahlen, wird der Funktionen <strong>der Wert</strong> übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, <strong>aber nicht global oder in der aufrufenden Funktion</strong>.</p>
+
+<p>Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:</p>
+
+<pre class="brush: js">function myFunc(theObject) {       //Funktiondekleration
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make;  // x bekommt den Wert "Honda"
+
+myFunc(mycar);
+y = mycar.make;  // y  bekommt den Wert "Toyota"
+                 // (die make Eigenschaft wurde in der Funktion geändert)</pre>
+
+<h3 id="Funktionsausdrücke">Funktionsausdrücke</h3>
+
+<p>Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdrücke</a> erstellt werde. Derartige Funktionen können auch <strong>anonym</strong> sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion <code>square</code> auch so definiert werden:</p>
+
+<pre class="brush: js">var square = function(number) { return number * number; };
+var x = square(4); // x bekommt den Wert 16</pre>
+
+<p>Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:</p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+</pre>
+
+<p>Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer <code>map</code> Funktion, die eine Funktion als ersten Parameter erwartet:</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = [],i; // erstellt ein neues Array
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.</p>
+
+<pre class="brush: js">function map(f, a) {
+  var result = []; // erstellt ein neues Array
+  var i;
+  for (i = 0; i &lt; a.length; i++) {
+    result[i] = f(a[i]);
+  }
+  return result;
+}
+var f = function(x) {
+  return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);
+</pre>
+
+<p>gibt [0, 1, 8, 125, 1000]  zurück.</p>
+
+<p>In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird <code>myFunc</code> nur definiert, wenn <code>num </code>gleich <code>0 </code>ist:</p>
+
+<pre class="brush: js">var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}</pre>
+
+<p>Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.</p>
+
+<p>Eine <strong>Methode</strong> ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "<a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten">Mit Objekten arbeiten</a>" zu finden.</p>
+
+<h2 id="Aufruf_von_Funktionen">Aufruf von Funktionen</h2>
+
+<p>Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der <strong>Aufruf</strong> ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion <code>square</code> so aufgerufen:</p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p>Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.</p>
+
+<p>Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:</p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+</pre>
+
+<p>Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Nur die oben angegebene Syntax für Funktionen wird funktionieren (<code>function funcName(){}</code>). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.</p>
+</div>
+
+<pre class="brush: js example-bad">console.log(square); // square ist mit dem Initialwert undefined gehoisted.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+</pre>
+
+<p>Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die <code>showProps()</code> Funktion (definiert in Beitrag "<a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objekte_und_Eigenschaften" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Arbeiten mit Objekten</a>") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.</p>
+
+<p>Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:</p>
+
+<pre class="brush: js">function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a wird der Wert 1 zugewiesen
+b = factorial(2); // b wird der Wert 2 zugewiesen
+c = factorial(3); // c wird der Wert 6 zugewiesen
+d = factorial(4); // d wird der Wert 24 zugewiesen
+e = factorial(5); // e wird der Wert 120 zugewiesen
+</pre>
+
+<p>Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.</p>
+
+<h2 class="deki-transform" id="Scopes_(Gültigkeitsbereiche)_von_Funktionen">Scopes (Gültigkeitsbereiche) von Funktionen</h2>
+
+<p>Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.</p>
+
+<pre class="brush: js">// Die folgenden Variablen sind im globalen Scope definiert
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Diese Funktion ist im globalen Scope definiert
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // gibt 60 zurück
+
+// Ein Beispiel für verschachtelte Funktionen
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // gibt "Chamahk scored 5" zurück
+</pre>
+
+<h2 id="Scope_und_der_Funktionsstack">Scope und der Funktionsstack</h2>
+
+<h3 id="Rekursion">Rekursion</h3>
+
+<p>Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:</p>
+
+<ol>
+ <li>Der Funktionsname</li>
+ <li><code><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>Eine im Scope liegende Variable, die auf die Funktion referenziert.</li>
+</ol>
+
+<p>Nimmt man zum Beispiel folgende Funktion:</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // Anweisungen
+};
+</pre>
+
+<p>Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>Eine Funktion, die sich selbst aufruft, wird <em>rekursive Funktion</em> genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" ist die Schleifenbedingung
+   // do stuff
+   x++;
+}
+</pre>
+
+<p>Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" ist die Abbruchbedingung (gleich zu "!(x &lt; 10)")
+    return;
+  // do stuff
+  loop(x + 1); // der rekursive Aufruf
+}
+loop(0);
+</pre>
+
+<p>Jedoch können manche Algorithmen nicht in eine <strong>einfache</strong> Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. <a href="/de/docs/DOM">DOM</a>) einfacher rekursiv realisieren werden:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>Verglichen mit der Funktion <code>loop</code>, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.</p>
+
+<p>Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.</p>
+
+<p>Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3</pre>
+
+<h3 id="Verschachtelte_Funktionen_und_Closures">Verschachtelte Funktionen und Closures</h3>
+
+<p>Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine<em> Closure</em>. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck <em>abschließt</em>, daher der Name <em>closure</em>).</p>
+
+<p>Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.</p>
+
+<p>Zusammenfassend:</p>
+
+<ul>
+ <li>Die innere Funktion kann nur von Anweisungen der äußeren Funktion erreicht werden.</li>
+ <li>Die innere Funktion formt eine Closure: die innere Funktion kann die Argumente und Variablen der äußeren Funktion benutzen, während die äußere Funktion nicht die Argumente und Variablen der inneren Funktion nutzen kann.</li>
+</ul>
+
+<p>Im folgenden Beispiel werden innere Funktionen gezeigt:</p>
+
+<pre class="brush: js">function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // gibt 13 zurück
+b = addSquares(3, 4); // gibt 25 zurück
+c = addSquares(4, 5); // gibt 41 zurück
+</pre>
+
+<p>Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
+                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
+result = fn_inside(5);   // gibt 8 zurück
+
+result1 = outside(3)(5); // gibt 8 zurück
+</pre>
+
+<h3 id="Erhaltung_von_Variablen">Erhaltung von Variablen</h3>
+
+<p>Bemerkenswert ist, dass <code>x</code> erhalten wird, wenn <code>inside</code> zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene <code>inside</code> Funktion nicht mehr erreichbar ist.</p>
+
+<p>Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.</p>
+
+<h3 id="Mehrfach_verschachtelte_Funktionen">Mehrfach verschachtelte Funktionen</h3>
+
+<p>Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (<em>scope chaining</em>) genannt.</p>
+
+<p>Untersuche das nächste Beispiel:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+</pre>
+
+<p>In diesem Beispiel benutzt C die Variablen <code>y</code>, von B, und <code>x</code>, von A. Das kann gemacht werden weil:</p>
+
+<ol>
+ <li><code>B</code> ist eine Closure, die <code>A</code> enthält, z. B. <code>B</code> kann die Argumente und Variablen von <code>A</code> benutzen.</li>
+ <li><code>C </code>ist ein Closure, die <code>B</code> enthält.</li>
+ <li>Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.</li>
+</ol>
+
+<p>Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.</p>
+
+<h3 id="Namenskonflikte">Namenskonflikte</h3>
+
+<p>Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:</p>
+
+<pre class="brush: js">function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // gibt 20 statt 10 zurück
+</pre>
+
+<p>Der Namenskonflikt tritt beim der Anweisung <code>return x</code> auf und ist zwischen dem Parmeter <code>x</code> von <code>inside</code> und der Variable <code>x</code> von <code> outside</code>. Die Scopekette ist hier {<code>inside</code>, <code>outside</code>, globales Objekt}. Dabei bekommt <code>x</code> von <code>inside</code> eine höhere Priorität als das <code>x</code> von <code>outside</code>. und 20 wird statt der 10 zurückgegeben.</p>
+
+<h2 id="Closures">Closures</h2>
+
+<p>Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.</p>
+
+<pre class="brush: js">var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
+  var getName = function() {
+    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
+  }
+  return getName;            // gibt die innere Funktion zurück
+}
+myPet = pet('Vivie');
+
+myPet();                     // gibt "Vivie" zurück
+</pre>
+
+<p>Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' &amp;&amp; (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>Im Quelltext oben ist die <code>name</code> Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.</p>
+
+<pre class="brush: js">var getCode = (function() {
+  var secureCode = '0]Eal(eh&amp;2';    // Ein Code der nicht von Außerhalb verändert werden soll
+
+  return function () {
+    return secureCode;
+  };
+}());
+
+getCode();    // gibt secureCode zurück.
+</pre>
+
+<p>Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
+  return {
+    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
+      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
+    }
+  }
+}
+</pre>
+
+<h2 id="Einsatz_des_arguments_Objekts">Einsatz des arguments Objekts</h2>
+
+<p>Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p><code>i</code> ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion <code>arguments[0]</code>. Die Anzahl der übergebenen Argumente ist <code>arguments.length</code>.</p>
+
+<p>Mit dem <code>arguments</code> Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit <code>arguments.length</code> kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das <code>arguments</code> Objekt können dann alle Argumente gelesen werden.</p>
+
+<p>Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Die <code>arguments</code> Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine <code>length</code> Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.</p>
+</div>
+
+<p>Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.</p>
+
+<h2 id="Funktionsparameter">Funktionsparameter</h2>
+
+<p>Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.</p>
+
+<h3 id="Default-Parameter">Default-Parameter</h3>
+
+<p>In JavaScript ist der Standardwert eines Parameters <code>undefined</code>. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.</p>
+
+<p>In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter <code>undefined</code> ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument <code>b</code> übergeben wird, wird dieser <code>undefined</code> sein und die Auswertung von <code>a*b</code> wird <code>NaN</code> sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+</pre>
+
+<p>Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man <code>1</code> als Standardwert für <code>b</code> im Funktionskopf angeben:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5</pre>
+
+<p>Für mehr Details, siehe in den Referenzen unter <a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default-Parameter</a>.</p>
+
+<h3 id="Rest-Parameter">Rest-Parameter</h3>
+
+<p>Die <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-Parameter </a>Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Pfeilfunktionen">Pfeilfunktionen</h2>
+
+<p>Ein <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktions Ausdruck</a> hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den <code>this</code> Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p>
+
+<p>Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches <code>this</code>.</p>
+
+<h3 id="Kürzere_Funktionen">Kürzere Funktionen</h3>
+
+<p>In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:</p>
+
+<pre class="brush: js">var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryl­lium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map( s =&gt; s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]
+</pre>
+
+<h3 id="Lexikalisches_this">Lexikalisches <code>this</code></h3>
+
+<p>Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen <a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a> Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `<code>this`</code> as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen <code>this</code> in einer weiteren Variablen gespeichert wird.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>Alternativ kann eine <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">gebundene Funktion</a>  erstellt werden, so dass der Wert für <code>this</code> mit übergeben werden kann.</p>
+
+<p>Pfeilfunktionen nutzen den <code>this</code> Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:</p>
+
+<pre class="brush: js">function Person() {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h2 id="Vordefinierte_Funktionen">Vordefinierte Funktionen</h2>
+
+<p>JavaScript hat einige eingebaute Funktionen:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
+ <dd>
+ <p>Die <code><strong>eval()</strong></code> Methode wertet JavaScript Quelltext repräsentiert als String aus.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Die <code><strong>uneval()</strong></code> Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>Die globale <code><strong>isFinite()</strong></code> Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
+ <dd>Die <code><strong>isNaN()</strong></code> Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der <code>isNaN</code> Funktion gibt es <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Beschreibung">interessante Regeln</a>; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator <code><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.</dd>
+ <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p>Doe <code><strong>parseFloat()</strong></code> Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p>Die <code><strong>parseInt()</strong></code> Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p>Die <code><strong>decodeURI()</strong></code> Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p>Die <code><strong>decodeURIComponent()</strong></code> Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p>Die <code><strong>encodeURI()</strong></code> Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p>Die <code><strong>encodeURIComponent()</strong></code> Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Die veraltete <code><strong>escape()</strong></code> Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Die veraltete <code><strong>unescape()</strong></code> Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil <code>unescape()</code> veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}</p>
diff --git a/files/de/web/javascript/guide/grammatik_und_typen/index.html b/files/de/web/javascript/guide/grammatik_und_typen/index.html
new file mode 100644
index 0000000000..3ca2b9936b
--- /dev/null
+++ b/files/de/web/javascript/guide/grammatik_und_typen/index.html
@@ -0,0 +1,699 @@
+---
+title: Grammatik und Typen
+slug: Web/JavaScript/Guide/Grammatik_und_Typen
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}</div>
+
+<p class="summary">Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.</p>
+
+<h2 id="Grundlagen">Grundlagen</h2>
+
+<p>JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.</p>
+
+<p>JavaScript ist <strong>case-sensitiv</strong> (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den <strong>Unicode</strong>-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.</p>
+
+<pre class="brush: js notranslate">var Früh = "foobar";
+</pre>
+
+<p>Jedoch ist die Variable <code>früh</code> nicht dieselbe wie <code>Früh</code>, weil JavaScript case-sensitiv ist.</p>
+
+<p>In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">lexikalische Grammatik</a> zu finden.</p>
+
+<h2 id="Kommentare">Kommentare</h2>
+
+<p>Die Syntax von <strong>Kommentaren</strong> ist dieselbe wie in C++ und in vielen anderen Sprachen:</p>
+
+<pre class="brush: js notranslate">// Einzeiliger Kommentar
+
+/* Das ist ein langer,
+ * mehrzeiliger Kommentar
+ */
+
+/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */</pre>
+
+<p>Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.</p>
+
+<h2 id="Deklarationen">Deklarationen</h2>
+
+<p>Es gibt drei mögliche Arten, Variablen zu deklarieren:</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Deklariert eine Variable. Optional wird ein Wert initialisiert.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Deklariert eine Konstante mit Gültigkeit im aktuellen Block.</dd>
+</dl>
+
+<h3 id="Variablen">Variablen</h3>
+
+<p>Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.</p>
+
+<p>Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".</p>
+
+<p>Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> können genutzt werden.</p>
+
+<p>Beispiele für zulässige Bezeichner sind <code>Number_hits</code>, <code>temp99</code> und <code>_name.</code></p>
+
+<h3 id="Variablendeklaration">Variablendeklaration</h3>
+
+<p>Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:</p>
+
+<ul>
+ <li>Mit dem Schlüsselwort {{jsxref("Statements/var", "var")}}, wie <code>var x = 42</code>. Die Syntax kann benutzt werden, um Variablen lokal und global zu deklarieren.</li>
+ <li>Mit dem Zuweisen einer Variable, wie <code>x = 42</code>. Wenn diese Form außerhalb einer Funktion genutzt wird, wird die Variable global deklariert. Es wird eine strikte JavaScript-Warnung erzeugt. Diese Variante sollte vermieden werden.</li>
+ <li>Mit dem Schlüsselwort {{jsxref("Statements/let", "let")}} , wie <code>let x = 42</code>. Die Syntax kann benutz werden, um Variablen nur für ihren Scope (Gültigkeitsbereich) zu deklarieren. Siehe <a href="#Variablen Scope">Variablen Scope</a>.</li>
+</ul>
+
+<h3 id="Variablen_auswerten">Variablen auswerten</h3>
+
+<p>Eine Variable, die mit <code>var</code> ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.</p>
+
+<p>Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine <code>let</code>-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var a;
+console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
+
+console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
+var b;
+
+console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
+
+let x
+console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
+
+console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
+let y;
+</pre>
+
+<p><code>undefined</code> kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable <code>input</code> kein Wert zugewiesen worden und das <code><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>-Statement wird somit <code>true</code> ausgeben.</p>
+
+<pre class="brush: js notranslate">var input;
+if(input === undefined){
+  macheDas();
+} else {
+  macheDasAndere();
+}
+</pre>
+
+<p><code>undefined</code> verhält sich wie ein <code>false</code>, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion <code>myFunction</code> ausgeführt, weil das <code>myArray</code> Element <code>undefined</code> ist:</p>
+
+<pre class="brush: js notranslate">var myArray = [];
+if (!myArray[0]) myFunction();
+</pre>
+
+<p><code>undefined</code> wird zu <code>NaN</code> (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:</p>
+
+<pre class="brush: js notranslate">var a;
+a + 2;  //NaN</pre>
+
+<p>Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie <code>0</code> und in booleschem Kontext wie <code>false</code>:</p>
+
+<pre class="brush: js notranslate">var n = null;
+console.log(n * 32);  // wird 0 in die Konsole eintragen
+</pre>
+
+<h3 id="Variablen_Scope"><a id="Variablen Scope" name="Variablen Scope"></a>Variablen Scope</h3>
+
+<p>Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine <code>globale Variable</code> genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund <code>lokale Variable</code> genannt.</p>
+
+<p>JavaScript hatte vor ECMAScript 2015 keinen <a href="/de/docs/JavaScript/Guide/Statements#Block_Statement">Block-Anweisungs</a> Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von <code>x</code> die Funktion ist bzw. der globale Kontext, in dem <code>x</code> deklariert wurde, und nicht der Block, in diesem Fall die <code>if</code> Anweisung, selbst.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+</pre>
+
+<p>Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte <code>let</code> Deklaration benutzt.</p>
+
+<pre class="brush: js notranslate">if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+</pre>
+
+<h3 id="Variablen_hochziehen_hoisting">Variablen hochziehen (<strong>hoisting</strong>)</h3>
+
+<p>Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als <strong>hoisting</strong> (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert <code>undefined</code> zurückgeben. So wird immer <code>undefined</code> zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.</p>
+
+<pre class="brush: js notranslate">/**
+ * Beispiel 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Beispiel 2
+ * wird den Wert undefined zurückgeben
+ */
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+</pre>
+
+<p>Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:</p>
+
+<pre class="brush: js notranslate">/**
+ * Beispiel 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Beispiel 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+</pre>
+
+<p>Wegen des Hochziehens sollten alle <code>var</code> Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.</p>
+
+<p>In ECMAScript 2015 wird <code>let</code> (bzw. <code>const</code>) <strong>nicht</strong> an den Anfang eines Blocks <strong>hochgezogen</strong>. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.</p>
+
+<pre class="brush: js notranslate">console.log(x); // ReferenceError
+let x = 3;</pre>
+
+<h3 id="Funktionen_hochziehen_hoisting">Funktionen hochziehen (<strong>hoisting</strong>)</h3>
+
+<p>Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.</p>
+
+<pre class="brush: js notranslate">/* Funktionsdeklaration */
+
+foo(); // "bar"
+
+function foo() {
+   console.log("bar");
+}
+
+
+/* Funktionsausdruck */
+
+baz(); // TypeError: baz ist keine Funktion
+
+var baz = function() {
+   console.log("bar2");
+};
+</pre>
+
+<h3 id="Globale_Variablen">Globale Variablen</h3>
+
+<p>Globale Variablen sind faktisch Eigenschaften des <em>globalen Objekts.</em> In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax <code>window.<em>variable</em></code> eingesetzt wird.</p>
+
+<p>Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable <code>phoneNumber</code>, die in einem Dokument deklariert wurde, von einem iframe mit <code>parent.phoneNumber</code> erreicht werden.</p>
+
+<h3 id="Konstanten">Konstanten</h3>
+
+<p>Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.</p>
+
+<pre class="brush: js notranslate">const PI = 3.14;
+</pre>
+
+<p>Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.</p>
+
+<p>Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für <code>let</code> Blockscope Variablen. Wenn das Schüsselwort <code>const</code> weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.</p>
+
+<p>Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">// DAS WIRD ZU EINEM ERROR FÜHREN
+function f() {};
+const f = 5;
+
+// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+</pre>
+
+<p>Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.</p>
+
+<pre class="brush: js notranslate"><code>const MY_OBJECT = {"key": "value"};
+MY_OBJECT.key = "otherValue";</code></pre>
+
+<p>Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.</p>
+
+<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
+</pre>
+
+<h2 id="Datenstrukturen_und_-typen">Datenstrukturen und -typen</h2>
+
+<h3 id="Datentypen">Datentypen</h3>
+
+<p>Der neuste ECMAScript Standard definiert sieben Datentypen:</p>
+
+<ul>
+ <li>Sechs Datentypen sind {{Glossary("Primitive", "primitive")}} Datentypen:
+  <ul>
+   <li>{{Glossary("Boolean")}}. <code>true</code> und <code>false</code>.</li>
+   <li>{{Glossary("null")}}. Eine spezielles Schlüsselwort, was einen null-Wert kennzeichnet. Weil JavaScript zwischen Groß- und Kleinschreibung unterscheidet, ist <code>null</code> nicht das selbe wie <code>Null</code>, <code>NULL</code> oder einen andere Variante.</li>
+   <li>{{Glossary("undefined")}}. Ein Eigenschaft, wessen Wert nicht Definiert ist.</li>
+   <li>{{Glossary("Number")}}. Eine ganze Zahl oder Fließkommazahl. Zum Beispiel: <code>42</code> oder <code>3.14159</code>.</li>
+   <li>{{Glossary("String")}}. Eine Sequenz von Zeichen, die einen Textwert repräsentieren Zum Beispiel: "Howdy".</li>
+   <li>{{Glossary("Symbol")}} (neu in ECMAScript 2015). Ein Datentyp, bei dem Instanzen einzigartig und unveränderlich sind.</li>
+  </ul>
+ </li>
+ <li>und {{Glossary("Object")}}</li>
+</ul>
+
+<p>Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.</p>
+
+<h3 id="Datentypkonvertierungen">Datentypkonvertierungen</h3>
+
+<p>JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:</p>
+
+<pre class="brush: js notranslate">var answer = 42;
+</pre>
+
+<p>Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:</p>
+
+<pre class="brush: js notranslate">answer = "Thanks for all the fish...";
+</pre>
+
+<p>Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.</p>
+
+<p>In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:</p>
+
+<pre class="brush: js notranslate">x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+</pre>
+
+<p>In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:</p>
+
+<pre class="brush: js notranslate">"37" - 7 // 30
+"37" + 7 // "377"
+</pre>
+
+<h3 id="Konvertieren_von_Zeichenketten_zu_Zahlen">Konvertieren von Zeichenketten zu Zahlen</h3>
+
+<p>In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei <code>parseInt</code> mit angibt. Der <em>radix</em> Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.</p>
+
+<p>Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:</p>
+
+<pre class="brush: js notranslate">"1.1" + "1.1" // "1.11.1"
+(+"1.1") + (+"1.1") // 2.2
+// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.</pre>
+
+<h2 id="Literale">Literale</h2>
+
+<p>Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:</p>
+
+<ul>
+ <li>{{anch("Array Literale")}}</li>
+ <li>{{anch("Boolean Literale")}}</li>
+ <li>{{anch("Gleitkomma Literale")}}</li>
+ <li>{{anch("Ganze Zahlen")}}</li>
+ <li>{{anch("Objekt Literale")}}</li>
+ <li>{{anch("RegExp Literale")}}</li>
+ <li>{{anch("String Literale")}}</li>
+</ul>
+
+<h3 id="Array_Literal">Array Literal</h3>
+
+<p>Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.</p>
+
+<p>Das folgende Beispiel erstellt das <code>coffees</code> Array mit drei Elementen und der Länge drei:</p>
+
+<pre class="brush: js notranslate">var coffees = ["French Roast", "Colombian", "Kona"];
+</pre>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den <a href="/de/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">Einsatz von Objektinitialisierern</a>.</p>
+</div>
+
+<p>Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.</p>
+
+<p>Array Literale sind ebenfalls <code>Array</code> Objekte. Für mehr Details siehe {{jsxref("Array")}} und <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections.</a></p>
+
+<h4 id="Extra_Kommas_in_Array_Literalen">Extra Kommas in Array Literalen</h4>
+
+<p>Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem <code>undefined</code> Element erstellt. Das folgende Beispiel erstellt das <code>fish</code> Array:</p>
+
+<pre class="brush: js notranslate">var fish = ["Lion", , "Angel"];
+</pre>
+
+<p>Dieses Array hat zwei Elemente mit Werten und ein leeres Element (<code>fish[0]</code> ist "Lion",<code> fish[1]</code> ist <code>undefined</code> und <code>fish[2]</code> ist "Angel").</p>
+
+<p>Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein <code>myList[3]</code>. Alle weiteren Kommas in der Liste führen zu einem neuen Element.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.</p>
+</div>
+
+<pre class="brush: js notranslate">var myList = ['home', , 'school', ];
+</pre>
+
+<p>Im folgenden Beispiel hat das Array vier Elemente und <code>myList[0]</code> und <code>myList[2]</code> sind nicht spezifiziert.</p>
+
+<pre class="brush: js notranslate">var myList = [ , 'home', , 'school'];
+</pre>
+
+<p>Im folgenden Beispiel hat das Array vier Elemente und <code>myList[1]</code> und <code>myList[3]</code> sind nicht spezifiziert. <strong>Nur das letzte Komma wird ignoriert.</strong></p>
+
+<pre class="brush: js notranslate">var myList = ['home', , 'school', , ];
+</pre>
+
+<p>Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit <code>undefined</code> deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.</p>
+
+<h3 id="Boolean_Literale">Boolean Literale</h3>
+
+<p>Der Boolean Typ hat zwei Literale: <code>true</code> und <code>false</code>.</p>
+
+<p>Man sollte die primitiven Werte <code>true</code> und <code>false</code> jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.</p>
+
+<h3 id="Numerische_Literale">Numerische Literale</h3>
+
+<p>Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.</p>
+
+<ul>
+ <li>Eine Dezimalzahlenliteral besteht aus einer Sequenz von Ziffern ohne eine führende 0.</li>
+ <li>Eine führende 0 oder 0o (oder 0O) bei einem Zahlenliteral deutet eine Oktalzahl an. Oktalzahlen können nur die Ziffern 0 bis 7 enthalten.</li>
+ <li>Ein führendes 0x (oder 0X) deutet eine Hexadezimalzahl an. Hexadezimale Ganzzahlen können als Stellen Ziffern (0 - 9) und die Buchstaben a - f bzw. A - F enthalten. (Die Schreibweise des Buchstaben ändert nicht den Wert der Stelle. Z. B. 0xa = 0xA = 10 und 0xf = 0xF = 15.)</li>
+ <li>Ein führendes 0b (oder 0B) deutet eine binäre Ganzzahl an. Binäre Ganzzahlen können nur die Ziffern 0 und 1 enthalten.</li>
+</ul>
+
+<p>Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:</p>
+
+<pre class="eval notranslate">0, 117 und -345 (dezimal, Basis 10)
+015, 0001 und -0o77 (oktal, Basis 8)
+0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
+0b11, 0b0011 und -0b11 (binär, Basis 2)
+</pre>
+
+<p>Für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">numerische Literale in der Lexikalischen Grammatik Referenz</a>.</p>
+
+<h3 id="Gleitkomma_Literale">Gleitkomma Literale</h3>
+
+<p>Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:</p>
+
+<ul>
+ <li>Eine dezimale ganze Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann.</li>
+ <li>Einen Dezimalpunkt (".").</li>
+ <li>Eine Nachkommazahl (weitere Dezimalzahl).</li>
+ <li>Einen Exponenten.</li>
+</ul>
+
+<p>Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.</p>
+
+<p>Kurz und knapp sieht die Syntax folgendermaßen aus:</p>
+
+<pre class="eval notranslate">[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
+</pre>
+
+<p>Zum Beispiel:</p>
+
+<pre class="eval notranslate">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="Objekt_Literale">Objekt Literale</h3>
+
+<p>Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.</p>
+
+<p>Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des <code>car</code> Objektes definiert eine Eigenschaft <code>myCar</code> und beschreibt diese mit einem neuen String "<code>Saturn</code>". Am zweiten Element, der <code>getCar</code> Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion <code>carTypes("Honda")</code> zugewiesen. Das dritte Element, die <code>special</code> Eigenschaft, benutzt eine existierende Variable <code>sales</code>.</p>
+
+<pre class="brush: js notranslate">var sales = "Toyota";
+
+function carTypes(name) {
+  if (name === "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = {
+  myCar: "Saturn",
+  getCar: carTypes("Honda"),
+  special: sales
+};
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+</pre>
+
+<p>Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.</p>
+
+<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+</pre>
+
+<p>Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("<code>[]</code>").</p>
+
+<pre class="brush: js notranslate">var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!</pre>
+
+<h4 id="Erweiterte_Objekt_Literale">Erweiterte Objekt Literale</h4>
+
+<p>In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für <code>foo: foo</code> Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.</p>
+
+<pre class="brush: js notranslate">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Bitte beachten:</p>
+
+<pre class="brush: js notranslate">var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+</pre>
+
+<h3 id="RegExp_Literale">RegExp Literale</h3>
+
+<p>Ein RegExp Literal (welcher <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">im Detail</a> später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:</p>
+
+<pre class="brush: js notranslate">var re = /ab+c/;</pre>
+
+<h3 id="String_Literale">String Literale</h3>
+
+<p>Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:</p>
+
+<pre class="brush: js notranslate">"foo"
+'bar'
+"1234"
+"eine Zeile \n weitere Zeile"
+"John's cat"
+</pre>
+
+<p>Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die <code>String.length</code> Eigenschaft mit einem String Literal benutzen:</p>
+
+<pre class="brush: js notranslate">console.log("John's cat".length)
+// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
+// In diesem Fall 10.
+</pre>
+
+<p>In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (<a href="https://de.wikipedia.org/wiki/Gravis_(Typografie)">Gravis</a>) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den <em>String Interpolations</em> Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.</p>
+
+<pre class="brush: js notranslate">// Standardliteral für die String erstellung
+`In JavaScript '\n' is a line-feed.`
+
+// Mehrzellige Strings
+`In JavaScript ist das
+ nicht erlaubt.`
+
+// String Interpolation
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// Erstellung einer HTTP Anfrage.
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.</p>
+
+<h4 id="Einsatz_von_Sonderzeichen_in_Strings">Einsatz von Sonderzeichen in Strings</h4>
+
+<p>Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:</p>
+
+<pre class="brush: js notranslate">"eine Zeile \n nächste Zeile"
+</pre>
+
+<p>Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:</p>
+
+<table class="standard-table">
+ <caption>Table: JavaScript Sonderzeichen</caption>
+ <thead>
+  <tr>
+   <th scope="col">Zeichen</th>
+   <th scope="col">Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Null Byte</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Form feed</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>New line</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Carriage return</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tab</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Vertical tab</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Einfache Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Doppelte Anführungszeichen</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Backslash Zeichen</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Das Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (<em>XXX</em>) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Zeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (<em>XX</em>) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>Die Unicode Zeichen, die mit vier Hexadezimalziffern <em>XXXX</em> beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape Sequenzen</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Escaping_Zeichen">Escaping Zeichen</h4>
+
+<p>Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.</p>
+
+<p>Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch <em>escaping</em> der Anführungszeichen genannt. Ein Beispiel:</p>
+
+<pre class="brush: js notranslate">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>Das Ergebnis ist:</p>
+
+<pre class="eval notranslate">He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+
+<p>Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad <code>c:\temp</code> wie folgt geschrieben werden:</p>
+
+<pre class="brush: js notranslate">var home = "c:\\temp";
+</pre>
+
+<p>Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.</p>
+
+<pre class="brush: js notranslate">var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiple lines.
+</pre>
+
+<p>JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:</p>
+
+<pre class="brush: js notranslate">var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo."
+</pre>
+
+<p>ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!</p>
+
+<pre class="brush: js notranslate">var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+</pre>
+
+<h2 id="Mehr_Informationen">Mehr Informationen</h2>
+
+<p>Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:</p>
+
+<ul>
+ <li><a href="/de/docs/web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung">Kontrollfluss und Fehlerbehandlung</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen">Schleifen und Iterationen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Funktionen">Funktionen</a></li>
+ <li><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a></li>
+</ul>
+
+<p>Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}</p>
diff --git a/files/de/web/javascript/guide/index.html b/files/de/web/javascript/guide/index.html
new file mode 100644
index 0000000000..8e9fcfa13b
--- /dev/null
+++ b/files/de/web/javascript/guide/index.html
@@ -0,0 +1,130 @@
+---
+title: Guide
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p class="summary">Der JavaScript Guide stellt einen Überblick zu <a href="/de/docs/Web/JavaScript">JavaScript</a> bereit und zeigt wie man die Sprache verwenden kann. Für detaillierte Informationen über einzelne Sprachteile JavaScripts gibt es die <a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz</a>.</p>
+
+<h2 id="Kapitel">Kapitel</h2>
+
+<p>Dieser Guide ist in mehrere Kapitel aufgeteilt:</p>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Einführung">Einführung</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Einführung#Wo_finden_Sie_Informationen_zu_JavaScript_.3F">Über diesen Guide</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Was_ist_JavaScript">Über JavaScript</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#JavaScript_and_Java">JavaScript und Java</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Erste_Schritte_mit_JavaScript">Tools</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Einführung#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen">Grammatik und Typen</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Basics">Grundlegender Syntax &amp; Kommentare</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Declarations">Deklarationen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Variable_scope">Variablen-Scope</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Variable_hoisting">Variablen-Hoisting</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Data_structures_and_types">Datenstrukturen und Typen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen#Literals">Literale</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung">Kontrollfluss und Fehlerbehandlung</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#if...else_statement">if...else</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#switch_statement">switch</a></code><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Utilizing_Error_objects"><code>Error</code>-Objekte</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung#Promises">Promises</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen">Schleifen und Iteration</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for_Anweisung">for</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#while_Anweisung">while</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#do...while_Anweisung">do...while</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#break_Anweisung">break</a>/<a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#continue_Anweisung">continue</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for...in_Anweisung">for..in</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen#for...of_Anweisung">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Funktionen">Funktionen</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Funktionen#Defining_functions">Funktionen definieren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Calling_functions">Funktionen aufrufen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Function_scope">Scope von Funktionen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Closures">Closures</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Using_the_arguments_object">Argumente</a> &amp; <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Function_parameters">Parameter</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Funktionen#Arrow_functions">Arrow-Funktionen</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Assignment_operators">Zuweisungen </a>&amp; <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Comparison_operators">Vergleiche</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Arithmetic_operators">Arithmetische Operatoren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Bitwise_operators">Bitwise</a> &amp; <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Logical_operators">logische Operatoren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren#Conditional_(ternary)_operator">Bedingter (ternärer) Operator</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates">Zahlen und Datumsangaben</a></span><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Zahlen-Literale</a>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code>-Objekt</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Text_formatting">Textformatierungen</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String-Literale</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code>-Objekt</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template Literale</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalisierung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">Reguläre Ausdrücke</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Indexed_collections">Indexierte Kollektionen</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections">Kollektionen mit Schlüsseln</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten">Mit Objekten arbeiten</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Objects_and_properties">Objekte und Eigenschaften</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Creating_new_objects">Objekte erstellen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Defining_methods">Methoden definieren</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten#Defining_getters_and_setters">Getter und Setter</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells">Feinheiten des Objektmodells</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Class-based_vs._prototype-based_languages">Prototypen-basierte OOP</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Creating_the_hierarchy">Objekthierarchien erstellen</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells#Property_inheritance_revisited">Vererbung</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Using_promises">Promises</a></span>
+
+  <p><a href="/de/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Garantien</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Chaining">Verkettung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Fehlerübertragung</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Composition">Komposition</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Using_promises#Timing">Zeitablauf</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren">Iteratoren und Generatoren</a></span>
+  <p><a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Iterators">Iterators</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Iterables">Iterables</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren#Generators">Generators</a></p>
+ </li>
+ <li><span><a href="/de/docs/Web/JavaScript/Guide/Meta_programming">Meta-Programmierung</a></span>
+  <p><code><a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handler und Traps</a><br>
+   <a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Widerrufbare Proxies</a><br>
+   <code><a href="/de/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/de/web/javascript/guide/indexed_collections/index.html b/files/de/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..fa47c0841b
--- /dev/null
+++ b/files/de/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,448 @@
+---
+title: Indexed collections
+slug: Web/JavaScript/Guide/Indexed_collections
+tags:
+  - Guide
+  - Handbuch
+  - JavaScript
+  - Method
+  - Méthode
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">Dieses Kapitel beschreibt Datensammlungen, die nach einem Indexwert sortiert sind. Diese beinhalten Arrays und Array-ähnliche Konstrukte, wie {{jsxref("Array")}} Objekte {{jsxref("TypedArray")}} Objekte.</p>
+
+<h2 id="Array_Objekt"><code>Array</code> Objekt</h2>
+
+<p>Ein <em>Array</em> ist ein sortiertes Set an Werten, die mit einem Namen und einem Index referenziert werden. Zum Beispiel könnte ein Array mit dem Namen <code>emp</code> Mitarbeiternamen enthalten, die über ihre Mitarbeiternummer indexiert sind. <code>emp[1]</code> würde somit Mitarbeiter Eins sein, <code>emp[2]</code> ist Mitarbeiter Zwei, und so weiter.</p>
+
+<p>JavaScript hat keinen expliziten Array-Datentyp, aber es ist möglich, das vordefinierte <code>Array</code> Objekt und dessen Methoden zu verwenden, um mit Arrays zu arbeiten. Das <code>Array</code> Objekt verfügt über Methoden, um Arrays auf unterschiedliche Weisen zu manipulieren. Es hat ein Property um die Arraylänge zu bestimmen, und andere Properties für die Verwendung von Regular Expressions.</p>
+
+<h3 id="Ein_Array_erstellen">Ein Array erstellen</h3>
+
+<p>Die folgenden Statements erstellen äquivalente Arrays:</p>
+
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+
+<p><code>element0, element1, ..., elementN</code> ist eine Liste von Werten für die Elemente im Array. Das Array wird mit den Werten als Elemente initialisiert. Das <code>length</code> Property des Arrays entspricht dann der Anzahl Argumente.</p>
+
+<p>Die Bracket-Syntax wird als "Array-Literal" oder "Array-Initialisierer" bezeichnet. Es ist eine kürzere Form der Array-Erstellung und wird allgemein bevorzugt. Siehe <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">Array literals</a> für weitere Details.</p>
+
+<p>Um ein leeres Array mit einer Länge von mehr als Null zu erstellen, kann eine der folgenden Statements verwendet werden:</p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// Folgendes hat den selben Effekt.
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> im obigen Code, <code>arrayLength</code> muss ein <code>Number</code> Objekt sein, ansonsten wird ein Array mit einem Element (dem übergebenen Wert) erstellt. Ein Aufruf von <code>arr.length</code> wird <code>arrayLength</code> zurückgeben, aber das Array besteht aus leeren (<code>undefined</code>) Elementen. Eine {{jsxref("Statements/for...in","for...in")}} Schleife wird keine der Elemente aus dem Array zurückgeben.</p>
+</div>
+
+<p>Neben der Zuweisung an eine neue Variable, wie im Beispiel oben gezeigt, können Arrays auch als Property eines neuen oder existierenden Objekts zugewiesen werden:</p>
+
+<pre class="brush: js">var obj = {};
+// Weist das Array einem Property des bestehenden Objekts 'obj'
+// zu.
+obj.prop = [element0, element1, ..., elementN];
+
+// Weist das Array einem Property auf dem neuen Objekt 'obj'
+// zu.
+var obj = {prop: [element0, element1, ...., elementN]};
+</pre>
+
+<p>Wenn ein Array mit einem einzelnen <code>Number</code> Objekt erstellt werden soll, muss die Bracket-Syntax verwendet werden. Wenn ein einzelnes <code>Number</code> Objekt an den/der Array() Konstruktor oder Funktion übergeben wird, wird es als <code>arrayLength</code> und nicht als einzelnes Element interpretiert.</p>
+
+<pre class="brush: js">var arr = [42];      // Erstellt ein Array mit genau einem
+                     // Element: der Nummer 42.
+
+var arr = Array(42); // Erstellt ein Array ohne Elemente und
+                     // arr.length wird als 42 gesetzt; dies
+                     // ist äquivalent zu:
+var arr = [];
+arr.length = 42;
+</pre>
+
+<p>Wenn <code>Array(N)</code> aufgerufen wird und <code>N</code> keine Ganzzahl ist, wird ein <code>RangeError</code> geworfen. Das folgende Beispiel illustriert dieses Verhalten:</p>
+
+<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
+                       // "Ungültige Array-Länge"</pre>
+
+<p>Wenn im Code Arrays mit einzelnen Elements eines willkürlichen Datentyp verlangt sind, ist es sicherer, Array-Literals zu verwenden, oder zuerst ein leeres Array zu erstellen und dann das einzelne Element hinzuzufügen.</p>
+
+<h3 id="Ein_Array_abfüllen">Ein Array abfüllen</h3>
+
+<p>Ein Array kann abgefüllt werden, indem dessen Elemente mit Werten abgefüllt werden:</p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = 'Casey Jones';
+emp[1] = 'Phil Lesh';
+emp[2] = 'August West';
+</pre>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> Wenn ein Wert dem Array-Operator übergeben wird, der kein Integer ist, wie im obigen Code, wird ein Property auf dem Array-Objekt erstellt, statt als Array-Element.</p>
+
+<p>Der Array-Operator ist die Rechteckige Klammer nach der Array-Variable.</p>
+</div>
+
+<pre class="brush: js">var arr = [];
+arr[3.4] = 'Oranges';
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>Arrays können auch bei der Erstellung abgefüllt werden:</p>
+
+<pre class="brush: js">var myArray = new Array('Hello', myVar, 3.14159);
+var myArray = ['Mango', 'Apple', 'Orange'];
+</pre>
+
+<h3 id="Array-Elemente_referenzieren">Array-Elemente referenzieren</h3>
+
+<p>Ein Element in einem Array kann mit dessen Ordinalzahl (Index) referenziert werden. Beispielweise wird der folgende Array erstellt:</p>
+
+<pre class="brush: js">var myArray = ['Earth', 'Wind', 'Fire'];
+</pre>
+
+<p>Das erste Element kann mit <code>myArray[0]</code>, und das zweite Element des Arrays mit <code>myArray[1]</code> referenziert werden. Der Index der Elemente beginnt mit Null.</p>
+
+<div class="note">
+<p><strong>Bemerkung :</strong> Der Array-Operator (Rechteckige Klammer) wird auch für den Zugriff auf die Properties des Arrays (Arrays sind in JavaScript auch Objekte) verwendet. Beispielsweise:</p>
+</div>
+
+<pre class="brush: js">var arr = ['one', 'two', 'three'];
+arr[2];                            // three
+arr['length'];                     // 3
+</pre>
+
+<h3 id="Das_length_Property_verstehen">Das length Property verstehen</h3>
+
+<p>Auf dem Implementierungslevel, Arrays in JavaScript legen ihre Elemente als normale Properties eines Objekts (dem Array selbst) mit dessen Index als Property-Name ab. Das <code>length</code> Property ist speziell; Es gibt immer den Index des letzen Elements plus Eins (im folgenden Beispiel hat Dusty den Index 30, also gibt <code>cats.length</code> 30 + 1 zurück) zurück. Array-Indexe starten in JavaScript immer mit 0 und nicht mit 1. Dies bedeutet, dass das <code>length</code> Property immer um Eins grösser ist, als der höchste Index im Array:</p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+console.log(cats.length); // 31
+</pre>
+
+<p>Das <code>length</code> Property kann auch beschrieben werden. Wird ein Wert zugewiesen, der kleiner ist, als die Anzahl Elemente im Array, wird das Array auf die angegebene Grösse geschrumpft; das Array wird geleert, wenn 0 zugewiesen wird:</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // Loggt "Dusty, Misty" - Twiggy wurde
+                   // entfernt.
+
+cats.length = 0;
+console.log(cats); // Loggt nichts; Das 'cats' Array ist leer.
+
+cats.length = 3;
+console.log(cats); // Loggt [undefined, undefined, undefined].
+</pre>
+
+<h3 id="Iteration_über_Arrays">Iteration über Arrays</h3>
+
+<p>Eine gebräuchliche Operation ist die Iteration über die Werte eines Arrays, um jedes Element auf eine Weise zu verarbeiten. Die einfachste Variate ist:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>Wenn es ausgeschlossen ist, dass eines der Elemente im Array in einem Boolean-Kontext als <code>false</code> evaluiert wird — beispielsweise, wenn es nur aus <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> Knoten besteht — kann ein effizienterer Ausdruck verwendet werden:</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Verarbeite das div auf irgendeine Weise. */
+}
+</pre>
+
+<p>Dies vermeidet den Overhead bei der Überprüfung der Array-Länge und  weist der <code>div</code> Variable den aktuellen Wert des Schleifendurchlaufs sofort zu.</p>
+
+<p>Die {{jsxref("Array.forEach", "forEach()")}} Methode erlaubt eine andere Variate zur Iteration über ein Array:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+</pre>
+
+<p>Die Funktion, die <code>forEach</code> übergeben wird, wird für jedes Element im Array ausgeführt, wobei das Element als Argument der Funktion übergeben wird. Elemente ohne Wert (<code>undefined</code>) werden von <code>forEach</code> nicht iteriert.</p>
+
+<p>Elemente ohne Wert werden von <code>forEach</code> nur übersprungen, wenn sie nicht manuell zugewiesen wurden:</p>
+
+<pre class="brush: js">var array = ['first', 'second', , 'fourth'];
+
+// Gibt ['first', 'second', 'fourth'] zurück.
+array.forEach(function(element) {
+  console.log(element);
+})
+
+if (array[2] === undefined) { // true
+  console.log('array[2] is undefined');
+}
+
+var array = ['first', 'second', undefined, 'fourth'];
+
+// Gibt ['first', 'second', undefined, 'fourth'] zurück.
+array.forEach(function(element) {
+  console.log(element);
+})</pre>
+
+<p>Weil JavaScript Elemente als normale Objekt-Properties abgelegt werden, ist es nicht ratsam Arrays mit {{jsxref("Statements/for...in","for...in")}} zu iterieren, weil normale Elemente plus alle aufzählbaren (enumerable) Properties aufgelistet werden.</p>
+
+<h3 id="Array-Methoden">Array-Methoden</h3>
+
+<p>Das {{jsxref("Array")}} Objekt verfügt über folgende Methoden:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} hängt zwei Arrays aneinander und gibt das kombinierte Array zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray = myArray.concat('a', 'b', 'c');
+// myArray ist nun ["1", "2", "3", "a", "b", "c"].
+</pre>
+
+<p>{{jsxref("Array.join", "join(deliminator = ',')")}} kombiniert alle Elemente eines Arrays in einen String mit einem Delimiter.</p>
+
+<pre class="brush: js">var myArray = new Array('Earth', 'Wind', 'Fire');
+var list = myArray.join(' - '); // list ist
+                                // "Earth - Wind - Fire".
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} fügt eines oder mehrere Elemente an ein Array und gibt den Wert des neuen <code>length</code> Property zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2');
+myArray.push('3'); // myArray ist nun ["1", "2", "3"].
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} entfernt das letzte Element des Arrays und gibt es zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var last = myArray.pop();
+// myArray ist nun ["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} entfernt das erste Element des Arrays und gibt es zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var first = myArray.shift();
+// myArray ist nun ["2", "3"], first = "1"
+</pre>
+
+<p>{{jsxref("Array.unshift", "unshift()")}} fügt eines oder mehrere Elemente an den Anfang des Arrays und gibt den Wert des neuen <code>length</code> Property zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.unshift('4', '5');
+// myArray wird ["4", "5", "1", "2", "3"].</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extrahiert einen Ausschnitt des Arrays und gibt ein neues Array zurück.</p>
+
+<pre class="brush: js">var myArray = new Array('a', 'b', 'c', 'd', 'e');
+myArray = myArray.slice(1, 4); // Beginnt bei Index 1 und
+                               // extrahiert alle Elemente bis
+                               // Index 3 und gibt somit
+                               // [ "b", "c", "d"] zurück.
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} entfernt einen Teil des Arrays und ersetzt sie (optional). Der rückgegebene Wert entspricht den entfernten Elementen.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3', '4', '5');
+myArray.splice(1, 3, 'a', 'b', 'c', 'd');
+// myArray ist nun ["1", "a", "b", "c", "d", "5"].
+// Dieser Code startet mit Index 1 (wo '2' war), entfernt dort
+// 3 Elemente, und fügt die Werte 'a' bis '5' ein.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} kehrt die Reihenfolge der Array-Elemente um; das erste Element ist neu das letzte und das letzte Element ist nun das erste.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.reverse();
+// Kehrt die Reihenfolge der Array-Elemente um.
+// myArray = ["3", "2", "1"]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} sortiert die Elemente im Array.</p>
+
+<pre class="brush: js">var myArray = new Array('Earth', 'Wind', 'Fire');
+myArray.sort();
+// Sortiert das Array.
+// myArray = ["Earth", "Fire", "Wind"]
+</pre>
+
+<p><code>sort()</code> kann auch eine Callback-Funktion verwenden, um zu bestimmen, wie die Elemente miteinander verglichen werden sollen. Die Funktion vergleicht zwei Werte und gibt einen von drei Werten zurück:</p>
+
+<p>Beispielsweise wird der folgende Code das Array nach dem letzten Buchstaben des Strings sortieren:</p>
+
+<pre class="brush: js">var sortFn = function(a, b) {
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn);
+// Sortiert das Array nach dem letzten Buchstaben.
+// myArray = ["Wind","Fire","Earth"]</pre>
+
+<ul>
+ <li>Wenn <code>a</code> kleiner ist als <code>b</code>, -1 (oder eine andere negative Zahl) wird zurückgegeben</li>
+ <li>Wenn <code>a</code> ist grösser als <code>b</code>, 1 (oder eine andere positive Zahl) wird zurückgegeben</li>
+ <li>Wenn <code>a</code> und <code>b</code> äquivalent sind, wird 0 zurückgegeben.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} durchsucht das Array nach <code>searchElement</code> und gibt den Index des ersten Treffers zurück.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b')); // Loggt 1.
+// Nochmals, die Suche beginnt ab dem Element mit dem Index 2.
+console.log(a.indexOf('b', 2)); // Loggt 3.
+console.log(a.indexOf('z')); // Loggt -1, weil 'z' nicht
+                             // gefunden wurde.
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} funktioniert wie <code>indexOf</code>, aber startet die Suche am Ende des Arrays.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b')); // Loggt 5.
+// Startet die Suche ab dem Element mit dem Index 4.
+console.log(a.lastIndexOf('b', 4)); // Loggt 1.
+console.log(a.lastIndexOf('z')); // Loggt -1.
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} führt <code>callback</code> für jedes Element aus.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(function(element) { console.log(element); });
+// Loggt jedes Element.
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} gibt ein neues Array zurück, aus dem Rückgabewert der <code>callback</code> Funktion.</p>
+
+<pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // Loggt ['A', 'B', 'C'].
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} gibt ein Array zurück, das aus allen Elementen besteht, bei denen die <code>callback</code> Funtion <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item === 'number'; });
+console.log(a2); // Loggt [10, 20, 30].
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} gibt <code>true</code> zurück, wenn die <code>callback</code> Funktion für jedes Element auch <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // Loggt true.
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // Loggt false.
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} gibt <code>true</code> zurück, wenn die <code>callback</code> Funktion für alle Elemente mindestens einmal <code>true</code> zurückgibt.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // Loggt true.
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // Loggt true.
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // Loggt false.
+</pre>
+
+<p>Die obige Methoden, die eine <code>callback</code> Funktion als Argument verlangen sind als <em>Iterative Methoden</em> bekannt, weil sie über das ganze Array auf irgendeine Weise iterieren. Jede der Methoden nimmt ein optionales zweites Argument <code>thisObject</code>. Wenn <code>thisObject</code> übergeben wird, wird es im Kontext der <code>callback</code> Funktion als <code>this</code> behandelt. Falls es nicht übergeben wird, wie es auch der Fall ist, wenn eine Funktion ausserhalb eines expliziten Objektkontext aufgerufen wird, referenziert this das globale Objekt ({{domxref("window")}}).</p>
+
+<p>Die <code>callback</code> Funktion wird jeweils mit drei Argumenten aufgerufen. Das erste ist der Wert des aktuellen Elements in der Iteration, das zweite ist der Index des Elements und das dritte ist eine Referenz auf das Array selbst. JavaScript Funktionen ignorieren Parameter, die in der Liste nicht benannt werden, es ist somit sicher, eine Funktion als <code>callback</code> zu definieren, die nur ein einzelnes Argument nimmt, zum Beispiel <code>alert</code>.</p>
+
+<p> </p>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} wendet <code>callback(firstValue, secondValue)</code> an, um die Liste auf einen einzelnen Wert zu reduzieren.</p>
+
+<pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second) { return first + second; }, 0);
+console.log(total) // Loggt 60.
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} funktioniert wie <code>reduce()</code>, aber startet am Ende des Arrays.</p>
+
+<p><code>reduce</code> und <code>reduceRight</code> sind die unauffälligsten iterativen Array-Methoden. Sie sollten dazu verwendet werden, rekursiv jeweils zwei Werte miteinander zu kombinieren, bis nur noch ein einzelner Wert verbleibt.</p>
+
+<h3 id="Mehrdimensionale_Arrays">Mehrdimensionale Arrays</h3>
+
+<p>Arrays können verschachtelt sein. Das bedeutet, dass ein Array ein anderes Array als Element beinhalten kann. Mit dieser EIgenschaft von JavaScript können mehrdimensionale Arrays erstellt werden. Der folgende Code erstellt ein zwei-dimensionales Array:</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']';
+  }
+}
+</pre>
+
+<p>Dieses Beispiel erstellt ein Array mit den folgenden Zeilen:</p>
+
+<pre>Zeile 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Zeile 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Zeile 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Zeile 3: [3, 0] [3, 1] [3, 2] [3, 3]
+</pre>
+
+<h3 id="Arrays_und_Regular_Expressions">Arrays und Regular Expressions</h3>
+
+<p>Wenn ein Array das Resultat einer Regular Expression auf einem String ist, wird das Array Properties und Elemente zuückgeben, die Informationen zum Match liefern. Der Rückgabewert der {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, und {{jsxref("Global_Objects/String/split","String.split()")}} Methode ist ein Array. Für weitere Informationen für die Verwendung von Arrays mit Regular Expressions, siehe <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Mit_Array-ähnlichen_Objekten_arbeiten">Mit Array-ähnlichen Objekten arbeiten</h3>
+
+<p>Manche JavaScript Objekte, wie {{domxref("NodeList")}}, welche von {{domxref("document.getElementsByTagName()")}} zurückgegeben oder als {{jsxref("Functions/arguments","arguments")}} in einem Funktionskörper referenziert wird, verhalten sich wie Arrays, aber teilen nicht alle deren Methoden. Das <code>arguments</code> Objekt stellt ein {{jsxref("Global_Objects/Function/length","length")}} Attribut zur Verfügung, implementiert aber beispielsweise nicht die {{jsxref("Array.forEach", "forEach()")}} Methode.</p>
+
+<p>Array Prototyp-Methoden können auf einem Array-ähnlichen Objekt aufgerufen werden, siehe folgendes Beispiel:</p>
+
+<pre class="brush: js">function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}
+</pre>
+
+<p>Array Prototyp-Methoden können auch für Strings verwendet werden, weil diese einen sequenziellen Zugriff auf deren Zeichen erlauben, ähnlich wie Arrays:</p>
+
+<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr);
+});</pre>
+
+<h2 id="Typisierte_Arrays">Typisierte Arrays</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typisierte Arrays</a> sind Array-ähnliche Objekte und stellen einen Mechanismus für den Zugriff auf Raw-Binärdaten zur Verfügung. Wie bereits erklärt, passen {{jsxref("Array")}} Objekte ihre Grösse dynamisch an und können beliebige Werte enthalten. JavaScript Engines führen Optimierungen durch, damit diese Arrays schneller sind. Je stärker Web-Applikationen werden mit Features wie Audio und Video Manipulation, Zugriff auf Raw Daten mit <a href="/en-US/docs/WebSockets">WebSockets</a> und so weiter, ist es hilfreich, wenn JavaScript Code einfach und schnell Raw Binärdaten in typisierten Arrays manipulieren kann.</p>
+
+<h3 id="Buffers_und_Views_Typisierte_Array_Architektur">Buffers und Views: Typisierte Array Architektur</h3>
+
+<p>Um maximale Flexibilität und Effizienz zu erreichen, werden typisierte Arrays in JavaScript auf <strong>Buffers</strong> und V<strong>iews</strong> aufgeteilt. Ein Buffer (implementiert durch das {{jsxref("ArrayBuffer")}} Objekt) ist ein Objekt, welches einen Block Daten repräsentiert; es hat kein Format und keine Mechanismen für den Zugriff auf Inhalte. Um auf den Speicher in einem Buffer zuzugreifen, wird eine View benötigt. Eine View stellt einen Kontext — einen Datentyp, Start-Offset und eine Anzahl Elemente — zur Verfügung, welcher die Daten in einen typisierten Array verwandelt.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>Der {{jsxref("ArrayBuffer")}} ist ein Datentyp, welcher für die Darstellung von generischen Binär-Daten-Buffer mit einer fixen Grösse. Der Inhalt eines <code>ArrayBuffer</code> kann nicht direkt manipuliert werden; stattdessen kann eine typisierte Array-View oder eine {{jsxref("DataView")}} erstellt werden, welches den Buffer in einem spezifischen Format darstellt, welche dann für das Lesen und Schreiben der Inhalte auf dem Buffer verwendet werden kann.</p>
+
+<h3 id="Typisierte_Array-Views">Typisierte Array-Views</h3>
+
+<p>Typisierte Array-Views haben selbstbeschreibende Namen und stellen Views für alle geläufigen numerischen Typen, wie <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> und so weiter, zur Verfügung. Es gibt ein spezielles typisiertes Array: <code>Uint8ClampedArray</code>. Es klemmt (clamps) zwischen 0 und 255. Dies ist hilfreich für <a href="/en-US/docs/Web/API/ImageData">Canvas Datenverarbeitung</a>, zum Beispiel.</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<p>Für weitere Informationen, siehe <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript Typisierte Arrays</a> und die Referenzdokumentation für die unterschiedlichen {{jsxref("TypedArray")}} Objekte.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/de/web/javascript/guide/keyed_collections/index.html b/files/de/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..a9b501da9e
--- /dev/null
+++ b/files/de/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,157 @@
+---
+title: Collections mit Schlüssel
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - Collections
+  - Guide
+  - JavaScript
+  - Map
+  - 'l10n:priority'
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">Dieses Kapitel gibt eine Einleitung in Sammlungen von Daten, welche mit einem Schlüssel verknüpft werden. <code>Map</code> und <code>Set</code> Objekte enthalten Elemente, die in der Reihenfolge ihres Einfügens iterierbar sind.</p>
+
+<h2 id="Maps">Maps</h2>
+
+<h3 id="Map_Objekt"><code>Map</code> Objekt</h3>
+
+<p>ECMAScript 2015 führt eine neue Datenstruktur ein, um Werte auf Werte zu abbildet. Ein {{jsxref("Map")}} Objekt ist eine einfache Schlüssel/Werte-Abbildung und man kann über die Element in der Einfügereihenfolge iterieren.</p>
+
+<p>Das folgende Beispiel zeigt einige Basisoperationen mit einer <code>Map</code>.  Für mehr Beispiele und die komplette API siehe zudem die Referenzseite {{jsxref("Map")}}. Man kann eine {{jsxref("Statements/for...of","for...of")}} Schleife benutzen, um ein Array von <code>[key, value]</code> für jede Iteration zurückzugeben.</p>
+
+<pre class="brush: js notranslate">var sayings = new Map();
+sayings.set('dog', 'woof');
+sayings.set('cat', 'meow');
+sayings.set('elephant', 'toot');
+sayings.size; // 3
+sayings.get('fox'); // undefined
+sayings.has('bird'); // false
+sayings.delete('dog');
+sayings.has('dog'); // false
+
+for (var [key, value] of sayings) {
+  console.log(key + ' goes ' + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+sayings.clear();
+sayings.size; // 0
+</pre>
+
+<h3 id="Object_und_Map_im_Vergleich"><code>Object</code> und <code>Map</code> im Vergleich</h3>
+
+<p>Traditionell werden {{jsxref("Object", "Objekte", "", 1)}} eingesetzt, um Strings auf Werte abzubilden. Objekte erlauben es Werte zu Schlüsseln zu setzen, diese Werte abzufragen, Schlüssel zu löschen und erkennen, ob etwas zu einem Schlüssel gespeichert wurde. <code>Map</code> Objekte haben ein paar Vorteile, was sie zu besseren Abbildungen macht.</p>
+
+<ul>
+ <li>Die Schlüssel eines <code>Object</code> sind {{jsxref("Global_Objects/String","Strings")}}, während bei einer <code>Map</code> jeder Wert möglich ist.</li>
+ <li>Man kann die Größe einer <code>Map</code> einfach abfragen, während man bei einem Objekt manuell mitzählen muss.</li>
+ <li>Die Iteration einer <code>Map</code> erfolgt in der Reihenfolge des Einfügens ihrer Elemente.</li>
+ <li>Ein <code>Object</code> hat einen Prototyp, so dass Standardschlüssel in der <code>Map</code> schon vorhanden sind. (Dies kann mit <code>map = Object.create(null)</code> umgangen werden.)</li>
+</ul>
+
+<p>Diese drei Tipps können bei der Entscheidung für eine <code>Map</code> oder ein <code>Object</code> helfen:</p>
+
+<ul>
+ <li>Man sollte Maps bevorzugen, wenn die Schlüssel vor der Laufzeit unbekannt sind und wenn alle Schlüssel den gleichen Typ haben und wenn alle Werte den gleichen Schlüssel haben.</li>
+ <li>Man sollte Maps in Fällen benutzen, in denen primitive Werte als Schlüssel benutzt werden, weil in Objekten jeder Schlüssel ein String ist egal, ob eigentlich eine Zahl, ein Boolean oder ein anderer primitiver Datentyp vorliegt.</li>
+ <li>Man sollte Objekte benutzen, wenn es eine Logik gibt, die auf individuellen Elementen angewandt wird.</li>
+</ul>
+
+<h3 id="WeakMap_Objekte"><code>WeakMap</code> Objekte</h3>
+
+<p>Das {{jsxref("WeakMap")}} Objekt ist eine Collection von Schlüssel/Werte-Paaren, wobei der <strong>Schlüssel nur ein Objekt sein kann</strong> und die Werte willkürliche Werte sein können. Die Objektreferenzen in den Schlüsseln werden <em>weakly</em> gehalten, was bedeutet, dass diese Referenz ein Ziel des Speicherbereinigung (Garbage Collectors (GC)) wird, wenn keine andere Referenz mehr auf dieses Objekt referenziert. Die <code>WeakMap</code> API ist die gleiche wie die <code>Map</code> API.</p>
+
+<p>Einen Unterschied zu <code>Map</code> Objekten ist, dass <code>WeakMap</code> Schlüssel nicht aufzählbar sind (z. B. gibt es keine Methode, die eine Liste von Schlüsseln zurückgibt). Wenn dies der Fall wäre, würde die Liste vom Zustand der Speicherbereinigung abhängen, was zu Nicht-Determinismus führen würde.</p>
+
+<p>Für mehr Informationen, Beispiele und "Warum <em>Weak</em>Map" auf der {{jsxref("WeakMap")}} Referenzseite.</p>
+
+<p>Ein Einsatzgebiet für <code>WeakMap</code>s ist der Einsatz für Private Daten oder das Verbergen von Implementierungsdetails. Das folgende Beispiel ist von Nick Fitzgeralds Blogpost <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. Die privaten Daten und Methoden, die zu dem Objekt gehören, werden in dem WeakMap Objekt <code>privates</code> gespeichert. Alles offene auf der Instanz und dem Prototyp ist Öffentlich; alles andere ist von Außen nicht erreichbar, weil <code>privates</code> vom Modul nicht exportiert wird.</p>
+
+<pre class="brush: js notranslate">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Private data goes here
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function() {
+  const me = privates.get(this);
+  // Do stuff with private data in `me`...
+};
+
+module.exports = Public;
+</pre>
+
+<h2 id="Sets">Sets</h2>
+
+<h3 id="Set_Objekte"><code>Set</code> Objekte</h3>
+
+<p>{{jsxref("Set")}} Objekte sind Collectionen mit Werten. Man kann über die Elemente in der Einfügereihenfolge iterieren. Ein Wert in einem <code>Set</code> kann nur einmal existieren und ist einzigartig in einer <code>Set</code> Collection.</p>
+
+<p>Das folgende Beispiel zeigt einige Basisoperationen mit einem <code>Set</code>. Für mehr Beispiele und die komplette API siehe auf der {{jsxref("Set")}} Referenzseite nach.</p>
+
+<pre class="brush: js notranslate">var mySet = new Set();
+mySet.add(1);
+mySet.add('some text');
+mySet.add('foo');
+
+mySet.has(1); // true
+mySet.delete('foo');
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+</pre>
+
+<h3 id="Konvertierung_zwischen_Arrays_und_Sets">Konvertierung zwischen Arrays und Sets</h3>
+
+<p>Man kann ein {{jsxref("Array")}} von einem Set erstellen, indem {{jsxref("Array.from")}} oder der <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread Operator</a> eingesetzt wird. Zudem akzeptiert der <code>Set</code> Konstruktor ein <code>Array</code>, um es in die andere Richtung zu konvertieren. Wichtig ist aber, dass <code>Set</code> Objekte Werte nur einmalig Speichern, so dass jedes Elementduplikat aus dem Array beim Konvertieren gelöscht wird.</p>
+
+<pre class="brush: js notranslate">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1, 2, 3, 4]);
+</pre>
+
+<h3 id="Array_und_Set_im_Vergleich"><code>Array</code> und <code>Set</code> im Vergleich</h3>
+
+<p>Traditionell wird eine Menge von Objekten in vielen Situationen in JavaScript in Arrays gespeichert. Das neue <code>Set</code> Objekt hat aber einige Vorteile:</p>
+
+<ul>
+ <li>Das Prüfen, ob ein Element in einer Collection schon existiert mit {{jsxref("Array.indexOf")}} ist in Arrays langsamer.</li>
+ <li>In <code>Set</code> Objekte lassen sich Elemente löschen. Mit einem Array entsteht an dem  Element Index eine Lücke, bzw. sie wird geschlossen.</li>
+ <li>Der Wert {{jsxref("NaN")}} kan in einem Array nicht mit <code>indexOf</code> gefunden werden.</li>
+ <li><code>Set</code> Objekte erlauben nur eindeutige Objekte; man muss sich nicht selber um Duplikate kümmern.</li>
+</ul>
+
+<h3 id="WeakSet_Objekte"><code>WeakSet</code> Objekte</h3>
+
+<p>{{jsxref("WeakSet")}} Objekte sind Collections von Objekten. Ein Objekt in einer <code>WeakSet</code> gibt es nur einmal; es ist einzigartig in der <code>WeakSet</code> Collection und Objekte sind nicht aufzählbar.</p>
+
+<p>Die Hauptunterschiede zu einem {{jsxref("Set")}} Objekt sind:</p>
+
+<ul>
+ <li>Im Gegensatz zu  <code>Sets</code>, ist <code>WeakSets</code> eine <strong>Collection von nur Objekten</strong> und nicht von beliebigen Werten von jedem Typ.</li>
+ <li>Das <code>WeakSet</code> ist <em>weak: </em>Referenzen in in der Collection sind <em>weakly</em> gehalten. Was gedeutet, dass wenn es keine weitere Referenz auf eine Objekt in dem <code>WeakSet</code> gibt, der Speicher geleert werden kann. Das bedeutet auch, dass es keine Liste gibt, die die aktuellen Objekte der Collection enthält. <code>WeakSets</code> sind nicht Aufzählbar.</li>
+</ul>
+
+<p>Die Einsatzgebiete von <code>WeakSet</code> Objekten sind begrenzt. Sie erzeugen keine Speicherlecks, so dass sie sicher DOM Elemente enthalten können, um sie zum Beispiel zu verfolgen.</p>
+
+<h2 id="Schlüssel-_und_Wertegleichheit_von_Map_und_Set">Schlüssel- und Wertegleichheit von <code>Map</code> und <code>Set</code></h2>
+
+<p>Beide, die Schlüsselgleichheit von <code>Map</code> Objekten und die Wertegleichheit von <code>Set</code> Objekten basieren auf dem "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">same-value-zero Algorithmus</a>":</p>
+
+<ul>
+ <li>Gleichheit funktioniert wie der Identitätsvergleichsoperator <code>===</code>.</li>
+ <li><code>-0</code> and <code>+0</code> werden als gleich angenommen.</li>
+ <li>{{jsxref("NaN")}} wird als gleich zu sich selbst angenommen (im Gegensatz zu <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
new file mode 100644
index 0000000000..97dbba8b3e
--- /dev/null
+++ b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
@@ -0,0 +1,430 @@
+---
+title: Kontrollfluss und Fehlerbehandlung
+slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div>
+
+<p class="summary">JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.</p>
+
+<p>Die <a href="/de/docs/Web/JavaScript/Reference/Statements">JavaScript Referenzen</a> beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (<code>;</code>) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.</p>
+
+<p>Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in <a href="/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren">Ausdrücke und Operatoren</a>, um komplette Informationen über Ausdrücke zu erhalten.</p>
+
+<h2 id="Block-Anweisungen">Block-Anweisungen</h2>
+
+<p>Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:</p>
+
+<pre class="syntaxbox">{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+</pre>
+
+<h3 id="Beispiele"><strong>Beispiele</strong></h3>
+
+<p>Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. <code>if</code>, <code>for</code>, <code>while</code>).</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Hier ist, <code>{ x++; }</code> das Block-Statement.</p>
+
+<p><strong>Wichtig</strong>: JavaScript hat vor ECMAScript2015 <strong>keine </strong>Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+</pre>
+
+<p>Hier wird 2 ausgegeben, weil <code>var x</code> innerhalb des Blocks im gleichen Scope ist wie das <code>var x</code> vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.</p>
+
+<p>Seit ECMAScript2015 sind <code>let</code> und <code>const</code> Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.</p>
+
+<h2 id="Bedingte_Statements">Bedingte Statements</h2>
+
+<p>Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: <code>if...else</code> und <code>switch</code>.</p>
+
+<h3 id="if...else_Anweisungen"><code>if...else </code>Anweisungen</h3>
+
+<p><code>if</code> wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen <code>else-</code>Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein <code>if</code>-Block sieht folgendermaßen aus:</p>
+
+<pre class="syntaxbox">if (bedingung) {
+  statement_1;
+} else {
+  statement_2;
+}</pre>
+
+<p>Hier kann die Bedingung ein Ausdruck sein, der zu <code>true</code> oder <code>false</code> ausgewertet wird. Siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> nach, um zu erfahren, was zu <code>true</code> und was zu <code>false</code> ausgewertet wird. Wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird, wird <code>statement_1</code> ausgeführt. Andernfalls wird <code>statement_2</code> ausgeführt. <code>statement_1</code> und <code>statement_2</code> können beliebige Statements sein, auch weitere <code>if</code>-Statements.</p>
+
+<p>Man kann zudem Statements mit <code>else if</code> konstruieren, um mehrere Bedingungen sequentiell zu testen:</p>
+
+<pre class="syntaxbox">if (bedingung_1) {
+  statement_1;
+} else if (bedingung_2) {
+  statement_2;
+} else if (bedingung_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+</pre>
+
+<p>Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert (<code>{ ... }</code>). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten <code>if</code>-Statements.</p>
+
+<pre class="syntaxbox">if (bedingung) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+</pre>
+
+<p>Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. <span>Verwenden Sie zum Beispiel den folgenden Code nicht:</span></p>
+
+<pre class="example-bad brush: js">if (x = y) {
+  /* statements here */
+}
+</pre>
+
+<p>Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:</p>
+
+<pre class="brush: js">if ((x = y)) {
+  /* statements here */
+}
+</pre>
+
+<h4 id="Falsy_Werte">Falsy Werte</h4>
+
+<p>Die folgenden Werte werden zu <code>false</code> ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>der leere string (<code>""</code>)</li>
+</ul>
+
+<p>Alle anderen Werte, auch alle Objekte, werden zu <code>true</code> ausgewertet, wenn sie als Bedingung eingesetzt werden.</p>
+
+<p>Es ist jedoch etwas verwirrend mit den primitiven boolean Werten <code>true</code> und <code>false</code> und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b)          // Die Bedingung wird zu true ausgewertet.
+if (b == true)  // Die Bedingung wird zu false ausgewertet.</pre>
+
+<h4 id="Beispiel"><strong>Beispiel</strong></h4>
+
+<p>Im folgenden Beispiel gibt die Funktion <code>checkData</code> <code>true</code> zurück, wenn die Anzahl der Zeichen in einem <code>Text</code> Objekt drei ist. Andernfalls wird ein Alert angezeigt, und <code>false</code> zurückgegeben.</p>
+
+<pre class="brush: js">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("Enter exactly three characters. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+</pre>
+
+<h3 id="switch_Statement"><code>switch</code> Statement</h3>
+
+<p>Ein <code>switch</code> Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein <code>switch</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">switch (ausdruck) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+</pre>
+
+<p>Das Programm sucht als erstes nach eine <code>case</code>-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen <code>default</code>-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine <code>default</code>-Klausel vorhanden ist, wird das <code>switch</code> beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die <code>default</code>-Klausel die letzte Klausel, das muss aber nicht immer so sein.</p>
+
+<p>Das optionale <code>break</code> Statement, welches in jeder <code>case</code>-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das <code>switch</code> Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn <code>break</code> weggelassen wird, wird das Programm mit dem nächsten Statement im <code>switch</code> weitermachen, was dazu führt, dass alle nachlogenden <code>case</code>-Klauseln und die optionale <code>default</code>-Klausel mit ausgeführt werden.</p>
+
+<h4 id="Beispiel_2"><strong>Beispiel</strong></h4>
+
+<p>Im folgenden Beispiel wird der <code>case</code> "Bananas" ausgeführt, wenn <code>fruittype</code> zu "Bananas" ausgewertet wird. Die <code>break</code> Statements bewirken, dass das <code>switch</code> beendet wird und das nach <code>switch</code> stehende Statement ausgeführt wird. Wird <code>break</code> im <code>case </code>"Bananas" weggelassen, so wird der <code>case</code> "Cherries" mit ausgeführt.</p>
+
+<pre class="brush: js">switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");</pre>
+
+<h2 id="Statements_zur_Fehler-_bzw._Ausnahmebehandlung">Statements zur Fehler- bzw. Ausnahmebehandlung</h2>
+
+<p>Man kann mit dem <code>throw</code> Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des <code>try...catch</code> Statements auffangen und verarbeiten.</p>
+
+<ul>
+ <li><a href="#throw"><code>throw</code> Statement</a></li>
+ <li><a href="#try-catch"><code>try...catch</code> Statement</a></li>
+</ul>
+
+<h3 id="Ausnahmetypen">Ausnahmetypen</h3>
+
+<p>Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:</p>
+
+<ul>
+ <li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_Typen">ECMAScript exceptions</a></li>
+ <li>{{domxref("DOMException")}} und {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="throw_Statement"><a id="throw" name="throw"><code>throw</code> Statement</a></h3>
+
+<p>Das <code>throw</code> Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:</p>
+
+<pre class="syntaxbox">throw ausdruck;
+</pre>
+
+<p>Man<span id="result_box" lang="de"><span> kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs.</span></span> <span id="result_box" lang="de"><span>Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:</span></span></p>
+
+<pre class="brush: js">throw "Error2";   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+</pre>
+
+<div class="note"><strong>Notiz:</strong> Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im <code>catch</code> Block können die Eigenschaften des Objektes referenziert werden.</div>
+
+<pre class="brush: js">// Erstellt ein Objekt vom Typ UserException
+function UserException (message){
+  this.message=message;
+  this.name="UserException";
+}
+
+// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
+// als String genutzt werden soll.
+// (z. B. in der Fehlerconsole)
+UserException.prototype.toString = function () {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Erstellt eine Instanz der UserException und wirft diese
+throw new UserException("Value too high");</pre>
+
+<h3 id="try...catch_Statement"><a id="try-catch" name="try-catch"><code>try...catch</code> Statement</a></h3>
+
+<p>Das <code>try...catch</code> Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das <code>try...catch</code> Statements diese ab.</p>
+
+<p>Das <code>try...catch</code> Statement besteht aus einem <code>try</code> Block, welcher ein oder mehrere Statements enthält, und null oder mehr <code>catch</code> Blöcken, welche Statements spezifizieren, welche eine im <code>try</code> Block geworfene Exception abfangen und behandeln. Das Statement versucht den <code>try</code> Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den <code>catch</code> Block gegeben. Wenn ein Statement in dem <code>try</code> Block (oder eine im <code>try</code> Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den <code>catch</code> Block übergeben. Wenn keine Exception im <code>try</code> Block geworfen wird, wird der <code>catch</code> Block übersprungen. Der optionale <code>finally</code> Block wird nach dem <code>try</code> und nach dem <code>catch</code> Block ausgeführt, bevor das auf das <code>try...catch</code> Statement folgenden Statement ausgeführt wird.</p>
+
+<p>Das Folgende Beispiel benutzt ein <code>try...catch</code> Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert <code>"InvalidMonthNo"</code> geworfen und die Statements im <code>catch</code> Block setzen die <code>monthName</code> Variable auf <code>unknown</code>.</p>
+
+<pre class="brush: js">function getMonthName (mo) {
+  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo] != null) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
+}
+</pre>
+
+<h4 id="The_catch_Block" name="The_catch_Block">Der <code>catch</code> Block</h4>
+
+<p>Man kann einen <code>catch</code> Block einsetzen, um alle Exceptions, die im <code>try</code> Block generiert werden, zu verarbeiten.</p>
+
+<pre class="syntaxbox">catch (catchID) {
+  statements
+}
+</pre>
+
+<p>Der <code>catch</code> Block spezifiziert einen Variable (<code>catchID</code> im voranstehenden Syntaxbeispiel), welcher den Wert des <code>throw</code> Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den <code>catch</code> Block geht. Die Variable existiert nur in dem <code>catch</code> Block. Nach dem beenden des <code>catch</code> Blocks ist die Variable nicht mehr verfügbar.</p>
+
+<p>Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den <code>catch</code> Block gegeben.</p>
+
+<pre class="brush: js">try {
+  throw "myException" // Erstellt eine Exception
+}
+catch (e) {
+  // Statements, die die Exception verarbeiten
+  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
+}
+</pre>
+
+<h4 id="Der_finally_Block">Der <code>finally</code> Block</h4>
+
+<p>Der <code>finally</code> Block enthält Statements, welche nach dem <code>try</code> und <code>catch</code> Block ausgeführt werden, bevor das Statement nach dem <code>try...catch</code> Statement ausgeführt wird. Der <code>finally</code> Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der <code>finally</code> auch ausgeführt, wenn kein <code>catch</code> die Exception abfängt.</p>
+
+<p>Man kann den <code>finally</code> Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im <code>finally</code> Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der <code>finally</code> Block dafür, dass die Datei wieder geschlossen wird.</p>
+
+<pre class="brush: js">openMyFile();
+try {
+  writeMyFile(theData); //Das kann Exceptions werfen
+} catch(e) {
+  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
+} finally {
+  closeMyFile(); // Schließt immer die Ressource
+}
+</pre>
+
+<p>Wenn der <code>finally</code> Block einen Rückgabewert definiert, ist dieser der Rückgabewert des <code>try-catch-finally</code> Prozedur, unabhängig davon, ob <code>return</code> Statements im <code>try</code> und <code>catch</code> Block verwendet werden.</p>
+
+<pre class="brush: js">function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // Dieses return Statement is überflüssig
+                 // weil im finally Block ebenfalls eins vorhanden ist
+    console.log(2); // wird niemals erreicht
+  } finally {
+    console.log(3);
+    return false; // überschreibt früheres return Statements
+    console.log(4); // wird niemals erreicht
+  }
+  // false wird jetzt zurückgegeben
+  console.log(5); // wird niemals erreicht
+}
+f(); // alerts 0, 1, 3; returns false
+</pre>
+
+<p>Das Überschreiben des Rückgabewertes durch den <code>finally</code> Block überschreibt auch geworfene Exceptions, wenn diese im <code>catch</code> geworfen werden.</p>
+
+<pre class="brush: js">function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // Dieses throw Statement is überflüssig
+             // weil im finally Block ein return vorkommt
+  } finally {
+    return false; // Überschreibt das vorherige "throw"
+  }
+  // false wird zurückgegeben
+}
+
+try {
+  f();
+} catch(e) {
+  // Dieser bereich wird nie erreicht, weil
+  // die Exception durch das return im
+  // finally block überschrieben wird.
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"</pre>
+
+<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">Verschachtelte try...catch Statements</h4>
+
+<p>Man kann mehrere <code>try...catch</code> Statements ineinander verschachteln. Wenn ein inneres <code>try...catch</code> Statements keinen <code>catch</code> Block hat, wird ein äußeres <code>try...catch</code> Statement mit einem <code>catch</code> Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel <a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch#Verschachtelte_try-Blöcke">Verschachtelte try-Blöcke</a> auf der <code><a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> Seite.</p>
+
+<h3 id="Nützliche_Verwendung_des_Error_Objekts">Nützliche Verwendung des <code>Error</code> Objekts</h3>
+
+<p>Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. <code>DOMException</code> oder <code>Error</code>) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.</p>
+
+<p>Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der <code>catch</code> Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:</p>
+
+<pre class="brush: js">function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}</pre>
+
+<h2 id="Promises">Promises</h2>
+
+<p>Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.</p>
+
+<p>Ein <code>Promise</code> ist in einem der folgenen Status:</p>
+
+<ul>
+ <li><em>pending</em>: <span class="short_text" id="result_box" lang="de"><span>Anfangszustand, nicht erfolgreich oder fehlerhaft beendet.</span></span></li>
+ <li><em>fulfilled</em>: Erfolgreiche Operation</li>
+ <li><em>rejected</em>: Gescheiterte Operation.</li>
+ <li><em>settled</em>: <span id="result_box" lang="de"><span>Das </span></span><code>Promise</code> <span lang="de"><span>ist entweder erfüllt oder abgelehnt, aber nicht </span></span><em>pending</em><span lang="de"><span>.</span></span></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="Ein_Bild_mit_XHR_laden">Ein Bild mit XHR laden</h3>
+
+<p>Ein einfaches Beispiel für den Einsatz von <code>Promise</code> und <code><a href="/de/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> ist das Laden eines Bildes (Siehe MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> Repository; man kann es hier auch <a href="https://mdn.github.io/js-examples/promises-test/">in Aktion sehen</a>). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den <code>Promise</code> Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den <a href="/de/docs/Web/JavaScript/Guide/Using_promises">Using Promises Guide</a> anschauen.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}</div>
diff --git a/files/de/web/javascript/guide/meta_programming/index.html b/files/de/web/javascript/guide/meta_programming/index.html
new file mode 100644
index 0000000000..691f5b05a6
--- /dev/null
+++ b/files/de/web/javascript/guide/meta_programming/index.html
@@ -0,0 +1,265 @@
+---
+title: Meta programming
+slug: Web/JavaScript/Guide/Meta_programming
+tags:
+  - Guide
+  - JavaScript
+  - Proxy
+  - Reflect
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">Beginnend mit ECMAScript 2015 hat JavaScript Unterstützung für {{jsxref("Proxy")}} and {{jsxref("Reflect")}} Objekte erhalten, welche das Abfangen und Definieren von benutzerdefinierten Verhaltens für grundlegenden Sprachoperation erlaubt (z. B. Eigenschaftensuche, Zuweisung, Aufzählung, Funktionsaufruf usw.). Mit der Hilfe dieser beiden Objekte ist es möglich auf der Metaebene von JavaScript zu programmieren.</p>
+
+<h2 id="Proxies">Proxies</h2>
+
+<p>Eingeführt in ECMAScript 6 erlaubt das {{jsxref("Proxy")}} Objekt das Abfangen und Definieren von benutzerdefinierten Verhaltens für bestimmte Operationen. Zum Beispiel um die Eigenschaft eines Objektes zu erhalten:</p>
+
+<pre class="brush: js">var handler = {
+  get: function(target, name) {
+    return name in target ? target[name] : 42;
+  }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+</pre>
+
+<p>Das <code>Proxy</code> Objekt definiert einen <em>Ziel</em> (<code>target</code>) (hier ein leeres Objekt) und einen <em>handler</em> (Verhaltens) Objekt in dem ein <code>get</code> <em>Trap</em> implementiert ist. In diesem Beispiel wird kein <code>undefined</code> zurückgegeben, wenn Eigenschaften nicht definiert sind. Stattdessen wird die Zahl 42 zurückgegeben.</p>
+
+<p>Weitere Beispiele sind auf der {{jsxref("Proxy")}} Referenzseite verfügbar.</p>
+
+<h3 id="Terminologie">Terminologie</h3>
+
+<p>Die folgenden Terme werden im Zusammenhang mit der Funktionalität von Proxies verwendet.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler","Handler","","true")}}</dt>
+ <dd>Platzhalterobjekt, welches Traps enthält.</dd>
+ <dt>Traps</dt>
+ <dd>Die Methoden, die Zugriff auf Eigenschaften unterstützen. Diese sind analog zu Traps in Betriebssystemen.</dd>
+ <dt>Ziel</dt>
+ <dd>Objekt, welches vom Proxy virtualisiert wird. Es wird häufig als Speicher-Backend für den Proxy benutzt. Invarianten (Semantik, die unverändert bleiben) bezüglich nicht erweiterbarer Objekteigenschaften oder nicht konfigurierbarer Eigenschaften werden gegen das Ziel verifiziert.</dd>
+ <dt>Invarianten</dt>
+ <dd>Semantiken, die bei der Implementierung von benutzerdefinierten Operationen unverändert bleiben, werden als Invarianten bezeichnet. Wenn Sie gegen die Invarianten eines Handlers verstoßen, wird ein {{jsxref("TypeError")}} erzeugt.</dd>
+</dl>
+
+<h2 id="Handlers_und_Traps">Handlers und Traps</h2>
+
+<p>Die Folgende Tabelle fasst die verfügbaren Traps von <code>Proxy</code> Objekten zusammen. Siehe auf der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">Referenzseite</a> für detailliertere Erklärungen und Beispiele.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Handler / Trap</th>
+   <th>Interceptions</th>
+   <th>Invarianten</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td>
+    <ul>
+     <li>Die <code>getPrototypeOf</code> Methode muss ein Objekt or <code>null</code> zurückgeben.</li>
+     <li>Wenn <code>target</code> nicht erweiterbar ist, muss die <code>Object.getPrototypeOf(proxy)</code> Methode das gleiche zurückgeben wie <code>Object.getPrototypeOf(target)</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>Wenn <code>target</code> nicht erweiterbar ist, muss der<code> prototype</code> Parameter der gleiche Wert sein wie <code>Object.getPrototypeOf(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
+   <td>{{jsxref("Object.isExtensible()")}}<br>
+    {{jsxref("Reflect.isExtensible()")}}</td>
+   <td><code>Object.isExtensible(proxy)</code> muss den gleichen Wert wie <code>Object.isExtensible(target)</code> zurückgeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>{{jsxref("Object.preventExtensions()")}}<br>
+    {{jsxref("Reflect.preventExtensions()")}}</td>
+   <td><code>Object.preventExtensions(proxy)</code> gibt nur <code>true</code> zurück, wenn <code>Object.isExtensible(proxy)</code> <code>false</code> ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br>
+    {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <ul>
+     <li><code>getOwnPropertyDescriptor</code> muss ein Objekt oder <code>undefined</code> zurückgeben.</li>
+     <li>Eine Eigenschaft kann nicht als nichtexistent erkannt werden, wenn sie als nicht konfigurierbare Eigenschaft des Zielobjektes existiert.</li>
+     <li>Eine Eigenschaft kann nicht als nichtexistent erkannt werden, wenn sie als Eigenschaft des Zielobjektes existiert und das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht als existent erkannt werden, wenn sie nicht als Eigenschaft des Zielobjektes existiert und das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht als nicht konfigurierbar erkannt werden, wenn sie nicht als Eigenschaft des Zielobjektes existiert oder wenn sie als konfigurierbare Eigenschaft des Zielobjekt existiert.</li>
+     <li>Das Ergebnis von <code>Object.getOwnPropertyDescriptor(target)</code> kann dem Zielobjekt mit <code>Object.defineProperty</code> übergeben werden ohne, dass ein Fehler erzeugt wird.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>{{jsxref("Object.defineProperty()")}}<br>
+    {{jsxref("Reflect.defineProperty()")}}</td>
+   <td>
+    <ul>
+     <li>Eine Eigenschaft kann nicht hinzugefügt werden, wenn das Zielobjekt nicht erweiterbar ist.</li>
+     <li>Eine Eigenschaft kann nicht hinzugefügt werden oder zu nicht konfigurierbar geändert werden, wenn es nicht als nicht konfigurierbares Eigenschaft im Zielobjekt existiert.</li>
+     <li>Eine Eigenschaft darf nicht nicht konfigurierbar sein, wenn die zugehörige konfigurierbare Eigenschaft im Zielobjekt existiert.</li>
+     <li>Wenn eine Eigenschaft eine zugehörige Eigenschaft im Zielobjekt hat, so wird <code>Object.defineProperty(target, prop, descriptor)</code> keinen Fehler erzeugen.</li>
+     <li>Im Strict Mode, wird ein falscher Rückgabewert des <code>defineProperty</code> Handler einen {{jsxref("TypeError")}} Erzeugen.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td>
+   <td>Eigenschaftsabfrage: <code>foo in proxy</code><br>
+    Vererbte Eigenschaftsabfrage: <code>foo in Object.create(proxy)</code><br>
+    {{jsxref("Reflect.has()")}}</td>
+   <td>
+    <ul>
+     <li>Eine Eigenschaft kan nicht als nichtexistent erkannt werden, wenn sie als nicht konfigurierbare Eigenschaft im Zielobjekt existiert.</li>
+     <li>Eine Eigenschaft kan nicht als nichtexistent erkannt werden, wenn sie als Eigenschaft im Zielobjekt existiert und das Zielobjekt nicht erweiterbar ist.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td>
+   <td>Eigenschaftszugriff: <code>proxy[foo]</code>and <code>proxy.bar</code><br>
+    Vererbter Eigenschaftszugriff: <code>Object.create(proxy)[foo]</code><br>
+    {{jsxref("Reflect.get()")}}</td>
+   <td>
+    <ul>
+     <li>Der Wert, der für eine Eigenschaft zurückgegeben wird, muss der gleiche sein wie der in der zugehörigen Eigenschaft des Zielobjekts, wenn die Eigenschaft im Zielobjekt nicht überschreibbar und nicht konfigurierbar ist.</li>
+     <li>Der Wert, der für eine Eigenschaft zurückgegeben wird, muss undefined sein, wenn die zugehörige Eigenschaft im Zielobjekt einen nicht konfigurierbare Zugriffseigenschaft hat, dessen [[Get]] Attribut undefined ist.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td>
+   <td>Eigenschaftszuweisung: <code>proxy[foo] = bar</code> and <code>proxy.foo = bar</code><br>
+    Vererbte Eigenschaftszuweisung: <code>Object.create(proxy)[foo] = bar</code><br>
+    {{jsxref("Reflect.set()")}}</td>
+   <td>
+    <ul>
+     <li>Der Wert kann nicht zu einem geändert werden, der anders als dem Wert im Zielobjekt ist, wenn die zugehörige Eigenschaft im Zielobjekt eine nicht überschreibbare, nicht konfigurierbare Dateneigenschaft ist.</li>
+     <li>Der Wert der Eigenschaft kann nicht geändert werden, wenn die zugehörige Eigenschaft im Zielobjekt nicht konfigurierbar ist und das [[Set]] Attribut den Wert <code>undefined</code> hat.</li>
+     <li>Im Strict Mode, wird ein falscher Rückgabewert des <code>set</code> Handlers einen {{jsxref("TypeError")}} erzeugen.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>Eigenschaft löschen: <code>delete proxy[foo]</code> und <code>delete proxy.foo</code><br>
+    {{jsxref("Reflect.deleteProperty()")}}</td>
+   <td>Eine Eigenschaft kann nicht gelöscht werden, Wenn sie als nicht konfigurierbare Eigenschaft im Zielobjekt existiert.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>Eigenschaft aufzählen (enumeration) / for...in: <code>for (var name in proxy) {...}</code><br>
+    {{jsxref("Reflect.enumerate()")}}</td>
+   <td>Die <code>enumerate</code> Methode muss ein Objekt zurückgeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+    {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+    {{jsxref("Object.keys()")}}<br>
+    {{jsxref("Reflect.ownKeys()")}}</td>
+   <td>
+    <ul>
+     <li>Das Ergebnis von <code>ownKeys</code> ist eine Liste.</li>
+     <li>Der Typ jedes Elements in der Ergebnisliste ist entweder {{jsxref("String")}} oder {{jsxref("Symbol")}}.</li>
+     <li>Die Ergebnisliste muss alle Schlüssel von nicht konfigurierbaren Eigenschaften des Zielobjektes enthalten.</li>
+     <li>Wenn das Zielobjekt nicht erweiterbar ist, muss die Ergebnisliste alle Schlüssel des Zielobjektes enthalten und keine anderen Werte.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td><code>proxy(..args)</code><br>
+    {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
+    {{jsxref("Reflect.apply()")}}</td>
+   <td>Es gibt keine Invarianten für die <code>handler.apply</code> Methode.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td><code>new proxy(...args)</code><br>
+    {{jsxref("Reflect.construct()")}}</td>
+   <td>Das Ergebnis muss ein <code>Object</code> sein.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Widerrufbarer_Proxy">Widerrufbarer <code>Proxy</code></h2>
+
+<p>Die {{jsxref("Proxy.revocable()")}} Methode wird benutzt, um ein widerrufbares <code>Proxy</code> Objekt zu erstellen. Das bedeutet, dass der Proxy mit der Funktion <code>revoke</code> widerrufen werden kann und der Proxy ausgeschaltet wird. Danach wird jede Operation auf dem Proxy zu einem {{jsxref("TypeError")}} führen.</p>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return '[[' + name + ']]';
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo);  // TypeError is thrown
+proxy.foo = 1;           // TypeError again
+delete proxy.foo;        // still TypeError
+typeof proxy;            // "object", typeof doesn't trigger any trap</pre>
+
+<h2 id="Reflection">Reflection</h2>
+
+<p>{{jsxref("Reflect")}} ist ein Standardobjekt welches Methoden unterstützt, welche das Abfragen von JavaScript Operationen erlauben. Die Methoden sind die gleichen wie die eines {{jsxref("Global_Objects/Proxy/handler","Proxy Handlers","","true")}}. <code>Reflect</code> ist kein Funktionsobjekt.</p>
+
+<p><code>Reflect</code> hilft beim Weiterleiten von Standardoperationen des Handlers zu dem Zielobjekt.</p>
+
+<p>Mit bekommt man {{jsxref("Reflect.has()")}} zum Beispiel den <a href="/de/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> Operator</a> als Funktion:</p>
+
+<pre class="brush: js">Reflect.has(Object, 'assign'); // true
+</pre>
+
+<h3 id="Eine_bessere_apply_Funktion">Eine bessere <code>apply</code> Funktion</h3>
+
+<p>In ES5 wird typischerweise die {{jsxref("Function.prototype.apply()")}} Methode genutzt, um eine Funktion mit einem gegebenen <code>this</code> Wert und <code>arguments</code> als Array (oder ein <a href="/de/docs/Web/JavaScript/Guide/Indexed_collections#Mit_Array-ähnlichen_Objekten_arbeiten">Array-ähnliches Objekt</a>) benutzt.</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p>Mit {{jsxref("Reflect.apply")}} wird dieses weniger Langatmig und leichter verständlich:</p>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"
+</pre>
+
+<h3 id="Prüfen_ob_Eigenschaftsdefinitionen_erfolgreich_waren">Prüfen ob Eigenschaftsdefinitionen erfolgreich waren</h3>
+
+<p>Mit {{jsxref("Object.defineProperty")}}, welche ein Objekt zurück gibt, wenn es erfolgreich war, oder andernfalls ein {{jsxref("TypeError")}} erzeugt, muss man ein {{jsxref("Statements/try...catch","try...catch")}} Block benutzen, um einen Fehler bei der Definition einer Eigenschaft abzufangen. Weil {{jsxref("Reflect.defineProperty")}} einen Boolean als Status zurück gibt, kann man einfach einen {{jsxref("Statements/if...else","if...else")}} Block benutzen:</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) {
+  // success
+} else {
+  // failure
+}</pre>
+
+<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
new file mode 100644
index 0000000000..2448621a4a
--- /dev/null
+++ b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
@@ -0,0 +1,506 @@
+---
+title: Mit Objekten arbeiten
+slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten
+tags:
+  - Beginner
+  - Comparing object
+  - Constructor
+  - Document
+  - Guide
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}</div>
+
+<p class="summary">JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.</p>
+
+<h2 id="Objekte_Übersicht">Objekte Übersicht</h2>
+
+<p>Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.</p>
+
+<p>In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.</p>
+
+<h2 id="Objekte_und_Eigenschaften">Objekte und Eigenschaften</h2>
+
+<p>Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:</p>
+
+<pre class="brush: js">objectName.propertyName
+</pre>
+
+<p>Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens <code>myCar</code> mit den Attributen <code>make</code>, <code>model</code>, und <code>year</code>:</p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+
+<p>Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).</p>
+
+<pre class="brush: js">myCar.color; // undefined</pre>
+
+<p>Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts <code>myCar</code> folgendermassen zugreifen:</p>
+
+<pre class="brush: js">myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+
+<p>Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:</p>
+
+<pre class="brush: js">// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+</pre>
+
+<p>Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel <code>obj</code> konvertiert wenn es in <code>myObj</code> benutzt wird. JavaScript ruft die <code>obj.toString()</code> Methode auf und benutzt den resultierenden String als neuen Schlüssel.</p>
+
+<p>Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:</p>
+
+<pre class="brush: js">var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+</pre>
+
+<p>Man kann die Klammernotation mit <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"> </a>nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>So gibt der Aufruf <code>showProps(myCar, "myCar")</code> folgenden Rückgabewert zurück:</p>
+
+<pre class="brush: js">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Enumerate_the_properties_of_an_object">Enumerate the properties of an object</h2>
+
+<p>Starting with <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, there are three native ways to list/traverse object properties:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br>
+  This method traverses all enumerable properties of an object and its prototype chain</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
+  This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object <code>o</code>.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
+  This method returns an array containing all own properties' names (enumerable or not) of an object <code>o</code>.</li>
+</ul>
+
+<p>Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:</p>
+
+<pre class="brush: js">function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+</pre>
+
+<p>This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.</p>
+
+<h2 id="Creating_new_objects">Creating new objects</h2>
+
+<p>JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the <code>new</code> operator.</p>
+
+<h3 id="Using_object_initializers"><a id="Object_initializers" name="Object_initializers">Using object initializers</a></h3>
+
+<p>In addition to creating objects using a constructor function, you can create objects using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.</p>
+
+<p>The syntax for an object using an object initializer is:</p>
+
+<pre class="brush: js">var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+</pre>
+
+<p>where <code>obj</code> is the name of the new object, each <code>property_<em>i</em></code> is an identifier (either a name, a number, or a string literal), and each <code>value_<em>i</em></code> is an expression whose value is assigned to the <code>property_<em>i</em></code>. The <code>obj</code> and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)</p>
+
+<p>Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to <code>new Object()</code> were made; that is, objects made from object literal expressions are instances of <code>Object</code>.</p>
+
+<p>The following statement creates an object and assigns it to the variable <code>x</code> if and only if the expression <code>cond</code> is true:</p>
+
+<pre class="brush: js">if (cond) var x = {greeting: 'hi there'};
+</pre>
+
+<p>The following example creates <code>myHonda</code> with three properties. Note that the <code>engine</code> property is also an object with its own properties.</p>
+
+<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>You can also use object initializers to create arrays. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p>
+
+<h3 id="Using_a_constructor_function">Using a constructor function</h3>
+
+<p>Alternatively, you can create an object with these two steps:</p>
+
+<ol>
+ <li>Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.</li>
+ <li>Create an instance of the object with <code>new</code>.</li>
+</ol>
+
+<p>To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called <code>Car</code>, and you want it to have properties for make, model, and year. To do this, you would write the following function:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Notice the use of <code>this</code> to assign values to the object's properties based on the values passed to the function.</p>
+
+<p>Now you can create an object called <code>mycar</code> as follows:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>This statement creates <code>mycar</code> and assigns it the specified values for its properties. Then the value of <code>mycar.make</code> is the string "Eagle", <code>mycar.year</code> is the integer 1993, and so on.</p>
+
+<p>You can create any number of <code>Car</code> objects by calls to <code>new</code>. For example,</p>
+
+<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+</pre>
+
+<p>An object can have a property that is itself another object. For example, suppose you define an object called <code>person</code> as follows:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>and then instantiate two new <code>person</code> objects as follows:</p>
+
+<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Then, you can rewrite the definition of <code>Car</code> to include an <code>owner</code> property that takes a <code>person</code> object, as follows:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>To instantiate the new objects, you then use the following:</p>
+
+<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects <code>rand</code> and <code>ken</code> as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<p>Note that you can always add a property to a previously defined object. For example, the statement</p>
+
+<pre class="brush: js">car1.color = 'black';
+</pre>
+
+<p>adds a property <code>color</code> to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the <code>Car</code> object type.</p>
+
+<h3 id="Using_the_Object.create_method">Using the <code>Object.create</code> method</h3>
+
+<p>Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.</p>
+
+<pre class="brush: js">// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes</pre>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the <code>prototype</code> object of the constructor. See <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> for more information.</p>
+
+<h2 id="Indexing_object_properties">Indexing object properties</h2>
+
+<p>You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.</p>
+
+<p>This restriction applies when you create an object and its properties with a constructor function (as we did previously with the <code>Car</code> object type) and when you define individual properties explicitly (for example, <code>myCar.color = "red"</code>). If you initially define an object property with an index, such as <code>myCar[5] = "25 mpg"</code>, you subsequently refer to the property only as <code>myCar[5]</code>.</p>
+
+<p>The exception to this rule is objects reflected from HTML, such as the <code>forms</code> array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <code>&lt;FORM&gt;</code> tag in a document has a <code>NAME</code> attribute of "myForm", you can refer to the form as <code>document.forms[1]</code> or <code>document.forms["myForm"]</code> or <code>document.forms.myForm</code>.</p>
+
+<h2 id="Defining_properties_for_an_object_type">Defining properties for an object type</h2>
+
+<p>You can add a property to a previously defined object type by using the <code>prototype</code> property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a <code>color</code> property to all objects of type <code>Car</code>, and then assigns a value to the <code>color</code> property of the object <code>car1</code>.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = 'black';
+</pre>
+
+<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> of the <code>Function</code> object in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> for more information.</p>
+
+<h2 id="Defining_methods">Defining methods</h2>
+
+<p>A <em>method</em> is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more details. An example is:</p>
+
+<pre class="brush: js">objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+</pre>
+
+<p>where <code>objectName</code> is an existing object, <code>methodname</code> is the name you are assigning to the method, and <code>functionName</code> is the name of the function.</p>
+
+<p>You can then call the method in the context of the object as follows:</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined <code>Car</code> objects; for example,</p>
+
+<pre class="brush: js">function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+</pre>
+
+<p>where <code>pretty_print</code> is a function to display a horizontal rule and a string. Notice the use of <code>this</code> to refer to the object to which the method belongs.</p>
+
+<p>You can make this function a method of <code>Car</code> by adding the statement</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>to the object definition. So, the full definition of <code>Car</code> would now look like</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Then you can call the <code>displayCar</code> method for each of the objects as follows:</p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Using_this_for_object_references">Using <code>this</code> for object references</h2>
+
+<p>JavaScript has a special keyword, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, that you can use within a method to refer to the current object. For example, suppose you have a function called <code>validate</code> that validates an object's <code>value</code> property, given the object and the high and low values:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival)) {
+    alert('Invalid Value!');
+  }
+}
+</pre>
+
+<p>Then, you could call <code>validate</code> in each form element's <code>onchange</code> event handler, using <code>this</code> to pass it the element, as in the following example:</p>
+
+<pre class="brush: html">&lt;input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)"&gt;
+</pre>
+
+<p>In general, <code>this</code> refers to the calling object in a method.</p>
+
+<p>When combined with the <code>form</code> property, <code>this</code> can refer to the current object's parent form. In the following example, the form <code>myForm</code> contains a <code>Text</code> object and a button. When the user clicks the button, the value of the <code>Text</code> object is set to the form's name. The button's <code>onclick</code> event handler uses <code>this.form</code> to refer to the parent form, <code>myForm</code>.</p>
+
+<pre class="brush: html">&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Defining_getters_and_setters">Defining getters and setters</h2>
+
+<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is a method that gets the value of a specific property. A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p>
+
+<p>The following illustrates how getters and setters could work for a user-defined object <code>o</code>.</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+</pre>
+
+<p>The <code>o</code> object's properties are:</p>
+
+<ul>
+ <li><code>o.a</code> — a number</li>
+ <li><code>o.b</code> — a getter that returns <code>o.a</code> plus 1</li>
+ <li><code>o.c</code> — a setter that sets the value of <code>o.a</code> to half of the value <code>o.c</code> is being set to</li>
+</ul>
+
+<p>Please note that function names of getters and setters defined in an object literal using "[gs]et <em>property</em>()" (as opposed to <code>__define[GS]etter__</code> ) are not the names of the getters themselves, even though the <code>[gs]et <em>propertyName</em>(){ }</code> syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et <em>property</em>()" syntax, define an explicitly named function programmatically using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (or the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code> legacy fallback).</p>
+
+<p>The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a <code>year</code> property to all instances of the predefined <code>Date</code> class. It uses the <code>Date</code> class's existing <code>getFullYear</code> and <code>setFullYear</code> methods to support the <code>year</code> property's getter and setter.</p>
+
+<p>These statements define a getter and setter for the year property:</p>
+
+<pre class="brush: js">var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+</pre>
+
+<p>These statements use the getter and setter in a <code>Date</code> object:</p>
+
+<pre class="brush: js">var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<p>In principle, getters and setters can be either</p>
+
+<ul>
+ <li>defined using <a href="#Object_initializers">object initializers</a>, or</li>
+ <li>added later to any object at any time using a getter or setter adding method.</li>
+</ul>
+
+<p>When defining getters and setters using <a href="#Object_initializers">object initializers</a> all you need to do is to prefix a getter method with <code>get</code> and a setter method with <code>set</code>. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p>Getters and setters can also be added to an object at any time after creation using the <code>Object.defineProperties</code> method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:</p>
+
+<pre class="brush: js">var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+</pre>
+
+<p>Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.</p>
+
+<h2 id="Deleting_properties">Deleting properties</h2>
+
+<p>You can remove a non-inherited property by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator. The following code shows how to remove a property.</p>
+
+<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+</pre>
+
+<p>You can also use <code>delete</code> to delete a global variable if the <code>var</code> keyword was not used to declare the variable:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<h2 id="Comparing_Objects">Comparing Objects</h2>
+
+<p>In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
+
+<pre class="brush: js">// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false</pre>
+
+<pre class="brush: js">// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+</pre>
+
+<pre class="brush: js">fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+</pre>
+
+<p>For more information about comparison operators, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li>
+ <li>To learn about ECMAScript 2015 classes (a new way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}</p>
diff --git a/files/de/web/javascript/guide/modules/index.html b/files/de/web/javascript/guide/modules/index.html
new file mode 100644
index 0000000000..25dfa9cadb
--- /dev/null
+++ b/files/de/web/javascript/guide/modules/index.html
@@ -0,0 +1,446 @@
+---
+title: JavaScript modules
+slug: Web/JavaScript/Guide/Modules
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>
+<p><strong>Ein Hintergrund zu den Modulen</strong></p>
+
+<p><br>
+ JavaScript-Programme haben ziemlich klein angefangen - in der Anfangszeit wurde es hauptsächlich für isolierte Skripting-Aufgaben verwendet, um Ihren Webseiten bei Bedarf ein wenig Interaktivität zu verleihen, so dass große Skripte im Allgemeinen nicht erforderlich waren. Spätestens nach ein paar Jahren haben wir nun komplette Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das auch in anderen Kontexten verwendet wird (z.B. Node.js).</p>
+
+<p>Daher war es in den letzten Jahren sinnvoll, darüber nachzudenken, Mechanismen zur Aufteilung von JavaScript-Programmen in separate Module bereitzustellen, die bei Bedarf importiert werden können. Node.js besitzt diese Fähigkeit schon seit langem, und es gibt eine Reihe von JavaScript-Bibliotheken und Frameworks, die die Verwendung von Modulen ermöglichen (z.B. andere CommonJS- und AMD-basierte Modulsysteme wie RequireJS und seit kurzem auch Webpack und Babel).</p>
+
+<p>Die gute Nachricht ist, dass moderne Browser begonnen haben, die Modulfunktionalität nativ zu unterstützen, und genau darum geht es in diesem Artikel. Das kann nur eine gute Sache sein - Browser können das Laden von Modulen optimieren und damit effizienter machen, als wenn man eine Bibliothek verwenden müsste und all diese zusätzlichen clientseitigen Verarbeitungen und zusätzlichen Roundtrips durchführen müsste.</p>
+
+<p>Übersetzt mit www.DeepL.com/Translator (kostenlose Version)</p>
+</div>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>Die Verwendung von nativen JavaScript-Modulen ist abhängig von den Import- und Export-Anweisungen {{JSxRef("Statements/import", "import")}} und{{JSxRef("Statements/export", "export")}} , deren Browserkompatibilität wie folgt ist (die Zahlen in den grünen Kästen sind wahrscheinlich die Release-Version der jeweiligen Plattform, die die Funktion unterstützt):</p>
+
+<h3 id="import">import</h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export">export</h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Introducing_an_example">Introducing an example</h2>
+
+<p>To demonstrate usage of modules, we've created a <a href="https://github.com/mdn/js-examples/tree/master/modules">simple set of examples</a> that you can find on GitHub. These examples demonstrate a simple set of modules that create a <a href="/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML &lt;canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code>&lt;canvas&gt;</code></a> element on a webpage, and then draw (and report information about) different shapes on the canvas.</p>
+
+<p>These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to download the examples and run them locally, you'll need to run them through a local web server.</p>
+</div>
+
+<h2 id="Basic_example_structure">Basic example structure</h2>
+
+<p>In our first example (see <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) we have a file structure as follows:</p>
+
+<pre>index.html
+main.js
+modules/
+    canvas.js
+    square.js</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.</p>
+</div>
+
+<p>The modules directory's two modules are described below:</p>
+
+<ul>
+ <li><code>canvas.js</code> — contains functions related to setting up the canvas:
+
+  <ul>
+   <li><code>create()</code> — creates a canvas with a specified <code>width</code> and <code>height</code> inside a wrapper <a href="/en-US/docs/Web/HTML/Element/div" title="The HTML Content Division element (&lt;div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS."><code>&lt;div&gt;</code></a> with a specified ID, which is itself appended inside a specified parent element. Returns an object containing the canvas's 2D context and the wrapper's ID.</li>
+   <li><code>createReportList()</code> — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into. Returns the list's ID.</li>
+  </ul>
+ </li>
+ <li><code>square.js</code> — contains:
+  <ul>
+   <li><code>name</code> — a constant containing the string 'square'.</li>
+   <li><code>draw()</code> — draws a square on a specified canvas, with a specified size, position, and color. Returns an object containing the square's size, position, and color.</li>
+   <li><code>reportArea()</code> — writes a square's area to a specific report list, given its length.</li>
+   <li><code>reportPerimeter()</code> — writes a square's perimeter to a specific report list, given its length.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Aside_—_.mjs_versus_.js">Aside — <code>.mjs</code> versus <code>.js</code></h2>
+
+<p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href="https://v8.dev/features/modules#mjs">V8's documentation recommends this</a>, for example. The reasons given are:</p>
+
+<ul>
+ <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li>
+ <li>It ensures that your module files are parsed as a module by runtimes such as <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a>, and build tools such as <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li>
+</ul>
+
+<p>However, we decided to keep to using <code>.js</code>, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript. Most servers already set the correct type for <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href="https://pages.github.com/">GitHub Pages</a> and <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> for Node.js.</p>
+
+<p>This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> for <code>.mjs</code> files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.</p>
+
+<p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p>
+
+<p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for "normal" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p>
+
+<p>It is also worth noting that:</p>
+
+<ul>
+ <li>Some tools may never support <code>.mjs</code>, such as <a href="https://www.typescriptlang.org/">TypeScript</a>.</li>
+ <li>The <code>&lt;script type="module"&gt;</code> attribute is used to denote when a module is being pointed to, as you'll see below.</li>
+</ul>
+
+<h2 id="Exporting_module_features">Exporting module features</h2>
+
+<p>The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.</p>
+
+<p>The easiest way to use it is to place it in front of any items you want exported out of the module, for example:</p>
+
+<pre class="brush: js;">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>You can export functions, <code>var</code>, <code>let</code>, <code>const</code>, and — as we'll see later — classes. They need to be top-level items; you can't use <code>export</code> inside a function, for example.</p>
+
+<p>A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces. For example:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importing_features_into_your_script">Importing features into your script</h2>
+
+<p>Once you've exported some features out of your module, you need to import them into your script to be able to use them. The simplest way to do this is as follows:</p>
+
+<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+
+<p>You use the {{JSxRef("Statements/import", "import")}} statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our <code>basic-modules</code> example would be <code>/js-examples/modules/basic-modules</code>.</p>
+
+<p>However, we've written the path a bit differently — we are using the dot (<code>.</code>) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. This is much better than writing out the entire relative path each time, as it is shorter, and it makes the URL portable — the example will still work if you move it to a different location in the site hierarchy.</p>
+
+<p>So for example:</p>
+
+<pre>/js-examples/modules/basic-modules/modules/square.js</pre>
+
+<p>becomes</p>
+
+<pre>./modules/square.js</pre>
+
+<p>You can see such lines in action in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In some module systems, you can omit the file extension and the dot (e.g. <code>'/modules/square'</code>). This doesn't work in native JavaScript modules.</p>
+</div>
+
+<p>Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in <code>main.js</code>, below the import lines:</p>
+
+<pre class="brush: js;">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<h2 id="Applying_the_module_to_your_HTML">Applying the module to your HTML</h2>
+
+<p>Now we just need to apply the <code>main.js</code> module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.</p>
+
+<p>First of all, you need to include <code>type="module"</code> in the <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code></a> element, to declare this script as a module:</p>
+
+<pre class="brush: html; no-line-numbers">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+
+<p>The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".</p>
+
+<p>You can only use <code>import</code> and <code>export</code> statements inside modules; not regular scripts.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can also import modules into internal scripts, as long as you include <code>type="module"</code>, for example <code>&lt;script type="module"&gt; //include script here &lt;/script&gt;</code>.</p>
+</div>
+
+<h2 id="Other_differences_between_modules_and_standard_scripts">Other differences between modules and standard scripts</h2>
+
+<ul>
+ <li>You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server.</li>
+ <li>Also, note that you might get different behavior from sections of script defined inside modules as opposed to in standard scripts. This is because modules use {{JSxRef("Strict_mode", "strict mode", "", 1)}} automatically.</li>
+ <li>There is no need to use the <code>defer</code> attribute (see <a href="/en-US/docs/Web/HTML/Element/script#Attributes" title="The HTML &lt;script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code>&lt;script&gt;</code> attributes</a>) when loading a module script; modules are deferred automatically.</li>
+ <li>Modules are only executed once, even if they have been referenced in multiple <code>&lt;script&gt;</code> tags.</li>
+ <li>Last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. Therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the JavaScript console, for example. You'll still get syntax errors shown in the DevTools, but you'll not be able to use some of the debugging techniques you might have expected to use.</li>
+</ul>
+
+<h2 id="Default_exports_versus_named_exports">Default exports versus named exports</h2>
+
+<p>The functionality we've exported so far has been comprised of <strong>named exports</strong> — each item (be it a function, <code>const</code>, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.</p>
+
+<p>There is also a type of export called the <strong>default export</strong> — this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems (as explained nicely in <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 In Depth: Modules</a> by Jason Orendorff; search for "Default exports").</p>
+
+<p>Let's look at an example as we explain how it works. In our basic-modules <code>square.js</code> you can find a function called <code>randomSquare()</code> that creates a square with a random color, size, and position. We want to export this as our default, so at the bottom of the file we write this:</p>
+
+<pre class="brush: js;">export default randomSquare;</pre>
+
+<p>Note the lack of curly braces.</p>
+
+<p>We could instead prepend <code>export default</code> onto the function and define it as an anonymous function, like this:</p>
+
+<pre class="brush: js;">export default function(ctx) {
+  ...
+}</pre>
+
+<p>Over in our <code>main.js</code> file, we import the default function using this line:</p>
+
+<pre class="brush: js;">import randomSquare from './modules/square.js';</pre>
+
+<p>Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that <code>randomSquare</code> is it. The above line is basically shorthand for:</p>
+
+<pre class="brush: js;">import {default as randomSquare} from './modules/square.js';</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The as syntax for renaming exported items is explained below in the <a href="#Renaming_imports_and_exports">Renaming imports and exports</a> section.</p>
+</div>
+
+<h2 id="Avoiding_naming_conflicts">Avoiding naming conflicts</h2>
+
+<p>So far, our canvas shape drawing modules seem to be working OK. But what happens if we try to add a module that deals with drawing another shape, like a circle or triangle? These shapes would probably have associated functions like <code>draw()</code>, <code>reportArea()</code>, etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors.</p>
+
+<p>Fortunately there are a number of ways to get around this. We'll look at these in the following sections.</p>
+
+<h2 id="Renaming_imports_and_exports">Renaming imports and exports</h2>
+
+<p>Inside your <code>import</code> and <code>export</code> statement's curly braces, you can use the keyword <code>as</code> along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.</p>
+
+<p>So for example, both of the following would do the same job, albeit in a slightly different way:</p>
+
+<pre class="brush: js;">// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
+
+<pre class="brush: js;">// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';</pre>
+
+<p>Let's look at a real example. In our <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a> directory you'll see the same module system as in the previous example, except that we've added <code>circle.js</code> and <code>triangle.js</code> modules to draw and report on circles and triangles.</p>
+
+<p>Inside each of these modules, we've got features with the same names being exported, and therefore each has the same <code>export</code> statement at the bottom:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>When importing these into <code>main.js</code>, if we tried to use</p>
+
+<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
+
+<p>The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).</p>
+
+<p>Instead we need to rename the imports so that they are unique:</p>
+
+<pre class="brush: js;">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre>
+
+<p>Note that you could solve the problem in the module files instead, e.g.</p>
+
+<pre class="brush: js;">// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js;">// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
+
+<p>And it would work just the same. What style you use is up to you, however it arguably makes more sense to leave your module code alone, and make the changes in the imports. This especially makes sense when you are importing from third party modules that you don't have any control over.</p>
+
+<h2 id="Creating_a_module_object">Creating a module object</h2>
+
+<p>The above method works OK, but it's a little messy and longwinded. An even better solution is to import each module's features inside a module object. The following syntax form does that:</p>
+
+<pre class="brush: js;">import * as Module from './modules/module.js';</pre>
+
+<p>This grabs all the exports available inside <code>module.js</code>, and makes them available as members of an object <code>Module</code>, effectively giving it its own namespace. So for example:</p>
+
+<pre class="brush: js;">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>Again, let's look at a real example. If you go to our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form:</p>
+
+<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>The imports on the other hand look like this:</p>
+
+<pre class="brush: js;">import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';</pre>
+
+<p>In each case, you can now access the module's imports underneath the specified object name, for example:</p>
+
+<pre class="brush: js;">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>So you can now write the code just the same as before (as long as you include the object names where needed), and the imports are much neater.</p>
+
+<h2 id="Modules_and_classes">Modules and classes</h2>
+
+<p>As we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style.</p>
+
+<p>You can see an example of our shape drawing module rewritten with ES classes in our <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> directory. As an example, the <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> file now contains all its functionality in a single class:</p>
+
+<pre class="brush: js;">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>which we then export:</p>
+
+<pre class="brush: js;">export { Square };</pre>
+
+<p>Over in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, we import it like this:</p>
+
+<pre class="brush: js;">import { Square } from './modules/square.js';</pre>
+
+<p>And then use the class to draw our square:</p>
+
+<pre class="brush: js;">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Aggregating_modules">Aggregating modules</h2>
+
+<p>There will be times where you'll want to aggregate modules together. You might have multiple levels of dependencies, where you want to simplify things, combining several submodules into one parent module. This is possible using export syntax of the following forms in the parent module:</p>
+
+<pre class="brush: js;">export * from 'x.js'
+export { name } from 'x.js'</pre>
+
+<p>For an example, see our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> directory. In this example (based on our earlier classes example) we've got an extra module called <code>shapes.js</code>, which aggregates all the functionality from <code>circle.js</code>, <code>square.js</code>, and <code>triangle.js</code> together. We've also moved our submodules inside a subdirectory inside the <code>modules</code> directory called <code>shapes</code>. So the module structure in this example is:</p>
+
+<pre>modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js</pre>
+
+<p>In each of the submodules, the export is of the same form, e.g.</p>
+
+<pre class="brush: js;">export { Square };</pre>
+
+<p>Next up comes the aggregation part. Inside <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, we include the following lines:</p>
+
+<pre class="brush: js;">export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';</pre>
+
+<p>These grab the exports from the individual submodules and effectively make them available from the <code>shapes.js</code> module.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The exports referenced in <code>shapes.js</code> basically get redirected through the file and don't really exist there, so you won't be able to write any useful related code inside the same file.</p>
+</div>
+
+<p>So now in the <code>main.js</code> file, we can get access to all three module classes by replacing</p>
+
+<pre class="brush: js;">import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';</pre>
+
+<p>with the following single line:</p>
+
+<pre class="brush: js;">import { Square, Circle, Triangle } from './modules/shapes.js';</pre>
+
+<h2 id="Dynamic_module_loading">Dynamic module loading</h2>
+
+<p>The newest part of the JavaScript modules functionality to be available in browsers is dynamic module loading. This allows you to dynamically load modules only when they are needed, rather than having to load everything up front. This has some obvious performance advantages; let's read on and see how it works.</p>
+
+<p>This new functionality allows you to call {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} as a function, passing it the path to the module as a parameter. It returns a {{JSxRef("Promise")}}, which fulfills with a module object (see <a href="#Creating_a_module_object">Creating a module object</a>) giving you access to that object's exports, e.g.</p>
+
+<pre class="brush: js;">import('./modules/myModule.js')
+  .then((module) =&gt; {
+    // Do something with the module.
+  });</pre>
+
+<p>Let's look at an example. In the <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a> directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape.</p>
+
+<p>In this example we've only made changes to our <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> and <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> files — the module exports remain the same as before.</p>
+
+<p>Over in <code>main.js</code> we've grabbed a reference to each button using a <a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> call, for example:</p>
+
+<pre class="brush: js;">let squareBtn = document.querySelector('.square');</pre>
+
+<p>We then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape:</p>
+
+<pre class="brush: js;">squareBtn.addEventListener('click', () =&gt; {
+  import('./modules/square.js').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>Note that, because the promise fulfillment returns a module object, the class is then made a subfeature of the object, hence we now need to access the constructor with <code>Module.</code> prepended to it, e.g. <code>Module.Square( ... )</code>.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>Here are a few tips that may help you if you are having trouble getting your modules to work. Feel free to add to the list if you discover more!</p>
+
+<ul>
+ <li>We mentioned this before, but to reiterate: <code>.js</code> files need to be loaded with a MIME-type of <code>text/javascript</code> (or another JavaScript-compatible MIME-type, but <code>text/javascript</code> is recommended), otherwise you'll get a strict MIME type checking error like "The server responded with a non-JavaScript MIME type".</li>
+ <li>If you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves <code>.js</code> files with the correct MIME type.</li>
+ <li>Because <code>.mjs</code> is a non-standard file extension, some operating systems might not recognise it, or try to replace it with something else. For example, we found that macOS was silently adding on <code>.js</code> to the end of <code>.mjs</code> files and then automatically hiding the file extension. So all of our files were actually coming out as <code>x.mjs.js</code>. Once we turned off automatically hiding file extensions, and trained it to accept <code>.mjs</code>, it was OK.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Using JavaScript modules on the web</a>, by Addy Osmani and Mathias Bynens</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li>Axel Rauschmayer's book <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/de/web/javascript/guide/numbers_and_dates/index.html b/files/de/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..b38881bb07
--- /dev/null
+++ b/files/de/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,378 @@
+---
+title: Numbers and dates
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Ausdruecke_und_Operatoren", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p class="summary">Dieses Kapitel ist eine Einleitung in die Nutzung von Nummern und Daten in JavaScript.</p>
+
+<h2 id="Nummern">Nummern</h2>
+
+<p>In JavaScript sind alle Nummern als <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-Bit Binärformat IEEE 754</a> umgesetzt (z.b. eine Zahl zwischen -(2<sup>53</sup> -1) und 2<sup>53</sup> -1). <strong>Es gibt keinen extra Datentypen für ganze Zahlen </strong>(z. B. Integer in anderen Programmiersprachen). Neben der Repräsentation von Gleitkommazahlen hat der Nummern Typ noch drei symbolische Werte: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, und {{jsxref("NaN")}} (not-a-number; keine Nummer). Siehe auch in das Kapitel <a href="/de/docs/Web/JavaScript/Datenstrukturen">JavaScript Datentypen und Strukturen</a> für den Umgang mit anderen primitiven Typen in JavaScript.</p>
+
+<p>Es gibt vier verschiedene Nummernliterale: Dezimal-, Binär-, Oktal- und Hexadezimalzahlen.</p>
+
+<h3 id="Dezimalzahlen">Dezimalzahlen</h3>
+
+<pre class="brush: js">1234567890
+42
+
+// Vorsichtig mit führenden Nullen in der Darstellung:
+
+0888 // wird zu 888 Dezimal
+0777 // wird im non-strict Modus zu 511 in Dezimal
+</pre>
+
+<p>Zu beachten ist, dass das Dezimalliteral mit einer 0 beginnen kann, jedoch wird die Zahl als Oktalzahl interpretiert, wenn die nächste Zahl nach der 0 kleiner als 8 ist.</p>
+
+<h3 id="Binärzahlen">Binärzahlen</h3>
+
+<p>Die Syntax von Binärzahlen schreibt vor, dass die Zahl mit einer 0 gefolgt von einem "B" (0b oder 0B) beginnen muss. Wenn die Ziffern nach dem 0b nicht 0 oder 1 sind, wird der folgenden <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> erzeugt: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="Oktalzahlen">Oktalzahlen</h3>
+
+<p>Die Syntax von Oktalzahlen schreibt vor, dass die Nummern mit einer 0 beginnen. Dahinter sind Ziffern mit den Werten 0 bis 7 möglich. Wenn die Ziffern größer als 7 sind, wird die Zahl als Dezimalzahl interpretiert.</p>
+
+<pre class="brush: js">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<p>Der Strict mode in ECMAScript 5 verbietet Oktalzahlen. Die Syntax der Oktalzahlen ist in ECMAScript 5 nicht vorhanden, jedoch wird es von allen Browser, durch eine führende 0, unterstützt: <code>0644 === 420</code> und<code> "\045" === "%"</code>. In ECMAScript 2015 sind Oktalzahlen mit dem Präfix <code>0o</code> unterstützt:</p>
+
+<pre class="brush: js">var a = 0o10; // ES2015: 8
+</pre>
+
+<h3 id="Hexadezimalzahlen">Hexadezimalzahlen</h3>
+
+<p>Hexadezimalzahlen können geschrieben werden, indem der Präfix <code>0x</code> oder <code>0X</code> genutzt wird. Wenn die Ziffern nach 0x nicht eines der Zeichen 0123456789ABCDEF entspricht, wird folgender <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>  erzeugt: "Identifier starts immediately after numeric literal".</p>
+
+<pre>0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Potenzierung">Potenzierung</h3>
+
+<pre>1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</pre>
+
+<h2 id="Number_Objekt"><code>Number</code> Objekt</h2>
+
+<p>Das vordefinierte {{jsxref("Number")}} Objekt enthält Eigenschaften für nummerische Konstanten, wie zum Beispiel Maximalwerte, not-a-number (keine Nummer) und Unendlich. Man kann die Werte dieser Eigenschaften nicht ändern. Die Eigenschaften werden folgendermaßen eingesetzt:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>Man verweist immer auf die Eigenschaften des vordefinierten <code>Number</code> Objekt (wie oben gezeigt) und nicht auf die Eigenschaft eines selbst erstellten <code>Number</code> Objektes.</p>
+
+<p>Die folgende Tabelle fasst du Eigenschaften des <code>Number</code> Objektes zusammen:</p>
+
+<table class="standard-table">
+ <caption>Eigenschaften von <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Eigenschaft</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>Die größte repräsentierbare Zahl</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>Die kleinste repräsentierbare Zahl</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>Spezieller Wert für "keine Zahl" ("not a number")</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>Spezieller Wert für negativ Unendlich; wird bei einem Overflow zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>Spezieller Wert für positiv Unendlich; wird bei einem Overflow zurückgegeben.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>Der Unterschied zwischen eins und der kleinsten Zahl größer als eins, die als {{jsxref("Number")}} repräsentiert werden kann.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Kleinste sichere ganze Zahl in JavaScript.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>Größte sichere ganze Zahl in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Number</code></caption>
+ <thead>
+  <tr>
+   <th>Methode</th>
+   <th>Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>Liest eine String-Argument ein und gibt eine Floating-Point Zahl zurück.<br>
+    Macht das gleiche wie die globale {{jsxref("parseFloat", "parseFloat()")}} Funktion.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>Liest eine String-Argument ein und gibt eine ganze Zahl in der spezifizierten Basis zurück.<br>
+    Macht das gleiche wie die globale {{jsxref("parseInt", "parseInt()")}} Funktion.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine endliche Zahl ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine ganze Zahl ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist. Diese Funktion ist eine robustere Version der globalen {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>Erkennt, ob ein übergebener Wert eine sichere ganze Zahl ist.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Der <code>Number</code> Prototyp enthält Methoden zum Zurückgeben von Informationen eines <code>Number</code> Objekts in verschiedenen Formaten. Die folgende Tabelle fasst die Methoden von <code>Number.prototype</code> zusammen:</p>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in Exponential-Notation zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in Festkomma-Notation zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Gibt eine String-Repräsentation der Zahl in einer spezifizierten Präzision in der Festkomma-Notation zurück.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Math_Objekt"><code>Math</code> Objekt</h2>
+
+<p>Das eingebaute {{jsxref("Math")}} Objekt hat Eigenschaften und Methoden für mathematische Konstanten und Funktionen. Zum Beispiel enthält die Eigenschaft <code>PI</code> des <code>Math</code> Objektes den Wert von Pi (3,141...), welche wie folgt in einer Anwendung eingesetzt wird:</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>Genauso sind mathematische Standardfunktionen Methoden von <code>Math</code>. Dabei sind trigonometrische, logarithmische, exponentielle und ander Funktionen enthalten. Zum Beispiel wird eine trigonometrische Funktion wie folgt eingesetzt:</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<p>Alle trigonometrischen Funktionen von <code>Math</code> erwarten Argumente im Radiantenmaß.</p>
+
+<p>Die folgende Tabelle fasst die Methoden des <code>Math</code> Objektes zusammen:</p>
+
+<table class="standard-table">
+ <caption>Methoden von <code>Math</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>Absoluter Wert.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>Trigonometrische Standardfunktionen; Argumente im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>Inverse trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>Hyperbolische trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>Inverse hyperbolische trigonometrische Standardfunktionen; Rückgabewert im Radiantenmaß.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>Exponential- und Logarithmus-Funktionen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>Gibt die größte/kleinste ganze Zahl kleiner/größer oder gleich dem Argument zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Gibt den kleinsten oder den größten Wert aus einer mit Komma getrennten Liste von Zahlen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>Gibt eine Zufallszahl zwischen 0 und 1 zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Rundungs- und Abschnittsfunktionen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>Quadratwurzel, kubische Wurzel, Quadratwurzel von der Summe von Quadrierten Argumenten.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>Das Vorzeichen einer Zahl, welches Angibt, ob eine Zahl positiv, negativ oder null ist.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Anzahl der führenden 0-Bits in der 32-Bit Binärrepräsentation.<br>
+    Das Resultat der C-Ähnlichen 32-Bit Multiplikation von 2 Argumenten.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Im Gegensatz zu vielen Anderen Objekten, erzeigt man nie selber ein neues <code>Math</code> Objekt. Man benutzt immer das globale Objekt.</p>
+
+<h2 id="Date_Objekt"><code>Date</code> Objekt</h2>
+
+<p>JavaScript hat keinen Datums-Datentypen. Allerdings kann das {{jsxref("Date")}} Objekt und seine Methoden genutzt werden, um mit Daten und Zeiten in einer Applikation zu arbeiten. Das <code>Date</code>-Objekt hat sehr viele Methoden für das Einstellen, Abfragen und Manipulieren von Daten. Es hat keine Eigenschaften.</p>
+
+<p>JavaScript verarbeitet Daten ähnlich wie es in Java gemacht wird. In beiden Sprachen sind viele Methoden gleich und beide Sprachen speichern das Datum als Unix Zeitstempel, also die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00, ab.</p>
+
+<p>Der Wertebereich eines <code>Date</code> Objektes ist zwischen -100.000.000 und 100.000.000 Tagen relativ zum 1. Januar 1970 UTC.</p>
+
+<p>Das erstellen eines <code>Date</code> Objektes:</p>
+
+<pre class="brush: js">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>Dabei ist <code>dateObjectName</code> der Name der Variablen, in der das erstellte <code>Date</code> Objekt gespeichert wird.</p>
+
+<p>Unter <code>parameters</code> können folgenden Werte eingesetzt werden:</p>
+
+<ul>
+ <li>Nichts: Erstellt das aktuelle Datum mit der aktuellen Zeit. Zum Beispiel: <code>today = new Date();</code>.</li>
+ <li>Eine Stringrepräsentation eines Datums mit folgenden Werten: "Monat Tag, Jahr Stunde:Minute:Sekunde". Zum Beispiel: <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Wenn die Stunden, Minuten und Sekunden nicht angegeben werden, werden diese auf 0 gesetzt.</li>
+ <li>Eine Menge von ganzen Zahlen für das Jahr, den Monat und den Tag. Zum Beispiel: <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Eine Menge von ganzen Zahlen für das Jahr, den Monat, den Tag, die Stunde, die Minute und die Sekunde. Zum Beispiel: <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)</code>.</li>
+</ul>
+
+<h3 id="Methoden_des_Date_Objektes">Methoden des <code>Date</code> Objektes</h3>
+
+<p>Das Methoden des <code>Date</code> Objektes für die Behandlung von Daten und Zeiten werden in folgende Kategorien eingeteilt:</p>
+
+<ul>
+ <li>"set"-Methoden für das Einstellten von Datums- und Zeit-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"get"-Methoden für das Abfragen von Datums- und Zeit-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"to"-Methoden für das Erstellen von String-Werten eines <code>Date</code>-Objektes.</li>
+ <li>"parse"- und "UTC"-Methoden für das Einlesen von String-Werten.</li>
+</ul>
+
+<p>Mit den "get"- und "set"-Methoden können Sekunden, Minuten, Stunden, Tag des Monats, Wochentag, Monat und Jahr separat eingestellt und abgefragt werden. Es gibt eine <code>getDay</code>-Methode, welche den Wochentag zurückgibt, es gibt aber keine vergleichbare <code>setDay</code>-Methode, weil der Wochentag automatisch eingestellt wird. Diese Methoden benutzen ganze Zahlen um folgende Werte darzustellen:</p>
+
+<ul>
+ <li>Sekunden und Minuten: 0 bis 59</li>
+ <li>Stunden: 0 bis 23</li>
+ <li>Tage: 0 (Sonntage) bis 6 (Samstag)</li>
+ <li>Tag (des Monats): 1 bis 31</li>
+ <li>Monat: 0 (Januar) bis 11 (Dezember)</li>
+ <li>Jahr: Jahre seit 1900</li>
+</ul>
+
+<p>Angenommen, man erstellt folgendes Datum:</p>
+
+<pre class="brush: js">var Xmas95 = new Date("December 25, 1995");
+</pre>
+
+<p>Dann gibt <code>Xmas95.getMonth()</code> 11 zurück und <code>Xmas95.getFullYear()</code> gibt 1995 zurück.</p>
+
+<p>Die <code>getTime</code> und <code>setTime</code> Methoden sind nützlich für das Vergleichen von Daten. Die <code>getTime</code> Methode gibt die Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00 eines <code>Date</code>-Objektes zurück.</p>
+
+<p>Der folgende Quelltext zeigt, wie die Anzahl der vergangenen Tage des aktuellen Jahres ermittelt werden kann:</p>
+
+<pre class="brush: js">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Stellt den Tag und den Monat ein
+endYear.setFullYear(today.getFullYear()); // Stellt das Jahr auf das aktuelle Jahr
+var msPerDay = 24 * 60 * 60 * 1000; // Anzahl der Millisekunden pro Tag
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //gibt die vergangenen Tage des aktuellen Jahres zurück
+</pre>
+
+<p>Diese Beispiel erstellt ein <code>Date</code>-Objekt namens <code>today</code>, welches das aktuelle Datum und die aktuelle Zeit enthält. Danach wird ein das <code>Date</code>-Objekt <code>endYear</code> erstellt und das Jahr wird auf das aktuelle Jahr eingestellt. Zum Schluss wird, mithilfe der Millisekunden pro Tag, die Anzahl der Tage zwischen <code>today</code> und <code>endYear</code> berechnet. Dafür wird die <code>getTime</code> Methode eingesetzt und es wird auf eine ganze Zahl von Tagen gerundet.</p>
+
+<p>Die <code>parse</code> Methode ist nützlich, um ein <code>Date</code>-Objekt aus einem String zu erstellen. Zum Beispiel verwendet der folgende Quelltext <code>parse</code> und <code>setTime</code> um das <code>IPOdate</code> einzustellen:</p>
+
+<pre class="brush: js">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Beispiel">Beispiel</h3>
+
+<p>Im folgenden Beispiel, gibt die <code>JSClock()</code> Funktion die Zeit in dem Format einer digitalen Uhr zurück.</p>
+
+<pre class="brush: js">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = "" + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = "12";
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((second &lt; 10) ? ":0" : ":") + second;
+  temp += (hour &gt;= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+</pre>
+
+<p>Die <code>JSClock</code> Funktion erstellt als erstes ein neues <code>Date</code> Objekt mit dem Namen <code>time</code>. Weil dabei keine Argumente angegeben werden, wird <code>time</code> mit dem aktuellen Datum und der aktuellen Zeit erstellt. Danach werden die Methoden <code>getHours</code>, <code>getMinutes</code>, und <code>getSeconds</code> eingesetzt, um den Wert der aktuellen Stunde, Minute und Sekunde in den Variablen  <code>hour</code>, <code>minute</code>, und <code>second</code> zu speichern.</p>
+
+<p>Die nächsten vier Statements bauen einen String-Wert mit der Zeit zusammen. Das erste Statement erstellt eine Variable <code>temp</code> und weist dieser einen Wert mit einem bedingten Ausdruck zu; wenn <code>hour</code> größer als 12 ist wird <code>hour - 12</code> zugewiesen, andernfalls nur <code>hour</code>. Wenn <code>hour</code> dann 0 ist, wird <code>hour</code> auf 12 gesetzt.</p>
+
+<p>Die nächsten Statement hängt einen den <code>minute</code>-Wert an <code>temp</code> heran. Wenn der Wert von <code>minute</code> kleiner als 10 ist, fügt der Bedingte Ausdruck einen String mit einer Null und einem Doppelpunkt an; andernfalls wird nur ein Doppelpunkt angehängt. Danach werden die Sekunden auf die gleiche weise angehängt.</p>
+
+<p>Zum Schluss fügt ein bedingter Ausdruck "P.M." an <code>temp</code> an, wenn die <code>hour</code> größer oder gleich 12 ist. Andernfalls wird "A.M." an <code>temp</code> angefügt.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Ausdruecke_und_Operatoren", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/de/web/javascript/guide/regular_expressions/index.html b/files/de/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..4710e4e352
--- /dev/null
+++ b/files/de/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,625 @@
+---
+title: Reguläre Ausdrücke
+slug: Web/JavaScript/Guide/Regular_Expressions
+tags:
+  - JavaScript
+  - ausdrücke
+  - regex
+  - reguläre
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Textformatierung", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary">Reguläre Ausdrücke sind Muster, die eingesetzt werden, um Text auf bestimmte Zeichenkombinationen zu überprüfen. Auch reguläre Ausdrücke sind Objekte bei JavaScript. Die Muster werden mit den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="exec"><code>exec</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="test"><code>test</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a> und den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="match"><code>match</code></a>, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a>,<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="search"> <code>search</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split"><code>split</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> verwendet. Dieses Kapitel beschreibt reguläre Ausdrücke in JavaScript.</p>
+
+<h2 id="Erstellen_von_regulären_Ausdrücken">Erstellen von regulären Ausdrücken</h2>
+
+<p>Ein regulärer Ausdruck kann auf zwei verschiedene Arten erstellt werden.</p>
+
+<p>Zum einen kann ein Literal verwendet werden:</p>
+
+<pre class="brush:js;">var re = /ab+c/;</pre>
+
+<p>Hierbei findet die Kompilierung des regulären Ausdrucks während der Auswertung des Skripts statt. Wenn der reguläre Ausdruck konstant bleibt, ist diese Vorgehensweise aufgrund der schnelleren Ausführungsgeschwindigkeit empfehlenswert.</p>
+
+<p>Zum anderen kann wie folgt die Konstruktorfunktion des Objekts <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="en-US/docs/JavaScript/Reference/Global Objects/RegExp">RegExp</a></code> zum Einsatz kommen:</p>
+
+<pre class="brush:js;">var re = new RegExp("ab+c");</pre>
+
+<p>Bei der Benutzung der Konstruktorfunktion wird der reguläre Ausdruck während der Laufzeit kompiliert. Sie sollte verwendet werden, wenn man weiß, dass sich das Muster während der Laufzeit ändert oder man das Muster noch nicht kennt und von einer anderen Quelle, wie z. B. der Benutzereingabe, bezieht.</p>
+
+<h2 id="Schreiben_von_Mustern_für_reguläre_Ausdrücke">Schreiben von Mustern für reguläre Ausdrücke</h2>
+
+<p>Ein Muster eines regulären Ausdrucks wird aus einfachen Zeichen, wie z. B. <code>/abc/</code> oder einer Kombination von einfachen und speziellen Zeichen, wie z. B. <code>/ab*c/</code> oder <code>/Kapitel (\d+)\.\d*/</code> erstellt. Das letzte Beispiel enthält Klammern, die zur Speicherung verwendet werden. Die Übereinstimmung im Text, welche auf das eingeklammerte Muster passt, wird hierbei für die spätere Verwendung hinterlegt, wie unter <a href="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern" title="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</a> beschrieben.</p>
+
+<h3 id="Verwendung_von_einfachen_Mustern">Verwendung von einfachen Mustern</h3>
+
+<p>Einfache Muster werden aus Zeichen konstruiert, für die man eine direkte Übereinstimmung finden möchte. Zum Beispiel passt das Muster <code>/abc/</code> nur dann für eine Zeichenkette, wenn exakt die Zeichen "abc" aufeinanderfolgend in dieser Reihenfolge vorkommen. Solch eine Übereinstimmung kommt z. B. in der Zeichenkette "Hallo, kennst du das abc?" und "Das müssen wir noch abchecken." vor. In beiden Fällen enthält die Zeichenkette die Zeichenfolge "abc". In der Zeichenkette "Stab" gibt es keine Übereinstimmung, weil die Zeichenfolge "abc" darin nicht vorkommt.</p>
+
+<h3 id="Verwendung_von_speziellen_Zeichen">Verwendung von speziellen Zeichen</h3>
+
+<p>Wenn bei der Suche nicht nur nach einer direkten Übereinstimmung, sondern z. B. nach einem oder mehreren aufeinanderfolgenden Vorkommen des Buchstabens "b" oder nach Leerräumen (sowohl Tabulator, Leerzeichen als auch Steuerzeichen) gesucht wird, kommen spezielle Zeichen zum Einsatz. Zum Beispiel stimmt das Muster <code>/ab*c/</code> mit allen Zeichenkombinationen überein, die ein "a", dann sofort nachfolgend 0 oder mehrere "b" (Das Sternchen bedeutet: 0 oder mehr Vorkommen des vorherigen Zeichens) und anschließend sofort ein "c" enthalten. Demnach wird in der Zeichenfolge "cbbabbbbcdebc" eine Übereinstimmung gefunden, weil das Muster auf die Zeichenfolge "abbbbc" passt.</p>
+
+<p>Die folgende Tabelle zeigt eine komplette Liste der speziellen Zeichen, die in regulären Ausdrücken verwendet werden, mit einer Beschreibung zu deren Bedeutung.</p>
+
+<table class="fullwidth-table">
+ <caption>Tabelle 4.1 Spezielle Zeichen in regulären Ausdrücken</caption>
+ <thead>
+  <tr>
+   <th scope="col">Zeichen</th>
+   <th scope="col">Bedeutung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>Eine der folgenden Bedeutungen:
+    <ul>
+     <li>Für Zeichen, die normalerweise buchstäblich interpretiert werden, wird mit der Voranstellung des Rückstrichs dafür gesorgt, dass das Zeichen als speziell und nicht als normales Zeichen interpretiert wird. Zum Beispiel stimmt <code>/b/</code> mit dem Zeichen "b" überein. Stellt man dem "b" einen Rückstrich voran, also <code>/\b/</code>, wird das Zeichen als spezielles Zeichen - in diesem Fall als <a href="#special-word-boundary" title="#special-word-boundary">Wortgrenze</a> - gedeutet.</li>
+     <li>Bei Zeichen, die normalerweise sofort als spezielle Zeichen interpretiert werden, bewirkt der Rückstrich genau das Gegenteil, d.h. dem Zeichen wird die spezielle Bedeutung genommen und es wird als einfaches Zeichen interpretiert. Zum Beispiel ist das Zeichen <code>*</code> (Sternchen) ein spezielles Zeichen mit der Bedeutung: 0 oder mehr Vorkommen des vorherigen Zeichens. Der Ausdruck <code>/a*/</code> steht demnach für 0 oder mehr a's. Um dem Zeichen <code>*</code> (Sternchen) die spezielle Bedeutung zu nehmen, stellt man ihm einen Rückstrich voran, z. B. stimmt <code>/a\*/</code> mit "a*" überein - der Stern wird nun als einfaches Zeichen interpretiert.</li>
+     <li>Das Maskieren eines Zeichens durch die Voranstellung eines Rückstrichs wird auch als <em>escapen</em> bezeichnet. Außerdem sollte man sich merken, dass bei Verwendung der new RegExp("pattern")-Notation auch der Rückstrich selbst eine spezielle Bedeutung hat und maskiert werden muss, wenn er als normales Zeichen interpretiert werden soll.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>
+    <p>Das Zirkumflex-Zeichen steht für den Anfang der Eingabe. Wenn das Flag für mehrere Zeilen (multiline flag) gesetzt ist, wird auch eine Übereinstimmung direkt hinter dem Zeichen für einen Zeilenumbruch (<code>\n</code>) gefunden.</p>
+
+    <p>Der Ausdruck <code>/^A/</code> passt zwar auf das "A" in "Apfel", nicht jedoch auf das "A" in "Ein Apfel", weil das "A" bei dieser Zeichenkette nicht am Anfang steht.</p>
+
+    <p>Achtung: Wenn das Zeichen innerhalb von eckigen Klammern (einer Zeichenauswahl) steht, hat es eine andere Bedeutung (siehe <a href="#special-negated-character-set" title="#special-negated-character-set"><code>[^xyz]</code></a> in dieser Tabelle).</p>
+
+    <p>Zum Beispiel stimmt <code>/[^a-zA-Z\s]/</code> mit der "3" in "Ich habe 3 Schwestern" überein. Die eckigen Klammern kennzeichnen die Zeichenauswahl. Das Zirkumflex innerhalb dieser Klammern negiert die aufgezählten Zeichen: nicht a bis z, nicht A bis Z und keine Leerräume wie das Leerzeichen oder die Steuerzeichen; übrig bleibt allein die "3".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/de/docs/JavaScript/Guide/Regular_Expressions#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Das Dollarzeichen steht für das Ende der Eingabe. Wenn das Flag für mehrere Zeilen (multiline flag) gesetzt ist, wird auch eine Übereinstimmung direkt hinter dem Zeichen für einen Zeilenumbruch (\n) gefunden.</p>
+
+    <p>Zum Beispiel wird mit <code>/t$/</code> bei "Butter" keine Übereinstimmung gefunden, jedoch bei "Brot", weil das "t" am Ende steht.</p>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Das Sternchen steht für eine beliebige Anzahl des vorangestellten Zeichens, also 0-mal oder öfter. Das Zeichen muss also nicht unbedingt vorkommen, sondern darf auch einfach nicht vorhanden sein. Das Sternchen wird gerne in Kombination mit dem . (Punkt) als Platzhalter für "ein beliebiges Zeichen beliebig oft" verwendet.</p>
+
+    <p>Der Ausdruck <code>/bu*/</code> passt auf "buuuuu" in "Ein Geist buuuuuht" als auch auf "b"  in "Ein Blauwal blubbert", jedoch nicht auf "Eine Katze kratzt".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Steht für das vorangestellte Zeichen einmal oder öfter und ist äquivalent zu <code>{1,}</code>. Das Zeichen muss für einen Treffer also mindestens einmal vorkommen.</p>
+
+    <p>Zum Beispiel passt <code>/a+/</code> auf "a" in "Schokolade" und alle a's in "Schokolaaaade".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>
+    <p>Steht für das vorangestellte Zeichen 0 oder einmal und ist äquivalent zu <code>{0,1}</code>.</p>
+
+    <p>Zum Beispiel passt <code>/e?le?/</code> sowohl auf "el" in "Engel", als auch auf "le" in "Kapelle" und auch "l" in "Oslo".</p>
+
+    <p>Wenn es sofort hinter einen der Quantoren <code>*</code>, <code>+</code>, <code>?</code>, oder <code>{}</code> gestellt wird, deaktiviert es die standardmäßige "Gierigkeit" (eine möglichst hohe Anzahl von passende Zeichen einschließend) dieser Quantoren und macht sie "genügsam" (eine möglichst geringe Anzahl von passende Zeichen einschließend).</p>
+
+    <p>Zum Beispiel passt der Ausdruck <code>/\d+/</code> auf die Zeichenkette "123abc" angewendet auf "123", weil der Quantor + (Pluszeichen) "gierig" ist. Der Ausdruck /\d+?/ steht hingegen nur für "1", weil der Quantor + (Pluszeichen) aufgrund der Beeinflussung durch das hintangestellte ? (Fragezeichen) "genügsam" ist.</p>
+
+    <p>Das Fragezeichen wird auch bei sogenannten <em>lookahead assertions</em> (vorausschauenden Annahmen/Behauptungen) eingesetzt, die in dieser Tabelle unter <a href="#special-lookahead" title="#special-lookahead"><code>x(?=y)</code></a> und <a href="#special-negated-look-ahead" title="#special-negated-look-ahead"><code>x(?!y)</code></a> beschrieben sind.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>Der Punkt steht für ein einzelnes beliebiges Zeichen mit Ausnahme des Zeichens für den Zeilenumbruch.</p>
+
+    <p>Zum Beispiel passt <code>/.n/</code> auf "in" und "än" in der Zeichenkette "nur ein Apfel hängt am Baum", jedoch nicht auf das "n" ganz am Anfang, weil vor dem "n" ein beliebiges Zeichen stehen muss.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Steht für die Zeichen "x", also die eingeklammerten Zeichen. Außerdem werden die Zeichen gespeichert, die mit dem einklammerten Muster übereinstimmen, damit sie an anderer Stelle wieder eingesetzt werden können. Die Klammern werden auch <em>capturing parentheses</em> (aufnehmende Klammern) genannt.</p>
+
+    <p>Zum Beispiel steht <code>/(foo)/</code> für "foo" in "foobar" und "foo" wird hinterlegt. Die Zeichen innerhalb der Klammern können durch Array-Elemente wieder eingesetzt werden. Dabei steht <code>[1]</code> für die Zeichen des ersten Klammerpaars, <code>[2]</code> für die Zeichen des zweiten Paars usw.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Steht für die Zeichen "x", aber die Übereinstimmung wird nicht hinterlegt. Diese Klammern werden auch als <em>non-capturing parentheses</em> bezeichnet. Die übereinstimmenden Zeichen können nicht wieder eingesetzt werden und die Array-Elemente <code>[1]</code>, ..., <code>[n]</code> finden keine Anwendung.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Steht für die Zeichen "x", jedoch nur wenn "x" vor "y" steht. Dies wird als<em> lookahead</em> (vorausschauen) bezeichnet.</p>
+
+    <p>Zum Beispiel passt <code>/Mustermann(?=Max)/</code> auf "Mustermann" nur dann, wenn "Max" dahinter steht. Der Ausdruck <code>/Mustermann(?=Max|Erika)/</code> passt auf "Mustermann" nur dann, wenn dahinter "Max" oder "Erika" steht. Doch weder "Max" noch "Erika" ist Teil des übereinstimmenden Ergebnisses.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Passt nur dann auf die Zeichen "x", wenn "x" nicht vor den Zeichen "y" steht. Dies wird auch als <em>negated lookahead</em> (negierte vorausschauende Annahme) bezeichnet.</p>
+
+    <p>Zum Beispiel passt <code>/\d+(?!\.)/</code> nur dann auf eine Zahl, wenn diese nicht vor einem Dezimalpunkt steht. Der reguläre Ausdruck <code>/\d+(?!\.)/.exec("3.141")</code>  passt auf "141", jedoch nicht auf "3.141".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Passt auf entweder die Zeichen "x" oder die Zeichen "y".</p>
+
+    <p>Zum Beispiel passt der Ausdruck <code>/grüner|roter/</code>  auf "grüner" in "grüner Apfel" und "roter" in "roter Apfel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>
+    <p>Das <code>n</code> steht für eine positive ganze Zahl. Das Muster passt exakt auf die Anzahl <code>n</code> des vorangestellten Zeichens.</p>
+
+    <p>Zum Beispiel passt <code>/a{2}/</code> nicht auf das "a" in "Schokolade",  jedoch auf alle beide a's in "Schokolaade" und die ersten beiden a's in "Schokolaaade".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>Wobei <code>n</code> und <code>m</code> positive ganze Zahlen sind. Passt auf mindestes <code>n</code> und höchstens <code>m</code> Vorkommen des vorangestellten Zeichens. Wenn für <code>n</code> oder <code>m</code> eine 0 stehen soll, kann diese auch weggelassen werden.</p>
+
+    <p>Zum Beispiel passt <code>/a{1,3}/</code> auf nichts in "cndy", jedoch auf das "a" in "candy", die beiden a's in "caandy," und die ersten drei a's in "caaaaaaandy".  Merke: Wenn der Ausdruck auf "caaaaaaandy" angewendet wird, ist die Übereinstimmung "aaa", auch wenn in der Zeichenkette mehr a's enthalten sind.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>
+    <p>Die eckigen Klammern kennzeichnen eine Zeichenauswahl. Der Ausdruck stimmt mit allen in den Klammern stehenden Zeichen überein. Mit Hilfe eines Bindestrichs kann ein Bereich (z. B. von a bis z) festgelegt werden. Spezielle Zeichen (wie der Punkt oder das Sternchen) haben keine spezielle Bedeutung innerhalb der eckigen Klammern. Sie müssen nicht "escaped" werden. <a href="/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale#Unicode_Escape-Sequenzen" title="/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale#Unicode_Escape-Sequenzen">Escape-Sequenzen</a> funktionieren ebenfalls.</p>
+
+    <p>Zum Beispiel ist <code>[abcd]</code> dasselbe wie <span style="font-family: monospace;">[</span><code>a-d]</code>. Beides passt auf das "b" in "biegen" und das "d" in "denken". Die Ausdrücke<code> /[a-z.]+/</code> und <code>/[\w.]+/</code> passen beide auf "test.e.n". Der Punkt ist in diesem Fall kein spezielles Zeichen, weil er innerhalb der eckigen Klammern (Zeichenauswahl) steht.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>Eine negierte oder komplementäre Zeichenauswahl. Das Zirkumflex-Zeichen an erster Stelle innerhalb der Klammern negiert die Zeichenauswahl. Der Ausdruck passt also auf alle Zeichen, die nicht in den Klammern stehen. Es kann mit Hilfe eines Bindestrichs auch ein Bereich von Zeichen (z. B. von a bis z) festgelegt werden. Alle Zeichen, die bei einer normalen Zeichenauswahl funktionieren, funktionieren hier ebenso.</p>
+
+    <p>Zum Beispiel ist <code>[^abc]</code> dasselbe wie <code>[^a-c]</code>. Beide Ausdrücke passen auf das "r" in "brechen" und das "m" in "campen".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Passt auf das Steuerzeichen für die Backspace-Tastet (U+0008), welche den Cursor um eine Position nach links verschiebt und das dort stehende Zeichen entfernt. (Sollte nicht mit <code>\b</code> verwechselt werden.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Steht für eine Wortgrenze. Wortgrenzen sind an den Stellen, wo kein anderes Wortzeichen vor oder hinter einem Wortzeichen steht. Eine Wortgrenze wird nicht in die Übereinstimmung aufgenommen. Mit anderen Worten ist die Länge einer Wortgrenze gleich 0 - die Wortgrenze ist der Zwischenraum zwischen einem Wortzeichen und einem Zeichen, das kein Wortzeichen ist oder zwischen einem Wortzeichen und dem Anfang oder Ende der Eingabe. (Sollte nicht mit <code>[\b]</code> verwechselt werden.)</p>
+
+    <p>Beispiele:<br>
+     <code>/\bMon/</code> passt auf das "Mon" in "Mond" ;<br>
+     <code>/ll\b/</code> passt nicht auf "ll" in "Falle", weil "ll" nicht vor einer Wortgrenze steht, sondern vor dem Zeichen "e", wobei es sich um ein Wortzeichen handelt.<br>
+     <code>/ond\b/</code> passt auf das "ond" in "Mond", weil "ond"  das Ende der Zeichenkette ist, also nicht vor einem Wortzeichen steht.<br>
+     <code>Bei /\w\b\w/</code> wird niemals eine Übereinstimmung gefunden, weil eine Wortgrenze niemals gleichzeitig vor einem Wortzeichen und keinem Wortzeichen stehen kann.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Steht für alle Zeichen, die keine Wortgrenze sind. Dies trifft auf Positionen zu, wo zwei nebeneinanderstehende Zeichen vom selben Typ sind: Entweder sind beide Wortzeichen oder keine Wortzeichen. Der Anfang und das Ende einer Zeichenkette werden nicht als Wortzeichen angesehen, gelten also als Wortgrenzen.</p>
+
+    <p>For example, <code>/\B../</code> matches 'oo' in "noonday" (, and <code>/y\B./</code> matches 'ye' in "possibly yesterday."</p>
+
+    <p>Zum Beispiel passt <code>/\B../</code> auf "at" in "Katze" und <code>/e\B./</code> auf "ei" in "schlafe ein".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p><em>X</em> ist ein Zeichenbereich von A bis Z. Passt auf ein Steuerzeichen in einer Zeichenkette.</p>
+
+    <p>Zum Beispiel steht <code>/\cM/</code> für das Steuerzeichen control-M (U+000D) in einer Zeichenkette.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Steht für Ziffern und ist äquivalent zu <code>[0-9]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\d/</code> oder <code>/[0-9]/</code> auf "2" in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Steht für alle nicht-Ziffern und ist äquivalent zu <code>[^0-9]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\D/</code> oder <code>/[^0-9]/</code> auf "B" in "B2 ist die Zimmernummer."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>Steht für einen Seitenvorschub (<strong>engl. <em>f</em></strong><em>orm feed</em> (U+000C)).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Steht für einen Zeilenbruch (engl. <em>line feed</em> bzw. <em><strong>n</strong>ew line</em> U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Steht für einen Wagenrücklauf (engl. <em>carriage <strong>r</strong>eturn</em> (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Steht für ein einzelnes Leerraum-Zeichen, einschließlich Leertaste, Tabulator, Seitenvorschub und Zeilenumbruch und ist äquivalent zu <code>[ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u2028\u2029​ \u202f\u205f​\u3000]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\s\w*/</code> auf "bar" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Steht für ein einzelnes Zeichen, das kein Leerraum-Zeichen ist. Äquivalent zu <code>[^ \f\n\r\t\v​\u00A0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​ \u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u2028\u2029​ \u202f\u205f​\u3000]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\S\w*/</code> auf "foo" in "foo bar".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Steht für einen Tabulator (engl. <em>horizontal <strong>t</strong>ab</em> U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Steht für einen vertikalen Tabulator (engl. <em><strong>v</strong>ertical tabulator</em> (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Steht für ein alphanumerisches Zeichen (Wortzeichen), einschließlich Unterstrich. Äquivalent zu <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\w/</code> auf "a" in "apple" als auch auf "5" in "$5.28" und "3" in "3D".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Steht für ein nicht-alphanumerisches Zeichen (nicht-Wortzeichen). Äquivalent zu <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Zum Beispiel passt <code>/\W/</code> oder <code>/[^A-Za-z0-9_]/</code> auf "%" in "50%".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Stellt einen Rückgriff auf die passenden Zeichen eines eingeklammerten Teilausdrucks dar, wobei <em>n</em> eine positive ganze Zahl ist. Die Zahl steht hierbei für das jeweilige Teilmuster innerhalb eines Klammerpaars an entsprechender Stelle (öffnende Klammern werden gezählt).</p>
+
+    <p>Zum Beispiel passt <code>/Apfel(,)\sOrange\1/</code> auf "Apfel, Orange," in "Apfel, Orange, Kirsche, Pfirsich".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Steht für ein NULL-Zeichen (U+0000). Es sollte kein Ziffer dahinter stehen, weil <code>\0&lt;Ziffer&gt;</code> eine Escape-Sequenz für oktale Zahlen ist.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\x<em>hh</em></code></a></td>
+   <td>Steht für das Zeichen mit dem Code <em>hh</em> (zweistellige hexadezimale Zahl).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\u<em>hhhh</em></code></a></td>
+   <td>Steht für das Zeichen mit dem Code <em>hhhh</em> (vierstellige hexadezimale Zahl).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Das Escapen von Benutzereingaben in einem Stringliteral eines regulären Ausdrucks kann durch folgende Ersetzung getan werden:</p>
+
+<pre>function escapeRegExp (string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;"); // $&amp; meint den komplett erkannten String
+}</pre>
+
+<h3 id="Benutzung_von_Klammern">Benutzung von Klammern</h3>
+
+<p>Klammern werden verwendet, um den eingeklammerten Teil des regulären Ausdrucks zu speichern. Einmal gespeichert kann dieser Teil an anderer Stelle wieder eingesetzt werden, wie unter <a href="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern" title="/de/docs/JavaScript/Guide/Regular_Expressions#Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</a> beschrieben.</p>
+
+<p>Zum Beispiel beinhaltet der Ausdruck <code>/Kapitel (\d+)\.\d*/</code> einige maskierte und spezielle Zeichen. Mit den Klammern wird bewirkt, dass die Zeichen, welche mit dem eingeklammerten Muster übereinstimmen, gespeichert werden. Der Ausdruck stimmt genau mit der Zeichenkette "Kapitel " gefolgt von einer oder mehreren Ziffern (<code>\d</code> steht für eine Ziffer und das <code>+</code> (Pluszeichen) bedeutet 1 oder mehr Vorkommen), einem Punkt (der Punkt selbst ist standardmäßig ein spezielles Zeichen, weshalb er maskiert werden muss) und nochmal beliebig vielen Ziffern (\d steht für eine Ziffer und der Stern bedeutet 0 oder mehr Vorkommen) überein. Zusätzlich werden die Klammern eingesetzt, um die erste Ziffer zu speichern.</p>
+
+<p>Eine Übereinstimmung wird z. B. in "Offenes Kapitel 4.3, Absatz 6" gefunden und dabei wird "4" gespeichert. Auf die Zeichenkette "Kapitel 3 und 4" passt der Ausdruck nicht, weil hinter der ersten Ziffer "3" kein Punkt steht.</p>
+
+<p>Möchte man einen zusammenhängenden Teil einer Zeichenkette suchen, jedoch nicht speichern, setzt man <code>?:</code> an den Anfang innerhalb der Klammern. Zum Beispiel stimmt <code>(?:\d+)</code> mit einer oder mehr Ziffern überein, aber diese Ziffern werden nicht gespeichert.</p>
+
+<h3 id="Arbeiten_mit_regulären_Ausdrücken">Arbeiten mit regulären Ausdrücken</h3>
+
+<p>Reguläre Ausdrücke werden mit den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" title="exec"><code>exec</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/test" title="test"><code>test</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a> und den Methoden <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match" title="match"><code>match</code></a>, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global_Objects/String/replace"><code>replace</code></a>,<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/search" title="search"> <code>search</code></a> und <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split"><code>split</code></a> von <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> verwendet. Diese Methoden sind in der <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Referenz</a> beschrieben.</p>
+
+<table class="standard-table">
+ <caption>Tabelle 4.2 Methoden die reguläre Ausdrücke verwenden</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>Eine Methode von <code>RegExp,</code> die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt. Sie gibt ein Array mit den Übereinstimmungen zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>Eine Methode von <code>RegExp</code>, die eine Zeichenkette auf eine Übereinstimmung überprüft. Sie gibt <code>true</code> oder <code>false</code> zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt. Sie gibt ein Array zurück oder <code>null</code> bei keinem Treffer.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Zeichenkette auf eine Übereinstimmung überprüft. Sie gibt den Index der Übereinstimmung zurück oder -1 bei keinem Treffer.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>Eine Methode von <code>String</code>, die eine Suche nach einer Übereinstimmung in einer Zeichenkette durchführt und die Übereinstimmungen durch eine andere Zeichenkette ersetzt.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Eine Methode von <code>String</code>, die anhand eines regulären Ausdrucks oder einer festen Zeichenkette eine Zeichenkette trennt und die Teile als Array zurückgibt.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wenn man nur wissen möchte, ob ein regulärer Ausdruck auf eine Zeichenkette passt, sollten die Methoden <code>test</code> oder <code>search</code> zum Einsatz kommen. Möchte man mehr erfahren, sollte man auf die Methoden <code>exec</code> oder <code>match</code> zurückgreifen (langsamere Ausführungsgeschwindigkeit). Die Methoden <code>exec</code> und <code>match</code> geben ein Array zurück falls Übereinstimmungen gefunden werden und updaten die Eigenschaften des zugehörigen <code>RegExp</code>-Objekts und des vordefinierten <code>RegExp</code>-Objekts. Wenn keine Übereinstimmungen gefunden werden, geben die Methoden <code>null</code> (konvertiert: <code>false</code>) zurück.</p>
+
+<p>Bei folgendem Beispiel kommt die Methode exec zum Einsatz, um eine Übereinstimmung in einer Zeichenkette zu finden.  </p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Wenn man auf die Eingenschaften des Objekts für den regulären Ausdruck nicht zugreifen möchte, kann man <code>myArray</code> auch direkt wie folgt erzeugen:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");  // äquivalent zu "cdbbdbsbz".match(/d(b+)d/g);
+</pre>
+
+<p>Möchte man den regulären Ausdruck aus einem String erzeugen, besteht folgende Möglichkeit:</p>
+
+<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>Bei diesen Skripten werden Übereinstimmungen gefunden. Es wird ein Array zurückgegeben und die Eigenschaften geupdatet, welche in der nachstehenden Tabelle aufgelistet sind.</p>
+
+<table class="fullwidth-table">
+ <caption>Tabelle 4.3 Ergebnisse von regulären Ausdrücken</caption>
+ <thead>
+  <tr>
+   <th scope="col">Objekt</th>
+   <th scope="col">Eigenschaft oder Index</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Bei diesem Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td> </td>
+   <td>Die übereinstimmende Zeichenfolge und alle gespeicherten Teile.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Der mit 0 beginnende Index der Übereinstimmung in der Eingabe-Zeichenkette.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Die ursprüngliche Eingabe-Zeichenkette.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Die zuletzt übereinstimmenden Zeichen.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>Der Index bei dem die nächste Suche nach einer Übereinstimmung gestartet wird.  (Diese Eigenschaft wird nur gesetzt, wenn im regulären Ausdruck die Option "g" verwendet wird, wie unter <a href="#Erweiterte Suche mit Optionen (Flags)">Erweiterte Suche mit Optionen (Flags)</a> beschrieben).</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Der Text des Musters - wird geupdatet wenn der reguläre Ausdruck erstellt wird, nicht bei der Ausführung.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Wie das zweite Beispiel zeigt, kann man einen regulären Ausdruck einsetzen, der über einen Objekt-Intializer erstellt wurde, ohne die Zuweisung einer Variablen. Bei dieser Vorgehensweise ist jede Übereinstimmung ein neuer Ausdruck. Aus diesem Grund kann nicht auf die Eigenschaften dieses regulären Ausdrucks zugegriffen werden. Angenommen man hat z. B. dieses Skript:</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("Der Wert von lastIndex ist " + myRe.lastIndex);
+</pre>
+
+<p>Dann ist die Ausgabe:</p>
+
+<pre>Der Wert von lastIndex ist 5
+</pre>
+
+<p>Hat man nun aber dieses Skript:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("Der Wert von lastIndex ist " + /d(b+)d/g.lastIndex);
+</pre>
+
+<p>Dann ist die Ausgabe:</p>
+
+<pre>Der Wert von lastIndex ist 0
+</pre>
+
+<p>Die einzelnen Vorkommen der Zeichenfolgen, die mit <code>/d(b+)d/g</code> übereinstimmen sind bei den beiden Anweisungen verschiedene Objekte und haben dementsprechend auch verschiedene Werte bei der jeweiligen Eigenschaft <code>lastIndex</code>. Falls man auf die Eigenschaften eines Objekts eines regulären Ausdrucks zugreifen möchte, sollte man diesen vorher einer Variablen zuweisen.</p>
+
+<h3 id="Benutzung_von_geklammerten_Mustern">Benutzung von geklammerten Mustern</h3>
+
+<p>Klammern werden verwendet, um einen Teil der Zeichen, die mit dem regulären Ausdruck übereinstimmen, zu speichern. Zum Beispiel stimmt <code>/a(b)c/</code> mit der Zeichenfolge "abc" überein und "b" wird gespeichert. Um die gespeicherten Zeichen wieder abzurufen, verwendet man die <code>Array</code>-Elemente <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>Die Anzahl der möglichen speicherbaren Teile ist nicht limitiert. Das Array, welches zurückgegeben wird, enthält alle gespeicherten Übereinstimmungen. Die folgenden Beispiele zeigen auf, wie man geklammerte Muster einsetzt.</p>
+
+<h4 id="Beispiel_1">Beispiel 1</h4>
+
+<p>Das folgende Skript benutzt die Methode <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace" title="en-US/docs/JavaScript/Reference/Global Objects/String/replace"><code>replace()</code></a>, um Wörter in einer Zeichenkette auszutauschen. Die beiden Muster für die Wörter (<code>\w+</code>) wurden geklammert, damit die Wörter gespeichert werden. Anschließend werden im Ersetzungstext diese gespeicherten Wörter mit <code>$1</code> und <code>$2</code> wieder eingesetzt.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = "Jonas Schmidt";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>Die Ausgabe ist "Schmidt, Jonas".</p>
+
+<h3 id="Erweiterte_Suche_mit_Optionen_(Flags)"><a id="Erweiterte Suche mit Optionen (Flags)" name="Erweiterte Suche mit Optionen (Flags)">Erweiterte Suche mit Optionen (Flags)</a></h3>
+
+<p>Reguläre Ausdrücke kennen vier verschiedene Optionen (Flags), die es z. B. erlauben global nach Übereinstimmungen zu suchen oder die Berücksichtigung der Groß- und Kleinschreibweise zu deaktivieren. Zur Aktivierung der <strong>g</strong>lobalen Suche wird das Flag <code>g</code> eingesetzt. Die Berücksichtigung der Groß- und Kleinschreibweise (<em>engl. case-<strong>i</strong>nsensitive</em> ) wird mit dem Flag <code>i</code> abgeschaltet. Die mehrzeilige Suche (engl. <strong>m</strong>ultiline) wird mit dem Flag <code>m</code> aktiviert und eine "sticky" Suche, wobei die Übereinstimmung an der aktuellen Postion im Eingabe-Zeichenkette zutreffen muss, wird mit dem Flag <code>y</code> aktiviert. Diese Optionen können getrennt oder gemeinsam verwendet und in beliebiger Reihenfolge angegeben werden. Die Buchstaben werden einfach an den regulären Ausdruck angehängt.</p>
+
+<p>{{ Fx_minversion_note(3, "Die Unterstützung für das Flag <code>y</code> wurde bei Firefox 3 hinzugefügt. Wenn <code>y</code> aktiviert ist, schlägt die Suche fehl, wenn es keine Übereinstimmung an der aktuellen Position innerhalb der Eingabe-Zeichenkette gibt.") }}</p>
+
+<p>Syntax für die Verwendung von Optionen:</p>
+
+<pre class="brush: js">var re = /Muster/Optionen;
+</pre>
+
+<p>oder</p>
+
+<pre class="brush: js">var re = new RegExp("Muster", "Optionen");
+</pre>
+
+<p>Die Optionen sind ein integraler Bestandteil des regulären Ausdrucks. Sie können nicht im Nachhinein entfernt oder hinzugefügt werden.</p>
+
+<p>Zum Beispiel wird mit <code>re = /\w+\s/g</code> ein regulärer Ausdruck erstellt, der auf ein oder mehr Zeichen, gefolgt von einem Leerraum, passt. Nach diesem Muster wird über die ganze Zeichenkette hinweg gesucht.</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+</pre>
+
+<p>Hier ist die Ausgabe: ["fee ", "fi ", "fo "]. Bei diesem Beispiel könnte man die Zeile:</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+</pre>
+
+<p>mit folgender austauschen:</p>
+
+<pre class="brush: js">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>und würde dasselbe Ergebnis erhalten.</p>
+
+<p>Die Option <code>m</code> sorgt dafür, dass eine mehrzeilige Eingabe auch als solche interpretiert wird. Wird die Option <code>m</code> angegeben, passen die speziellen Zeichen <code>^</code> und <code>$</code> auf den Anfang oder das Ende jeder Zeile der Eingabe, anstatt nur auf den Anfang und das Ende der gesamten Eingabe.</p>
+
+<h2 id="Beispiele">Beispiele</h2>
+
+<p>Das folgende Beispiel zeigt einige Einsatzmöglichkeiten von regulären Ausdrücken.</p>
+
+<h3 id="Ändern_der_Reihenfolge_in_einer_Zeichenkette">Ändern der Reihenfolge in einer Zeichenkette</h3>
+
+<p>Das folgende Beispiel veranschaulicht die Anordnung von regulären Ausdrücken und die Verwendung der Methoden <code>string.split()</code> und <code>string.replace()</code>. Im Beispiel wird eine schlecht formatierte Eingabe mit Personennamen (Vorname zuerst), die durch Leerzeichen, Tabulatoren und exakt ein Semikolon getrennt sind, bereinigt. Außerdem wird die Reihenfolge des jeweiligen Namens herumgedreht (Nachname zuerst) und die Liste nach Nachnamen sortiert.</p>
+
+<pre class="brush: js">// Die Zeichenkette beinhaltet mehrere Leerzeichen und Tabulatoren
+// und könnte mehrere Leerzeichen zwischen vor und Nachnamen enthalten.
+
+var names = "Lieschen Müller ;Erika Mustermann; Michel Deutscher ; Otto Normalverbraucher ; ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Erstellen von zwei regulären Ausdrücken und eines Arrays.
+// Die Eingabe-Zeichenkette wird in Array-Elemente zerlegt.
+
+// Muster: Möglicherweise ein Leerraum, dann ein Semikolon
+// und möglicherweise nochmal ein Leerraum (0 oder mehr).
+var pattern = /\s*;\s*/;
+
+// Splitten der Zeichenkette in einzelne Teile anhand des Musters und
+// speichern der Teile in einem Array mit Namen nameList.
+var nameList = names.split(pattern);
+
+// Neuer regulärer Ausdruck: ein oder mehr alphanumerische Zeichen,
+// dann mindestens ein Leerraum und nochmal mindestens ein Wortzeichen.
+// Klammern zum Speichern; Rückgriff auf gespeicherte Teile später.
+pattern = /(\w+)\s+(\w+)/;
+
+// Neues Array zum Speichern der bearbeiteten Namen.
+var bySurnameList = [];
+
+// Anzeigen des Arrays und befüllen des neuen Arrays
+// mit durch Komma getrennten Namen (Nachname zuerst).
+// Die Methode replace() entfernt alles, was mit dem Muster übereinstimmt
+// und ersetzt es durch den an zweiter Stelle angegebenen String,
+// bestehend aus den gespeicherten Teilen.
+// Zuerst wird der zweite Teil ($2) eingesetzt und anschließend durch Komma
+// und Leerzeichen getrennt der erste Teil ($1).
+
+output.push("---------- Nach Teilung durch regulären Ausdruck");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Anzeigen des neuen Arrays.
+output.push("---------- Namen reserviert");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sortieren anhand des Nachnamens und anzeigen des neuen Arrays.
+bySurnameList.sort();
+output.push("---------- Sortiert");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Benutzung_von_speziellen_Zeichen_zur_Verifizierung_von_Eingaben">Benutzung von speziellen Zeichen zur Verifizierung von Eingaben</h3>
+
+<p>Beim nachstehenden Beispiel wird der Benutzer aufgefordert, eine Telefonnummer einzugeben. Wenn der Benutzer den "Prüfen"-Button drückt, überprüft das Skript die Validität der Nummer. Sofern dann sichergestellt ist, dass es sich um eine Telefonnummer handelt (die Eingabe stimmt mit dem Muster des regulären Ausdrucks überein), zeigt das Skript eine Nachricht, um dem Benutzer zu danken und die Nummer zu bestätigen. Wenn die Nummer nicht valide ist (nicht mit dem Muster des regulären Ausdrucks übereinstimmt), wird der Benutzer ebenfalls mit einer Nachricht darüber informiert.</p>
+
+<p>Das Muster des reguläre Ausdruck setzt sich folgendermaßen zusammen: Keine oder eine öffnende Klammer, <code>\(?</code>, gefolgt von drei Ziffern <code> \d{3}</code>, gefolgt von keiner oder einer schließenden Klammer <code>\)?</code>, gefolgt von einem Bindestrich, Schrägstrich, oder Punkt (falls vorhanden wird das Zeichen gespeichert) <code>([-\/\.])</code>, gefolgt von drei Ziffern <code>\d{3}</code>, gefolgt (falls vorhanden) von dem gespeicherten Zeichen (Bindestrich, Schrägstrich oder Punkt) <code>\1</code>, gefolgt von vier Ziffern <code>\d{4}</code>.</p>
+
+<p>Das Event <code>Change</code> wird ausgelöst, wenn der Benutzer die Enter-Taste drückt, um die Eingabe (den Wert für <code>RegExp.input</code>) zu bestätigen.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(RegExp.input + " ist keine Telefonnummer mit Vorwahl!");
+        else
+          window.alert("Danke! Ihre Telefonnummer ist " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Bitte ihre Telefonnummer (mit Vorwahl) eingeben und den "Prüfen"-Button anklicken.
+        &lt;br&gt;Das Format ist z.B. ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Prüfen&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Textformatierung", "Web/JavaScript/Guide/Indexed_collections")}}</p>
diff --git a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
new file mode 100644
index 0000000000..9f351abcd9
--- /dev/null
+++ b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
@@ -0,0 +1,337 @@
+---
+title: Schleifen und Iterationen
+slug: Web/JavaScript/Guide/schleifen_und_iterationen
+tags:
+  - Guide
+  - JavaScript
+  - Loop
+  - Syntax
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.</p>
+
+<p>Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:</p>
+
+<pre class="brush: js">var schritt;
+for (schritt = 0; schritt &lt; 5; schritt++) {
+  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
+  console.log('Gehe einen Schritt nach Osten');
+}
+</pre>
+
+<p>Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.</p>
+
+<p>JavaScript stellt folgende Statements für Schleifen zur Verfügung:</p>
+
+<ul>
+ <li>{{anch("for Statement")}}</li>
+ <li>{{anch("do...while Statement")}}</li>
+ <li>{{anch("while Statement")}}</li>
+ <li>{{anch("label Statement")}}</li>
+ <li>{{anch("break Statement")}}</li>
+ <li>{{anch("continue Statement")}}</li>
+ <li>{{anch("for...in Statement")}}</li>
+ <li>{{anch("for...of Statement")}}</li>
+</ul>
+
+<h2 id="for_Statement"><code>for</code> Statement</h2>
+
+<p>Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert <code>false</code> liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
+  Anweisung
+</pre>
+
+<p>Bei der Ausführung einer for Schleife geschieht folgendes:</p>
+
+<ol>
+ <li>Der Ausdruck zur Initialisierung der Schleife <code>initialerAsudruck</code>, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.</li>
+ <li>Die Bedingung <code>Bedingung</code> wird geprüft. Wenn die Auswertung von <code>Bedingung</code> den Wert <code>true</code> ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen <code>false</code>, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert <code>true</code> angenommen.</li>
+ <li>Die <code>Anweisung</code> wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen (<code>{ ... }</code>) verwendet, um diese zu gruppieren.</li>
+ <li>Wenn vorhanden, wird der Ausdruck <code>erhöhenderAusdruck</code> ausgeführt.</li>
+ <li>Geht zu Schritt 2 zurück.</li>
+</ol>
+
+<h3 id="Beispiel"><strong>Beispiel</strong></h3>
+
+<p>Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable <code>i</code> und initialisiert diese mit dem Wert 0. Sie prüft ob <code>i</code> kleiner als die Anzahl der verfügbarer Optionen des <code>&lt;select&gt;</code> Elements ist, führt das nachfolgende <code>if</code> Statement aus und erhöht <code>i</code> bei jedem Schleifendurchlauf um 1.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_Statement"><code>do...while</code> Statement</h2>
+
+<p>Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung <code>false</code> ergibt. Ein <code>do...while</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">do
+  anweisung
+while (bedingung);
+</pre>
+
+<p><code>amweisung</code> wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement (<code>{ ... }</code>) gruppiert. Wenn <code>bedingung</code> <code>true</code> ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald <code>bedingung</code> <code>false</code> ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der <code>do...while </code>Schleife aus wird ausgeführt.</p>
+
+<h3 id="Beispiel_2"><strong>Beispiel</strong></h3>
+
+<p>Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis <code>i</code> nicht mehr kleiner als 5 ist.</p>
+
+<pre class="brush: js">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_Statement"><code>while</code> Statement</h2>
+
+<p>Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung <code>true</code> ergibt. Ein <code>while</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">while (bedingung)
+  anweisung
+</pre>
+
+<p>Wenn die Bedingung <code>false</code> ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der <code>while</code> Schleife wird ausgeführt.</p>
+
+<p>Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung <code>true</code> ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung <code>false</code>, wir mit der Anweisungen nach der <code>while</code> Schleife fortgefahren.</p>
+
+<p>Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.</p>
+
+<h3 id="Beispiel_1"><strong>Beispiel 1</strong></h3>
+
+<p>Die folgende <code>while</code> Schleife wird so lange ausgeführt, wie <code>n</code> kleiner als 3 ist.</p>
+
+<pre class="brush: js">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Mit jedem Schleifendurchlauf wird <code>n</code> um 1 erhöht. Der Wert von <code>n</code> wird dann zum Wert von <code>x</code> addiert. Dadurch nehmen <code>x</code> und <code>n</code> die folgenden Werte an:</p>
+
+<ul>
+ <li>Nach dem ersten Durchlauf: <code>n</code> = 1 und <code>x</code> = 1</li>
+ <li>Nach dem zweiten Durchlauf: <code>n</code> = 2 und <code>x</code> = 3</li>
+ <li>Nach dem dritten Durchlauf: <code>n</code> = 3 und <code>x</code> = 6</li>
+</ul>
+
+<p>Nach dem dritten Durchlauf ist die Bedingung <code>n &lt; 3</code> nicht mehr <code>true</code> und die Schleife wird verlassen.</p>
+
+<h3 id="Beispiel_2_2"><strong>Beispiel 2</strong></h3>
+
+<p>Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann <code>false</code> ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden <code>while</code> Schleife wird für immer ausgeführt, weil die Bedingung nie <code>false</code> ergibt:</p>
+
+<pre class="brush: js">while (true) {
+  console.log('Hello, world!');
+}</pre>
+
+<h2 id="Label_Statement"><code>Label</code> Statement</h2>
+
+<p>Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit <code>break</code> oder <code>continue</code> festzulegen ob diese beendet oder weiter durchlaufen werden soll.</p>
+
+<p>Die Syntax des Label Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">label :
+   anweisung
+</pre>
+
+<p>Der Wert von <code><em>label</em></code> kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die <code><em>anweisung</em></code> die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.</p>
+
+<h3 id="Beispiel_3"><strong>Beispiel</strong></h3>
+
+<p>In diesem Beispiel identifiziert das Label <code>markLoop</code> eine <code>while</code> Schleife.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_Statement"><code>break</code> Statement</h2>
+
+<p>Um eine Schleife oder ein <code>switch</code> Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.</p>
+
+<ul>
+ <li>Wird <code>break</code> ohne ein Label verwendet, so wird die innerste <code>while</code>, <code>do-while</code>, <code>for</code> Schleife oder <code>switch</code> Statement beendet und die nachfolgende Ausführung wird ausgeführt.</li>
+ <li>Wird <code>break</code> in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.</li>
+</ul>
+
+<p>Die Syntax von <code>break</code> sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">break [<em>label</em>];
+</pre>
+
+<p>Die erste Variante der Syntax beendet die innerste Schleife oder das innerste <code>switch</code> Statement. Die zweite Variante beendet eine bestimmte Anweisung.</p>
+
+<h3 id="Beispiel_1_2"><strong>Beispiel</strong> <strong>1</strong></h3>
+
+<p>Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von <code>theValue</code> gefunden wird:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Beispiel_2_break_mit_einem_Label"><strong>Beispiel 2: </strong><code>break</code> mit einem Label</h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_Statement"><code>continue</code> Statement</h2>
+
+<p>Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine w<code>hile</code>, <code>do-while</code>, <code>for Schleife</code> oder ein Statement mit einem Label erneut auszuführen.</p>
+
+<ul>
+ <li>Wird <code>continue</code> ohne ein Label verwendet, wird der Durchlauf der innersten <code>while</code>, <code>do-while</code> oder <code>for</code> Statement beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zum <code>break</code> Statement, wird mit <code>continue</code> nicht die gesamte Schleife abgebrochen. In einer <code>while</code> Schleife springt das Programm zurück zur Bedingung. In einer <code>for</code> Schleife springt das Programm zum erhöhenden Ausdruck.</li>
+ <li>Wird <code>continue</code> mit einem Label eingesetzt, wird <code>continue</code> auf die Anweisungen angewendet, die durch das Label identifiziert werden.</li>
+</ul>
+
+<p>Die Syntax des <code>continue</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox"><code>continue</code> [<em>label</em>];
+</pre>
+
+<h3 id="Beispiel_1_3"><strong>Beispiel 1</strong></h3>
+
+<p>Das folgende Beispiel zeigt eine <code>while</code> Schleife, mit einem <code>continue</code> Statement, die weiter ausgeführt wird, wenn <code>i</code> den Wert 3 hat. Dadurch erhält <code>n</code> die Werte 1, 3, 7 und 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Beispiel_2_3"><strong>Beispiel 2</strong></h3>
+
+<p>Eine Anweisung mit dem Label <em><code>checkiandj</code></em> enthält eine Anweisung mit dem Label <em><code>checkj</code></em>. Wenn <code>continue</code> erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von <em><code>checkj</code></em> ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn <code>continue</code> erreicht wird, wird <em><code>checkj</code></em> erneut ausgeführt, bis dessen Bedingung <code>false</code> zurückliefert. Wird <code>false</code> zurückgeliefert, wird der Rest der <em><code>checkiandj</code></em> Anweisung vollendet und <em><code>checkiandj</code></em> wird wiederholt, bis dessen Bedingung <code>false</code> zurückgibt. Wird <code>false</code> zurückgegeben, wird das Programm bei der Anweisung nach <em><code>checkiandj</code></em> fortgesetzt.</p>
+
+<p>Wenn <code>continue</code> ein Label <em><code>checkiandj</code></em> hätte, würde das Programm am Anfang der <em><code>checkiandj</code></em> Anweisung fortgesetzt werden.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 10;
+checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }</pre>
+
+<h2 id="for...in_Statement"><code>for...in</code> Statement</h2>
+
+<p>Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein <code>for...in</code> Statement sieht wie folgt aus:</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="Beispiel_4"><strong>Beispiel</strong></h3>
+
+<p>Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
+  }
+  result += '&lt;hr&gt;';
+  return result;
+}
+</pre>
+
+<p>Für ein Objekt <code>car</code> mit den Eigenschaften <code>make</code> und <code>model</code>, sieht das Ergebnis wie folgt aus:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays"><strong>Arrays</strong></h3>
+
+<p>Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das <strong>for...in</strong> Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das <strong>for...in</strong> Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.</p>
+
+<h2 id="for...of_Statement"><code>for...of</code> Statement</h2>
+
+<p>Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle <a href="/de/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>Das folgende Beispiel zeigt den Unterschied zwischen der <code>for...of</code> Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während <code>for...in</code> die Namen der Eigenschaften durchläuft, durchläuft <code>for...of</code> die Werte der Eigenschaft:</p>
+
+<pre class="brush:js">var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/de/web/javascript/guide/textformatierung/index.html b/files/de/web/javascript/guide/textformatierung/index.html
new file mode 100644
index 0000000000..48c45c9871
--- /dev/null
+++ b/files/de/web/javascript/guide/textformatierung/index.html
@@ -0,0 +1,257 @@
+---
+title: Textformatierung
+slug: Web/JavaScript/Guide/Textformatierung
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.</p>
+
+<h2 id="Strings">Strings</h2>
+
+<p>JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.</p>
+
+<p>ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p>
+
+<h3 id="String_Literale">String Literale</h3>
+
+<p>Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:</p>
+
+<h4 id="Hexadezimale_Escape-Sequenzen">Hexadezimale Escape-Sequenzen</h4>
+
+<p>Die Zahl nach <code>\x</code> wird als hexadecimale Zahl interpretiert.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Unicode_Escape-Sequenzen">Unicode Escape-Sequenzen</h4>
+
+<p>Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach <code>\u</code>.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="Unicode_Code_Point_Escapes">Unicode Code Point Escapes</h4>
+
+<p>Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu <code>0x10FFFF</code> möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.</p>
+
+<p>Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// das gleiche mit einfachen Unicode Escape-Sequenzen
+'\uD87E\uDC04'</pre>
+
+<h3 id="String_Objekte">String Objekte</h3>
+
+<p>Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.</p>
+
+<pre class="brush: js">var s = new String('foo'); // Erstellt ein String object
+console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Gibt 'object' zurück
+</pre>
+
+<p>Beliebige Methoden des <code>String</code> Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres <code>String</code> Objekt um, ruft die Methode auf und verwirft das temporäre <code>String</code> Objekt anschließend. Außerdem kann die <code>String.length</code> Eigenschaft mit einem String-Literal verwendet werden.</p>
+
+<p>String-Literale sollten verwendet werden, außer es wird tatsächlich ein <code>String</code> Objekt benötigt, da <code>String</code> Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:</p>
+
+<pre class="brush: js">var s1 = '2 + 2'; // Erzeugt ein String-Literal
+var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
+eval(s1); // Gibt die Zahl 4 zurück
+eval(s2); // Gibt den String "2 + 2" zurück</pre>
+
+<p>Ein <code>String</code> Objekt hat eine Eigenschaft <code>length</code>, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable <code>x</code> den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:</p>
+
+<pre class="brush: js">var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // hat keinen Effekt
+mystring[0]; // gibt "H" zurück
+</pre>
+
+<p>Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<p>Ein <code>String</code> Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. <code>substring</code> und <code>toUpperCase</code>.</p>
+
+<p>Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Methoden_von_String">Methoden von <code>String</code></h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Methode</th>
+   <th scope="col">Beschreibung</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Teilt ein <code>String</code> Objekt in ein Array von Teilstrings.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>Gibt einen Ausschnitt des Strings als neuen String zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}}</td>
+   <td>
+    <p>Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td>Gibt die Unicode Normalization Form des Strings zurück.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td>Entfernt Leerzeichen vom Anfang und vom Ende des Strings.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Mehrzeilige_Template-Strings">Mehrzeilige Template-Strings</h3>
+
+<p><a href="/de/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.</p>
+
+<p>Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in <em>Back-Ticks</em> (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (<code>${expression}</code>).</p>
+
+<h4 id="Mehrzeilige_Strings">Mehrzeilige Strings</h4>
+
+<p>Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:</p>
+
+<pre class="brush: js">console.log('string text line 1\n\
+string text line 2');
+// "string text line 1
+// string text line 2"</pre>
+
+<p>Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h4 id="Erweiterung_von_Ausdrücken">Erweiterung von Ausdrücken</h4>
+
+<p>Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>Mehr Informationen sind unter <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template-Strings</a> in der <a href="/de/docs/Web/JavaScript/Reference">JavaScript-Referenz</a> nachzulesen. </p>
+
+<h2 id="Internationalization">Internationalization</h2>
+
+<p>Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des <code>Intl</code> Objekts.</p>
+
+<h3 id="Datums-_und_Uhrzeitformatierung">Datums- und Uhrzeitformatierung</h3>
+
+<p>Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)</p>
+
+<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: '2-digit', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
+var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Zahlenformatierung">Zahlenformatierung</h3>
+
+<p>Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.</p>
+
+<pre class="brush: js">var gasPrice = new Intl.NumberFormat('en-US',
+                        { style: 'currency', currency: 'USD',
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
+                        { style: 'currency', currency: 'CNY' });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="Sortierung">Sortierung</h3>
+
+<p>Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.</p>
+
+<p>Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.</p>
+
+<pre class="brush: js">var names = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(', '));
+// logs "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. <em>schon</em> vor <em>schön</em>). </p>
+
+<pre class="brush: js">var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(', '));
+// logs "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Mehr Informationen über das {{jsxref("Intl")}} API können unter <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a> (in Englisch) nachgelesen werden.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
diff --git a/files/de/web/javascript/guide/using_promises/index.html b/files/de/web/javascript/guide/using_promises/index.html
new file mode 100644
index 0000000000..0aad2a4071
--- /dev/null
+++ b/files/de/web/javascript/guide/using_promises/index.html
@@ -0,0 +1,341 @@
+---
+title: Promises benutzen
+slug: Web/JavaScript/Guide/Using_promises
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">Ein {{jsxref("Promise")}} ist ein Objekt, das die finale Beendigung einer asynchronen Operation repräsentiert. Je nachdem, ob die Operation erfolgreich oder fehlerhaft beendet wurde, wird das Promise entsprechend gekennzeichnet.</p>
+
+<p class="summary">Da in den meisten Fällen bereits existierende Promises benutzt werden, wird diese Anleitung zuerst die Benutzung von zurückgegebenen Promises erklären, und dann darauf eingehen, wie diese erzeugt werden.</p>
+
+<p class="summary">Grob gesagt ist ein Promise ein zurückgegebenes Objekt, an welches Callback-Funktionen angehängt werden können, anstatt dass diese einer Funktion übergeben werden.</p>
+
+<p class="summary">Betrachten wir z.B. folgende Funktion <code>createAudioFileAsync()</code>, welche asynchron eine Audio-Datei generiert; an diese werden Audio-Einstellungen sowie zwei Callback-Funktionen übergeben - eine für das erfolgreiche Erzeugen der Audio-Datei, und die andere für auftretende Fehler.</p>
+
+<p class="summary">Ein beispielhafter Code, den <code>createAudioFileAsync()</code> nutzen würde, sieht in etwa so aus:</p>
+
+<pre class="summary notranslate">function successCallback(result) {
+  console.log("Audio-Datei bereit unter URL: " + result);
+}
+
+function failureCallback(error) {
+  console.error("Fehlerhafte Generierung der Audio-Datei: " + error);
+}
+
+createAudioFileAsync(audioSettings, successCallback, failureCallback);
+</pre>
+
+<p>In modernen Funktionen, welche Promises zurückgeben, kann man die Callbacks stattdessen direkt anhängen:</p>
+
+<p>Würde <code>createAudioFileAsync()</code> so umgeschrieben, dass es als Rückgabewert ein Promise hätte, wäre die Nutzung davon einfach so:</p>
+
+<pre class="notranslate">createAudioFileAsync(audiosettings).then(successCallback, failureCallback);</pre>
+
+<p>Das ist die Kurzform von:</p>
+
+<pre class="notranslate">const promise = createAudioFileAsync(audioSettings);
+promise.then(successCallback, failureCallback);
+</pre>
+
+<p>Dies nennt man einen <em>asynchronen Funktionsaufruf</em>. Diese Vorgehensweise hat mehrere Vorteile, von denen in diesem Artikel jeder einzeln geschildert wird.</p>
+
+<h2 id="Garantien">Garantien</h2>
+
+<p>Anders als bei Callback-Übergabe nach dem alten Verfahren, können Promise-Objekte folgendes sicherstellen:</p>
+
+<ul>
+ <li>Callback-Funktionen werden erst aufgerufen, wenn der <a href="/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion">derzeitige Durchlauf des Javascript Event Loops </a>vollständig ist.</li>
+ <li>Callback-Funktionen, die in <code>.then()</code> angehängt werden, werden <em>nach</em> dem Ende der asynchronen Operation aufgerufen.</li>
+ <li>Mehrere Callback-Funktionen können durch mehrmaliges Aufrufen von <code>.then()</code> angehängt werden, um unabhängig von der Funktion selbst in der Anhänge-Reihenfolge aufgerufen zu werden.</li>
+</ul>
+
+<p>Allerdings ist der wohl kurzfristigste Nutzen von Promises das Chaining.</p>
+
+<h2 id="Chaining">Chaining</h2>
+
+<p>Eine häufige Aufgabenstellung ist der Aufruf von zwei oder mehr asynchronen Funktionen nacheinander in Sequenz, wobei Ergebnisse aus der vorangegangenen Funktion in die folgende Funktion übernommen werden. Dies ist realisierbar mittels einer <em>Promise chain</em>.</p>
+
+<p>Hier steckt der Zauber drin: Die Funktion <code>.then()</code> gibt stets ein neues Promise-Objekt zurück:</p>
+
+<pre class="brush: js notranslate">const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>oder auch</p>
+
+<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>Hierbei repräsentiert <code>promise2</code> nicht nur den vollständigen Aufruf von <code>doSomething()</code>, sondern auch die Ergebnisse der beiden angehängten Funktionen <code>successCallback</code> oder <code>failureCallback</code> - diese können ebenfalls asynchrone Funktionen sein, die Promises zurückgeben. In diesem Fall werden jegliche Callback-Funktionen, die an <code>promise2</code> angehängt würden, jeweils auch eingereiht in den jeweiligen Promise-Rückgabewerten von <code>successCallback</code> oder <code>failureCallback</code>.</p>
+
+<p>Grundsätzlich repräsentiert jedes Promise-Objekt die Vervollständigung eines asynchronen Schritts in der Kette.</p>
+
+<p>Nach dem alten Verfahren führte das Aneinanderreihen von mehreren asynchronen Operationen zur klassischen <em>Callback pyramid of doom</em>:</p>
+
+<pre class="brush: js notranslate">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>Mit moderenen Funktionen können diese Callback-Funktionen stattdessen an die zurückgegebenen Promise-Objekte angehängt werden, womit die <em>Promise chain</em> geformt wird:</p>
+
+<pre class="brush: js notranslate">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p>Die Argumente für <code>.then()</code> sind optional, und <code>.catch(failureCallback)</code> ist die Kurzschreibform von <code>.then(null, failureCallback)</code>. Dies kann stattdessen auch mit <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeil-Funktionen</a> ausgedrückt werden:</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>Wichtig</strong>: Immer Rückgabewerte angeben; sonst können die Callback das Ergebnis eines vorherigen Promise nicht abfangen.</p>
+
+<h3 id="Chaining_nach_einem_.catch">Chaining nach einem <code>.catch()</code></h3>
+
+<p>Es ist auch möglich, nach einem Fehler, sprich <code>.catch()</code>, weiter zu verkettern. Dies ist nützlich um neue Operationen auszuführen, auch nachdem es einen Fehler in der Kette gab.</p>
+
+<pre class="brush: js notranslate">new Promise((resolve, reject) =&gt; {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() =&gt; {
+    console.log('Do that');
+})
+.then(() =&gt; {
+    console.log('Do this, no matter what happened before');
+});
+</pre>
+
+<p>Das obige Beispiel hat die nachfolgenden Ausgaben:</p>
+
+<pre class="notranslate">Initial
+Do that
+Do this, no matter what happened before
+</pre>
+
+<p>Zu beachten ist hier, dass der Text "Do this" nicht ausgegeben wird, weil der Fehler "Something failed" einen Abbruch ausgelöst hat.</p>
+
+<h2 id="Fehlerübertragung">Fehlerübertragung</h2>
+
+<p>Schaut man sich weiter oben die <em>Callback pyramid of doom</em> an, wird sichtbar, dass <code>failureCallback</code> dort mehrmals angegeben werden muss, anders als nur einmal beim Beispiel unten:</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);
+</pre>
+
+<p>Grundsätzlich hält eine Promise chain bei einer Exception an und erlaubt nur noch Zugriffe von <code>.catch()</code>-Handlern. Dies ist modelliert nach der Funktionsweise von synchronem Code:</p>
+
+<pre class="brush: js notranslate">try {
+  const result = syncDoSomething();
+  const newResult = syncDoSomethingElse(result);
+  const finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+</pre>
+
+<p>Diese Symmetrie mit synchronem Code erreichte ihren Höhepunkt in der <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async/await</a></code>-Komfortschreibweise in ECMAScript 2017:</p>
+
+<pre class="brush: js notranslate">async function foo() {
+  try {
+    const result = await doSomething();
+    const newResult = await doSomethingElse(result);
+    const finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+</pre>
+
+<p>Diese Schreibweise baut auf Promises auf; so ist <code>doSomething()</code> die selbe Funktion wie vorher. <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">Hier</a> kann man mehr über diese Syntax erfahren.</p>
+
+<p>Promise-Objekte lösen mit der <em>Callback pyramid of doom </em>ein fundamentales Designproblem, indem sie alle Fehler, auch geworfene Exceptions und Programmierfehler, abfangen. Diese Eigenschaft ist essentiell für die funktionale Komposition von asynchronen Operationen.</p>
+
+<h2 id="Promise_rejection-Events">Promise rejection-Events</h2>
+
+<p>Immer, wenn ein Promise abgelehnt ("rejected") wird, wird eines von zwei Events zum globalen Scope (grundsätzlich entweder <code><a href="/de/docs/Web/API/Window">window</a></code>, oder, falls in einem Web-Worker gearbeitet wird, der <code><a href="/de/docs/Web/API/Worker">Worker</a></code> selbst oder ein anderes, <code>Worker</code>-basiertes Interface) geschickt. Diese beiden Events sind:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/Window/rejectionhandled_event">rejectionHandled</a></code></dt>
+ <dd>Wird bei der Ablehnung eines Promise gesendet, nachdem die Ablehnung von der reject-Funktion des Ausführenden verarbeitet wurde.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Window/unhandledrejection_event">unhandledRejection</a></code></dt>
+ <dd>Wird bei der Ablehnung eines Promise gesendet, wenn es keinen Rejection-Handler gibt.</dd>
+</dl>
+
+<p>In beiden Fällen hat das Event (vom Typ <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent">PromiseRejectionEvent</a></code>) als Member das Attribut <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent/promise">promise</a></code> welches auf das abgelehnte Promise zeigt, sowie ein Attribut <code><a href="/en-US/docs/Web/API/PromiseRejectionEvent/reason">reason</a></code> welches eine Begründung für die Ablehnung des Promise enthält.</p>
+
+<p>Diese Events bilden ein Fallback für die Fehlerbehandlung bei Promises sowie eine Hilfestellung beim Debugging des eigenen Promise-Managements. Da die Händler im Kontext global sind, werden alle Fehler unabhängig von der Quelle zu ihnen geschickt.</p>
+
+<p>Ein Fall der besonderen Nützlichkeit: Wenn man Code in <a href="/de/docs/Glossary/Node.js">Node.js</a> schreibt, kann es oft passieren, dass im Projekt hinzugefügte Module unverarbeitete abgelehnte Promises haben. Diese werden von der Node-Laufzeitumgebung in die Konsole geloggt. Zu Analysezwecken, zur Verarbeitung durch den eigenen Code, oder auch einfach zur Verhinderung von übermäßigem Output, kann man diese abgelehnten Promises einfangen, indem man für das <a href="/en-US/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code> event</a> einen Handler hinzufügen:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('unhandledrejection', event =&gt; {
+  /* Hier lässt sich Code einfügen, um die Attribute des Events
+     zu untersuchen */
+  event.preventDefault();
+}, false);</pre>
+
+<p>Indem die <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>-Methode des Events aufgerufen wird, wird die standardmäßige Operation bei unverarbeiteten abgelehnten Promises verhindert. Üblicherweise beinhaltet dies das Loggen des Fehlers in der Konsole; im Fall von Node ist das tatsächlich der Fall.</p>
+
+<p>Idealerweise sollte man abgelehnte Promises immer untersuchen, um sicher zu gehen, dass es sich nicht um Code-Fehler handelt.</p>
+
+<h2 id="Ein_Promise-Objekt_in_einer_alten_Callback-API_erzeugen">Ein Promise-Objekt in einer alten Callback-API erzeugen</h2>
+
+<p>Ein einfaches {{jsxref("Promise")}} kann durch dessen Konstruktor-Methode erzeugt werden. Diese Art und Weise sollte nur genutzt werden, um alte APIs damit zu umschließen.</p>
+
+<p>Idealerweise würden alle asynchronen Funktionen bereits Promises zurückgeben. In der Realität erwarten einige APIs immer Callback-Funktionen für Erfolg und Fehlerfall, die nach dem alten Prinzip übergeben werden müssen. Ein eindeutiges Beispiel hierfür ist die Funktion {{domxref("WindowTimers.setTimeout", "setTimeout()")}}:</p>
+
+<pre class="brush: js notranslate">setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);
+</pre>
+
+<p>Callback-Funktionen nach dem alten Verfahren und Promises zu vermischen, bringt Probleme mit sich. Wenn <code>saySomething()</code> fehlschlägt oder Programmierfehler enthält, wird dies durch nichts abgefangen.</p>
+
+<p>Glücklicherweise kann man solche Fälle mit einem Promise umschließen. Ein Best Practice besteht darin, problematische Funktionen auf der niedrigstmöglichen Ebene zu umschließen, und sie nie wieder direkt aufzurufen:</p>
+
+<pre class="brush: js notranslate">const wait = (ms) =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);
+</pre>
+
+<p>Der Promise-Konstruktor empfängt grundsätzlich eine Ausführenden-Funktion, die es möglich macht, ein Promise manuell aufzulösen oder abzulehnen. Da <code>setTimeout()</code> nicht wirklich fehlschlägt, wurde im oberen Beispiel die Ablehnung ausgelassen.</p>
+
+<h2 id="Komposition">Komposition</h2>
+
+<p>{{jsxref("Promise.resolve()")}} und {{jsxref("Promise.reject()")}} sind Abkürzungen für das manuelle Erzeugen von jeweils bereits aufgelösten oder abgelehnten Promises. In bestimmten Fällen kann dies nützlich sein.</p>
+
+<p>{{jsxref("Promise.all()")}} und {{jsxref("Promise.race()")}} sind zwei Kompositionswerkzeuge für das parallele Durchführen von asynchronen Operationen.</p>
+
+<p>Sequenzielle Komposition ist möglich durch cleveres Javascript:</p>
+
+<pre class="notranslate">[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());</pre>
+
+<p>Im oberen Beispiel wird ein Array von asynchronen Funktionen auf eine Promise chain reduziert. Somit ist es das gleiche, wie <code>Promise.resolve().then(func1).then(func2);</code>.</p>
+
+<p>Auch ist es möglich, dies mit einer wiederverwendbaren Kompositionsfunktion umzusetzen, die häufig in der funktionalen Programmierung vorkommt:</p>
+
+<pre class="brush: js notranslate">const applyAsync = (acc,val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
+
+<p>Die Funktion <code>composeAsync()</code> akzeptiert eine dynamische Anzahl von Funktionen als Parameter, und hat als Rückgabewert eine Funktion, die einen Initialwert akzeptiert, welcher durch die Kompositions-Pipeline durchgereicht wird. Der Nutzen besteht darin, dass einige oder alle übergebenen Funktionen entweder synchron oder asynchron sein können, und garantiert wird, dass sie in der richtigen Reihenfolge ausgeführt werden.</p>
+
+<pre class="brush: js notranslate">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+</pre>
+
+<p>In ECMAScript 2017 kann sequenzielle Komposition mittels <code>async/await</code> noch einfacher durchgeführt werden:</p>
+
+<pre class="brush: js notranslate">for (const f of [func1, func2]) {
+  await f();
+}
+</pre>
+
+<h2 id="Timing">Timing</h2>
+
+<p>Um Überraschungen vorzubeugen, werden Funktionen die an <code>.then()</code> übergeben werden niemals synchron aufgerufen, auch wenn das Promise bereits aufgelöst wurde:</p>
+
+<pre class="brush: js notranslate">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>Anstatt sofort ausgeführt zu werden, wird die übergebene Funktion in eine Microtask-Warteschlange eingereiht; das bedeutet, sie wird erst ausgeführt, wenn die Warteschlange am ende des aktuellen Durchlaufs des Javascript event loops geleert wird, sprich zeitnah:</p>
+
+<pre class="brush: js notranslate">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="Nesting">Nesting</h2>
+
+<p>Einfache Promise chains sollten möglichst flach und ohne Nesting implementiert werden, da Nesting auch das Ergebnis von undurchdachter Komposition sein kann. Siehe auch bei typischen Fehlern.</p>
+
+<p>Als Nesting wird eine Kontrollstruktur bezeichnet, um den Scope von catch-Statements zu begrenzen. Ein nested catch fängt nur Fehler in seinem Scope und niedriger ab, nicht außerhalb. Korrekt genutzt führt dies zu höherer Präzision in der Fehlerbehandlung:</p>
+
+<pre class="brush: js notranslate">doSomethingCritical()
+.then(result =&gt; doSomethingOptional(result)
+  .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
+  .catch(e =&gt; {})) // Ignorieren, wenn optionale Operation fehlschlägt
+.then(() =&gt; moreCriticalStuff())
+.catch(e =&gt; console.error("Critical failure: " + e.message));</pre>
+
+<h2 id="Typische_Fehler">Typische Fehler</h2>
+
+<p>In diesem Abschnitt werden übliche Programmierfehler thematisiert, auf die man achten sollte, um Promise chains nicht zu kompromittieren. Im unteren Beispiel wurden drei der am häufigsten vorkommenden Fehler untergebracht:</p>
+
+<pre class="brush: js example-bad notranslate">eineFunktion().then(function (ergebnis) {
+  eineZweiteFunktion(ergebnis) // Kein Promise-Rückgabewert für innere Chain + unnötiges Nesting
+  .then(neuesErgebnis =&gt; eineDritteFunktion(neuesErgebnis));
+}).then(() =&gt; eineVierteFunktion());
+// Keine Chain-Terminierung mit einem catch!</pre>
+
+<p>Der erste Programmierfehler ist, dass die Promise chain nicht ordentlich geknüpft wurde. Passieren tut dies, wenn ein neues Promise erzeugt, aber nicht zurückgegeben wird. Das führt dazu, dass die Promise chain reisst, oder aber, dass zwei chains entstehen, die sich in einer Race condition befinden. Im Klartext heisst das, dass <code>eineVierteFunktion()</code> nicht darauf wartet, dass <code>eineZweiteFunktion()</code> oder <code>eineDritteFunktion()</code> abgeschlossen sind, und, wahrscheinlich unbeabsichtigt, parallel mit ihnen ausgeführt wird. Einzelne Promise chains haben zusätzlich eigene Fehlerbehandlungen, was in diesem Fall zu nicht abgefangenen Fehlern führt.</p>
+
+<p>Der zweite Programmierfehler ist das unnötige Nesting, welches den ersten Fehler mitverursachen kann. Da Nesting auch den Scope der inneren Fehler-Handler begrenzt, kann dies zu nicht abgefangenen Fehlern führen. Eine Variante hiervon ist das <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">Promise-Konstruktor-Antipattern</a>, welches Nesting mit der redundanten Nutzung eines Promise-Konstruktors, um Code, der bereits Promises nutzt, zu umschließen, kombiniert.</p>
+
+<p>Der dritte Programmierfehler ist, die Terminierung der Promise chain mit einem <code>.catch()</code> wegzulassen. Unterminierte chains führen in den meisten Browsern zu nicht abgefangenen Promise-Ablehnungen.</p>
+
+<p>Als Faustregel sei genannt, dass Promise chains immer entweder zurückgegeben oder terminiert werden sollen, und neue Promises sofort zurückgegeben werden sollten, um die Hierarchie flach zu halten:</p>
+
+<pre class="brush: js example-good notranslate">eineFunktion()
+.then(function(ergebnis) {
+  return eineZweiteFunktion(ergennis);
+})
+.then(neuesErgebnis =&gt; eineDritteFunktion(neuesErgebnis))
+.then(() =&gt; eineVierteFunktion())
+.catch(fehler =&gt; console.error(fehler));</pre>
+
+<p>Zu beachten ist, dass <code>() =&gt; x</code> die Kurzschreibform für <code>() =&gt; { return x; }</code> ist.</p>
+
+<p>Im oberen Beispiel steht jetzt eine einzelne, deterministische Promise chain mit ordentlicher Fehlerbehandlung.</p>
+
+<p>Das Verwenden von <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> adressiert die meisten, wenn nicht alle dieser Fehlerquellen; stattdessen kann dann der typische Fehler entstehen, dass man <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>-Keyword vergisst.</p>
+
+<h2 id="Wenn_Promises_auf_Tasks_treffen">Wenn Promises auf Tasks treffen</h2>
+
+<p>In einer Situation, in der es Promises und Tasks (z.B. Events oder Callbacks) gibt, die in einer unvorhergesehenen Reihenfolge ausgeführt werden / feuern können, ist es möglich, sich einen Microtask zunutze zu machen, um den Status von Promises zu prüfen oder diese auszubalancieren, wenn diese unter bestimmten Bedingungen erzeugt werden.</p>
+
+<p>Für weitere Informationen über Microtasks und das Einreihen einer Funktion als Microtask mittels <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask">queueMicrotask()</a></code>, kann im <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Microtask-Guide</a> nachlesen.</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask">async/await</a></code></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>