Vielen Dank, dass du bei der Google I/O dabei warst! Inhalte on demand ansehen

Diese Seite wurde von der Cloud Translation API übersetzt.

Variablen

Variablen sind eine Datenstruktur, die einem Wert einen aussagekräftigen Namen zuweist. Sie können Daten beliebiger Art enthalten.

Der Name einer Variablen wird als Kennzeichnung bezeichnet. Eine gültige Kennung muss folgenden Regeln entsprechen:

IDs können Unicode-Buchstaben, Dollarzeichen ($), Unterstriche (_), Ziffern (0–9) und sogar einige Unicode-Zeichen enthalten.
IDs dürfen keine Leerzeichen enthalten, da der Parser Leerzeichen zum Trennen von Eingabeelementen verwendet. Wenn Sie beispielsweise versuchen, eine Variable my Variable anstelle von myVariable aufzurufen, sieht der Parser zwei Bezeichner, my und Variable, und gibt einen Syntaxfehler („unerwartetes Token: Bezeichner“) aus.
Kennungen müssen mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Sie dürfen nicht mit Ziffern beginnen, um Verwechslungen zwischen Zahlen und Kennungen zu vermeiden:
```
let 1a = true;

> Uncaught SyntaxError: Invalid or unexpected token
```
Wenn in JavaScript Zahlen am Anfang einer Kennung erlaubt wären, wären auch Kennungen zulässig, die nur aus Zahlen bestehen. Dies würde zu Konflikten zwischen Zahlen führen, die als Zahlen und als Kennungen verwendet werden:
```
let 10 = 20

10 + 5
> ?
```
Reservierte Wörter, die bereits syntaktisch sinnvoll sind, können nicht als Bezeichner verwendet werden.
Kennungen dürfen keine Sonderzeichen (! . , / \ + - * =) enthalten.

Die folgenden Punkte sind keine strengen Regeln für das Erstellen von IDs, sondern Best Practices aus der Branche, die die Pflege Ihres Codes erleichtern. Wenn für Ihr Projekt andere Standards gelten, folgen Sie diesen für Einheitlichkeit.

Gemäß dem Beispiel der integrierten Methoden und Eigenschaften von JavaScript ist Camel Case (auch als „CamelCase“ geschrieben) eine sehr gängige Konvention für Bezeichner aus mehreren Wörtern. Bei der CamelCase-Schreibung werden alle Wörter außer dem ersten mit einem Großbuchstaben begonnen, um die Lesbarkeit zu verbessern.

let camelCasedIdentifier = true;

In einigen Projekten werden je nach Kontext und Art der Daten andere Namenskonventionen verwendet. Der erste Buchstabe einer Klasse wird beispielsweise in der Regel großgeschrieben. Bei mehrteiligen Klassennamen wird daher häufig eine Variante der Camel Case-Schreibweise verwendet, die auch als „Upper Camel Case“ oder Pascal bezeichnet wird.

class MyClass {

}

IDs sollten die Art der enthaltenen Daten prägnant beschreiben (z. B. ist currentMonthDays ein besserer Name als theNumberOfDaysInTheCurrentMonth) und auf einen Blick klar lesbar sein (originalValue ist besser als val). Die myVariable-IDs, die in diesem Modul verwendet werden, funktionieren im Kontext einzelner Beispiele, wären aber im Produktionscode sehr wenig hilfreich, da sie keine Informationen dazu enthalten, welche Daten sie enthalten.

IDs sollten nicht zu spezifisch für die enthaltenen Daten sein, da sich ihre Werte je nach Ausführung der Scripts auf diese Daten oder je nach Entscheidungen zukünftiger Wartungsteams ändern können. Beispielsweise muss eine Variable, die ursprünglich die Kennung miles hatte, später im Projekt möglicherweise in einen Wert in Kilometern geändert werden. In diesem Fall müssen die Entwickler alle Verweise auf diese Variable ändern, um zukünftige Verwirrung zu vermeiden. Verwenden Sie stattdessen distance als Kennung, um dies zu vermeiden.

