path: root/files/de/web/javascript/reference/statements/var/index.html

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

<p>Mit dem Schlüsselwort <strong><code>var</code> </strong>deklariert man Variablen und initialisiert diese optional.</p>

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

<pre class="syntaxbox">var <em>varname1 [</em>= <em>wert1] [</em>, <em>varname2 [</em><em>= wert2] ... [</em>, <em>varnameN [=wertN]]]</em>;</pre>

<dl>
 <dt><code>varnameN</code></dt>
 <dd>Variablenname. Jeder legale Bezeichner ist erlaubt.</dd>
</dl>

<dl>
 <dt><code>wertN</code></dt>
 <dd>Initialwert der Variablen. Jeder legale Ausdruck ist erlaubt.</dd>
</dl>

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

<p>Variablendeklarationen werden immer ausgeführt bevor Programmcode ausgeführt wird, egal wo sie im Programmcode vorkommen. Der Gültigkeitsbereich einer Variablendeklaration mit <code>var</code> ist der aktuelle Kontext. Dieser ist der Kontext der umschließenden Funktion oder für Deklarationen außerhalb von Funktionen der globale Kontext.</p>

<p>Das Zuweisen eines Wertes zu einer nicht deklarierten Variablen führt immer dazu, dass eine globale Variable erstellt wird (die Variable wird auf dem globalen Objekt erstellt). Die Unterschiede zwischen deklarierten und nicht deklarierten Variablen sind:</p>

<p>1. Deklarierte Variablen sind immer in dem Kontext gültig, in dem sie deklariert wurden. Undeklarierte Variablen sind immer globale Variablen.</p>

<pre class="brush: js">function x() {
  y = 1;   // erzeugt einen ReferenceError im strict mode
  var z = 2;
}

x();

console.log(y); // gibt "1" aus
console.log(z); // erzeugt einen ReferenceError: z ist nur in x verfügbar.
</pre>

<p>2. Deklarierte Variablen werden erstellt bevor Programmcode ausgeführt wird. Undeklarierte Variablen existieren nicht bevor die Zuweisung ausgeführt wurde.</p>

<pre class="brush: js">console.log(a);                // erzeugt einen ReferenceError.
console.log('still going...'); // wird nie ausgeführt</pre>

<pre class="brush: js">var a;
console.log(a);                // gibt "undefined" oder "" aus, abhängig vom Browser.
console.log('still going...'); // gibt "still going..." aus.</pre>

<p>3. Deklarierte Variablen sind nicht konfigurierbare Attribute des ausführenden Kontexts (Funktion oder globaler Kontext). Undeklarierte Variablen sind konfigurierbar (z. B. sie können gelöscht werden).</p>

<pre class="brush: js">var a = 1;
b = 2;

delete this.a; // erzeugt einen TypeError im strict mode. Andernfalls wird es ignoriert
delete this.b;

console.log(a, b); // erzeugt einen ReferenceError.
// Das 'b' Attribut wurde gelöscht und existiert nicht länger.</pre>

<p>Wegen dieser drei Unterschiede führt das Fehlen der Variablendeklaration zu unerwarteten Ergebnissen. <strong>Deswegen ist es empfohlen immer Variablen zu deklarieren, unabhängig davon, ob sie sich in einer Funktion oder im globalen Kontext befinden.</strong> Zudem wird im ECMAScript 5 <code>{{jsxref("</code>Functions_and_function_scope/Strict_mode<code>", "strict mode")}} </code>ein Fehler erzeugt, wenn einer nicht deklarierten Variablen ein Wert zugewiesen wird.</p>

<h3 id="var_hoisting">var hoisting</h3>

<p>Weil Variablendeklarationen (und Deklarationen im Allgemeinen) vor dem Ausführen von Programmcode geschieht, ist das Deklarieren einer Variable irgendwo im Programmcode das gleiche, als würde sie am Anfang deklariert werden. Das bedeutet, dass eine Variable benutzt werden kann bevor sie im Programmcode deklariert wurde. Dieser Umstand wird "hoisting" genannt und wird möglich, weil die Deklaration der Variablen an den Anfang der Funktion oder den Anfang des globalen Programmcodes verschoben wird.</p>