In JavaScript haben Bezeichner, die mit einem Unterstrich (_) beginnen, keine besonderen Berechtigungen oder Bedeutungen. Sie werden jedoch in der Regel verwendet, um anzugeben, dass eine Variable, Methode oder Eigenschaft „privat“ ist, d. h., dass sie nur im Kontext des enthaltenden Objekts verwendet werden soll und nicht außerhalb dieses Kontexts darauf zugegriffen oder sie nicht geändert werden darf. Diese Konvention stammt aus anderen Programmiersprachen und geht auf die Zeit vor der Einführung der privaten Eigenschaften in JavaScript zurück.

Variablendeklaration

Es gibt mehrere Möglichkeiten, JavaScript auf eine Kennung aufmerksam zu machen. Dieser Vorgang wird als „Deklarieren“ einer Variablen bezeichnet. Eine Variable wird mit den Schlüsselwörtern let, const oder var deklariert.

let myVariable;

Verwenden Sie let oder var, um eine Variable zu deklarieren, die jederzeit geändert werden kann. Diese Keywords informieren den JavaScript-Interpreter darüber, dass ein Zeichenstring eine Kennung ist, die einen Wert enthalten kann.

Wenn Sie mit einer modernen Codebasis arbeiten, verwenden Sie let anstelle von var. var funktioniert zwar in modernen Browsern, hat aber einige nicht intuitive Verhaltensweisen, die in den frühesten Versionen von JavaScript definiert wurden und später nicht geändert werden konnten, um die Abwärtskompatibilität zu erhalten. let wurde in ES6 hinzugefügt, um einige Probleme mit dem Design von var zu beheben.

Eine deklarierte Variable wird initialisiert, indem ihr ein Wert zugewiesen wird. Verwenden Sie ein einzelnes Gleichheitszeichen (=), um einer Variablen einen Wert zuzuweisen oder neu zuzuweisen. Sie können dies in derselben Anweisung tun, in der sie deklariert wird:

let myVariable = 5;

myVariable + myVariable
> 10

Sie können eine Variable auch mit let (oder var) deklarieren, ohne sie sofort zu initialisieren. In diesem Fall ist der Anfangswert der Variablen undefined, bis ihr in Ihrem Code ein Wert zugewiesen wird.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

Eine Variable mit dem Wert undefined unterscheidet sich von einer nicht definierten Variablen, deren ID noch nicht deklariert wurde. Wenn Sie auf eine Variable verweisen, die Sie nicht deklariert haben, wird ein Fehler ausgegeben.

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

Die Verknüpfung einer Kennung mit einem Wert wird allgemein als „Bindung“ bezeichnet. Die Syntax, die auf die Keywords let, var oder const folgt, wird als „Bindungsliste“ bezeichnet. Sie ermöglicht mehrere durch Kommas getrennte Variablendeklarationen, die mit dem erwarteten Semikolon enden. Die folgenden Code-Snippets sind daher funktional identisch:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

Für die Neuzuweisung des Werts einer Variablen wird let (oder var) nicht verwendet, da JavaScript bereits weiß, dass die Variable vorhanden ist:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

Sie können Variablen basierend auf ihren vorhandenen Werten neue Werte zuweisen:

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

Wenn Sie versuchen, eine Variable in einer Produktionsumgebung mit let neu zu deklarieren, erhalten Sie einen Syntaxfehler:

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

Die Entwicklertools von Browsern sind bei der erneuten Deklaration von let (und class) toleranter. Daher wird in der Entwicklerkonsole möglicherweise kein Fehler angezeigt.

Um die Kompatibilität mit älteren Browsern zu erhalten, erlaubt var in jedem Kontext eine unnötige Neudeklarierung ohne Fehler:

var myVariable = true;
var myVariable = false;

myVariable\
> false

`const`

Mit dem Keyword const können Sie eine Konstante deklarieren. Das ist eine Variable, die sofort initialisiert werden muss und dann nicht mehr geändert werden kann. Für Konstanten gelten dieselben Regeln wie für Variablen, die mit let (und var) deklariert werden:

const myConstant = true;

myConstant
> true

Sie können eine Konstante nicht deklarieren, ohne ihr sofort einen Wert zuzuweisen, da Konstanten nach der Erstellung nicht neu zugewiesen werden können. Eine nicht initialisierte Konstante würde also für immer undefined bleiben. Wenn Sie versuchen, eine Konstante zu deklarieren, ohne sie zu initialisieren, erhalten Sie einen Syntaxfehler:

const myConstant;
Uncaught SyntaxError: missing = in const declaration

Wenn Sie versuchen, den Wert einer mit const deklarierten Variablen so zu ändern, wie Sie den Wert einer mit let (oder var) deklarierten Variablen ändern würden, führt dies zu einem Typfehler:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

Wenn jedoch eine Konstante mit einem Objekt verknüpft ist, können die Eigenschaften dieses Objekts geändert werden.

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

Eine Konstante, die ein Objekt enthält, ist ein unveränderlicher Verweis auf einen veränderlichen Datenwert. Die Konstante selbst kann nicht geändert werden, aber die Eigenschaften des referenzierten Objekts können geändert, hinzugefügt oder entfernt werden:

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

Wenn Sie nicht davon ausgehen, dass eine Variable neu zugewiesen wird, sollten Sie sie zu einer Konstante machen. Wenn Sie const verwenden, wird Ihr Entwicklungsteam oder die zukünftigen Wartungsmitarbeiter eines Projekts angewiesen, diesen Wert nicht zu ändern, um zu vermeiden, dass die Annahmen Ihres Codes über die Verwendung verletzt werden – z. B., dass eine Variable schließlich anhand eines erwarteten Datentyps ausgewertet wird.

Bereich von Variablen

Der Gültigkeitsbereich einer Variablen ist der Teil eines Scripts, in dem diese Variable verfügbar ist. Außerhalb des Gültigkeitsbereichs einer Variablen wird sie nicht definiert – nicht als Bezeichner mit einem undefined-Wert, sondern so, als wäre sie nicht deklariert worden.

Je nachdem, welches Keyword Sie zum Deklarieren einer Variablen verwenden und in welchem Kontext Sie sie definieren, können Sie Variablen auf Blockanweisungen (Blockbereich), einzelne Funktionen (Funktionsbereich) oder die gesamte JavaScript-Anwendung (globaler Bereich) anwenden.

Blockbereich

Alle Variablen, die Sie mit let oder const deklarieren, gelten nur für die nächstgelegene enthaltende Blockanweisung. Das bedeutet, dass auf die Variable nur innerhalb dieses Blocks zugegriffen werden kann. Der Versuch, außerhalb des enthaltenden Blocks auf eine Blockvariable zuzugreifen, führt zu demselben Fehler wie der Zugriff auf eine nicht vorhandene Variable:

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

Für JavaScript gilt, dass eine blockbezogene Variable nicht außerhalb des Blocks existiert, in dem sie enthalten ist. Sie können beispielsweise eine Konstante innerhalb eines Blocks deklarieren und dann eine weitere Konstante außerhalb dieses Blocks deklarieren, die dieselbe Kennung verwendet:

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

Eine deklarierte Variable kann sich zwar nicht in den übergeordneten Block erstrecken, ist aber für alle untergeordneten Blöcke verfügbar:

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

Der Wert einer deklarierten Variablen kann innerhalb eines untergeordneten Blocks geändert werden:

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

Eine neue Variable kann innerhalb eines untergeordneten Blocks ohne Fehler mit let oder const initialisiert werden, auch wenn sie dieselbe Kennung wie eine Variable in einem übergeordneten Block verwendet:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

Funktionsumfang

Variablen, die mit var deklariert werden, gelten nur für die übergeordnete Funktion (oder den Block zur statischen Initialisierung in einer Klasse).

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

Das ist auch nach dem Aufruf einer Funktion der Fall. Auch wenn die Variable während der Ausführung der Funktion initialisiert wird, ist sie außerhalb des Funktionsumfangs nicht verfügbar:

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

Globaler Geltungsbereich

Eine globale Variable ist in einer gesamten JavaScript-Anwendung verfügbar, in allen Blöcken und Funktionen und für jedes Script auf der Seite.