<pre class="brush: js">bla = 2
var bla;
// ...

// Implizit wird Folgendes gemacht:

var bla;
bla = 2;
</pre>

<p>Aus diesem Grund ist es empfohlen Variablen immer am Anfang ihres Gültigkeitsbereiches zu definieren. Dadurch wird klarer, welche Variable vom lokalen Gültigkeitsbereich stammt und welche über die Gültigkeitsbereichekette gefunden werden muss.</p>

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

<h3 id="Deklarieren_und_initialisieren_zweier_Variablen">Deklarieren und initialisieren zweier Variablen</h3>

<pre>var a = 0, b = 0;</pre>

<h3 id="Zuweisung_zweier_Variablen_mit_einer_Zeichenkette">Zuweisung zweier Variablen mit einer Zeichenkette</h3>

<pre class="brush: js">var a = "A";
var b = a;

// Das gleiche wie:

var a, b = a = "A";
</pre>

<p>Sei aufmerksam mit der Reihenfolge:</p>

<pre class="brush: js">var x = y, y = 'A';
console.log(x + y); // undefinedA
</pre>

<p><code>x </code>und <code>y </code>werden deklariert bevor Programmcode ausgeführt wird. Die Zuweisungen geschehen später. Wenn "<code>x = y</code>" ausgeführt wird, existiert <code>y </code>schon mit dem Wert <code>undefined</code>, weshalb kein Fehler erzeugt wird. <code>x </code>wird der Wert <code>undefined</code> zugewiesen. Dann wird <code>y </code>der Wert 'A' zugewiesen. Nach dieser einen Zeile ist demnach das Resultat <code>x === undefined &amp;&amp; y === 'A'</code>.</p>

<h3 id="Initialisierung_mehrerer_Variablen">Initialisierung mehrerer Variablen</h3>

<pre class="brush: js">var x = 0;

function f(){
  var x = y = 1; // x ist lokal Deklariert. y nicht!
}
f();

console.log(x, y); // 0, 1
// Nicht im strict-mode:
// x ist die erwartetete globale Variable und nicht die lokale.
// y wird global angelegt und der Wert 1 zugewiesen! </pre>

<h3 id="Implizierte_globale_Variablen_und_Gültigkeitsbereiche_äußerer_Funktionen">Implizierte globale Variablen und Gültigkeitsbereiche äußerer Funktionen</h3>

<p>Variablen die scheinbar global verfügbar sind, stammen manchmal aus dem Gültigkeitsbereich einer äußeren Funktion:</p>

<pre class="brush: js">var x = 0;  // x ist global deklariert und mit dem Wert 0 initialisiert.

console.log(typeof z); // undefined, solange z noch nicht existiert

function a() { // Wenn a aufgerufen wird,
  var y = 2;   // wird y in der Funktion a deklariert und der Wert 2 wird zugewiesen

  console.log(x, y);   // 0 2

  function b() {       // Wenn b aufgerufen wird,
    x = 3;  // wird 3 der globalen Variablen x zugewiesen
            // (es wird keine neue globale Variable erstellt)
    y = 4;  // wird 4 der Variablen y (äußere Funktion) zugewiesen
            // (es wird keine neue globale Variable erstellt)
    z = 5;  // wird eine globale Variable z erstellt und der Wert 5 wird zugewiesen.
  }         // (erzeugt einen ReferenceError im strict mode.)

  b();     // Aufruf von b (erstellt z als globale Variable)
  console.log(x, y, z);  // 3 4 5
}

a();                   // Aufruf von a und somit auch von b
console.log(x, z);     // 3 5
console.log(typeof y); // undefined weil y local in der Funktion a deklariert wurde.</pre>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initiale Definition.<br>
    Implementiert in JavaScript 1.0</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li><code>{{jsxref("Anweisungen/let", "let")}}</code></li>
 <li><code>{{jsxref("Anweisungen/const", "const")}}</code></li>
</ul>