Das mag zwar eine wünschenswerte Standardeinstellung erscheinen, aber Variablen, auf die jeder Teil einer Anwendung zugreifen und die er ändern kann, können unnötigen Overhead verursachen oder sogar zu Kollisionen mit Variablen an anderer Stelle in einer Anwendung mit derselben Kennung führen. Das gilt für alle JavaScript-Elemente, die beim Rendern einer Seite verwendet werden, einschließlich Bibliotheken von Drittanbietern und Nutzeranalysen. Daher sollten Sie nach Möglichkeit vermeiden, den globalen Gültigkeitsbereich zu verunreinigen.

Alle Variablen, die mit var außerhalb einer übergeordneten Funktion oder mit let oder const außerhalb eines übergeordneten Blocks deklariert werden, sind global:

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

Wenn Sie einer Variablen einen Wert zuweisen, ohne sie explizit zu deklarieren (d. h., ohne var, let oder const zum Erstellen zu verwenden), wird sie zum globalen Gültigkeitsbereich erhoben, auch wenn sie innerhalb einer Funktion oder eines Blocks initialisiert wird. Eine Variable, die mit diesem Muster erstellt wird, wird manchmal als „implizite globale Variable“ bezeichnet.

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Variable Hebevorrichtung

Variablen- und Funktionsdeklarationen werden an den Anfang ihres Gültigkeitsbereichs verlegt. Das bedeutet, dass der JavaScript-Interpreter jede Variable verarbeitet, die an einer beliebigen Stelle in einem Script deklariert wurde, und sie vor der Ausführung des Scripts in die erste Zeile des umschließenden Gültigkeitsbereichs verschiebt. Das bedeutet, dass auf eine Variable, die mit var deklariert wurde, verwiesen werden kann, bevor sie deklariert wird, ohne dass ein Fehler auftritt:

hoistedVariable
> undefined

var hoistedVariable;

Da nur die Variablendeklaration gehostet wird, nicht die Initialisierung, werden Variablen, die nicht explizit mit var, let oder const deklariert wurden, nicht vorgeschoben:

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

Wie bereits erwähnt, wird einer deklarierten, aber nicht initialisierten Variablen der Wert undefined zugewiesen. Dieses Verhalten gilt auch für verschobene Variablendeklarationen, aber nur für solche, die mit var deklariert wurden.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Dieses unintuitive Verhalten ist größtenteils auf Designentscheidungen zurückzuführen, die in den frühesten Versionen von JavaScript getroffen wurden. Es kann nicht geändert werden, ohne das Risiko, dass bestehende Websites nicht mehr funktionieren.

let und const beheben dieses Problem, indem stattdessen ein Fehler ausgegeben wird, wenn auf eine Variable zugegriffen wird, bevor sie erstellt wurde:

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

Dieser Fehler unterscheidet sich vom Fehler „hoistedVariable ist nicht definiert“, der auftreten kann, wenn Sie versuchen, auf eine nicht deklarierte Variable zuzugreifen. Da JavaScript die Variable hochgeschoben hat, weiß es, dass die Variable innerhalb des angegebenen Gültigkeitsbereichs erstellt wird. Anstatt diese Variable vor ihrer Deklarierung mit dem Wert undefined verfügbar zu machen, gibt der Interpreter jedoch einen Fehler zurück. Variablen, die mit let oder const (oder class) deklariert werden, befinden sich vom Beginn des umschließenden Blocks bis zum Punkt im Code, an dem die Variable deklariert wird, in einer „temporal dead zone“ (TDZ).

Durch die zeitliche Totzone ist das Verhalten von let für Autoren intuitiver als das von var. Sie ist auch für das Design von const entscheidend. Da Konstanten nicht geändert werden können, kann eine Konstante, die an den Anfang ihres Gültigkeitsbereichs verschoben und mit dem impliziten Wert undefined versehen wurde, nicht mit einem sinnvollen Wert initialisiert werden.

Wissen testen

Mit welchen Zeichen kann eine Kennung beginnen?

Einen Brief

Unterstrich

Eine Ziffer

Mit welcher Methode wird eine Variable deklariert, deren Wert jederzeit geändert werden kann?

let

const

var