Variablen

Variablen sind eine Datenstruktur, die einem Wert einen repräsentativen Namen zuweist. Sie können Daten jeder Art enthalten.

Der Name einer Variablen wird als Kennung bezeichnet. Für eine gültige Kennung gelten folgende Regeln:

• Kennungen können Unicode-Buchstaben, Dollarzeichen ($), Unterstriche (_), Ziffern (0–9) und sogar einige Unicode-Zeichen enthalten.
• Kennungen dürfen keine Leerzeichen enthalten, da der Parser Leerzeichen zum Trennen von Eingabeelementen verwendet. Wenn Sie beispielsweise versuchen, die Variable my Variable anstelle von myVariable aufzurufen, erkennt der Parser die beiden Kennungen my und Variable und gibt einen Syntaxfehler aus („unerwartetes Token: Kennzeichnung“).

• IDs müssen mit einem Buchstaben, Unterstrich (_) oder 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 zulässig sind, sind Kennungen nur aus Zahlen zulässig. Dies führt zu Konflikten zwischen Zahlen, die als Zahlen verwendet werden, und Zahlen, die als Kennungen verwendet werden:

  let 10 = 20
  
  10 + 5
  > ?
  

• "Reservierte Wörter", die bereits syntaktisch aussagekräftig sind, können nicht als Kennungen verwendet werden.

• IDs dürfen keine Sonderzeichen (! . , / \ + - * =) enthalten.

Bei den folgenden Regeln handelt es sich nicht um strenge Regeln zum Erstellen von Kennungen, sondern es handelt sich um branchenübliche Best Practices, die die Verwaltung Ihres Codes vereinfachen. Wenn Ihr spezifisches Projekt unterschiedliche Standards hat, befolgen Sie diese stattdessen aus Gründen der Einheitlichkeit.

In Anlehnung an das Beispiel der integrierten Methoden und Eigenschaften von JavaScript ist die CamelCase-Schreibweise (auch als "camelCase" stilisiert) eine sehr gängige Konvention für Kennungen, die aus mehreren Wörtern bestehen. Bei Camel Case wird der erste Buchstabe jedes Worts mit Ausnahme des ersten großgeschrieben, um die Lesbarkeit ohne Leerzeichen zu verbessern.

let camelCasedIdentifier = true;

Einige Projekte verwenden je nach Kontext und Art der Daten andere Namenskonventionen. Beispielsweise wird der erste Buchstabe einer Klasse in der Regel großgeschrieben, sodass aus mehr Wörtern bestehende Klassennamen häufig eine Variante der Camel-Case-Schreibweise verwenden, die allgemein als „CamelCase-Großbuchstaben“ oder Pascal bezeichnet wird.

class MyClass {

}

Kennungen sollten die Art der Daten, die sie enthalten, prägnant beschreiben (z. B. ist currentMonthDays ein besserer Name als theNumberOfDaysInTheCurrentMonth) und klar auf einen Blick zu lesen (originalValue ist besser als val). Die in diesem Modul verwendeten myVariable-IDs funktionieren im Zusammenhang mit isolierten Beispielen, sind im Produktionscode jedoch sehr nicht hilfreich, da sie keine Informationen darüber liefern, welche Daten sie enthalten.

IDs sollten nicht zu spezifisch für die darin enthaltenen Daten werden, da sich ihre Werte je nachdem, wie Skripts auf diese Daten reagieren, oder von Entscheidungen, die zukünftige Administratoren treffen, ändern können. So muss beispielsweise eine Variable, die ursprünglich die Kennzeichnung miles hatte, später im Projekt in einen Wert in Kilometern geändert werden, damit Administratoren alle Verweise auf diese Variable ändern müssen, um zukünftige Verwechslungen zu vermeiden. Um dies zu verhindern, verwenden Sie stattdessen distance als Kennung.

JavaScript verleiht Kennungen, die mit einem Unterstrich (_) beginnen, keine besondere Berechtigung oder Bedeutung. Sie dienen jedoch in der Regel dazu, eine Variable, eine Methode oder eine Eigenschaft als „privat“ zu kennzeichnen, d. h. sie ist nur für die Verwendung im Kontext des Objekts vorgesehen, das sie enthält, und sollte außerhalb dieses Kontexts nicht aufgerufen oder geändert werden. Dies ist eine Konvention aus anderen Programmiersprachen, die vor dem Hinzufügen der privaten Properties von JavaScript liegt.

Variablendeklaration

Es gibt mehrere Möglichkeiten, JavaScript auf eine ID zu hinweisen. Dieser Vorgang wird als „Deklaration 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 Schlüsselwörter signalisieren dem JavaScript-Interpreter, dass eine Zeichenfolge eine Kennung ist, die einen Wert enthalten kann.

Verwenden Sie bei der Arbeit in einer modernen Codebasis let anstelle von var. var funktioniert zwar noch in modernen Browsern, weist jedoch ein wenig intuitives Verhalten auf, das in den frühesten Versionen von JavaScript definiert war und später nicht mehr geändert werden konnte, um die Abwärtskompatibilität zu wahren. 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 einfaches Gleichheitszeichen (=), um einer Variablen einen Wert zuzuweisen oder neu zuzuweisen. Sie können dies im Rahmen 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 der Code ihr einen Wert zuweist.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

Eine Variable mit einem undefined-Wert unterscheidet sich von einer undefinierten Variablen, deren Kennung noch nicht deklariert wurde. Der Verweis auf eine nicht deklarierte Variable führt zu einem Fehler.

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

Die Verknüpfung einer Kennung mit einem Wert wird im Allgemeinen als „Bindung“ bezeichnet. Die Syntax, die auf die Schlüsselwörter let, var oder const folgt, wird als „Bindungsliste“ bezeichnet und ermöglicht mehrere durch Kommas getrennte Variablendeklarationen, die mit dem erwarteten Semikolon enden. Dadurch werden die folgenden Code-Snippets funktionell identisch:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

Beim Neuzuweisen eines Variablenwerts wird nicht let (oder var) verwendet, da JavaScript weiß bereits, dass die Variable existiert:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

Sie können Variablen auf Grundlage ihrer vorhandenen Werte neue Werte zuweisen:

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

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

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

In den Entwicklertools der Browser ist die erneute Deklaration von let (und class) großzügiger, sodass in der Entwicklerkonsole möglicherweise nicht derselbe Fehler angezeigt wird.

Damit die Kompatibilität mit älteren Browsern gewahrt bleibt, lässt var eine unnötige erneute Deklaration ohne Fehler in jedem Kontext zu:

var myVariable = true;
var myVariable = false;

myVariable\
> false

const

Verwenden Sie das Schlüsselwort const, um eine Konstante zu deklarieren. Das ist ein Variablentyp, der sofort initialisiert werden muss und dann nicht mehr geändert werden kann. Kennungen für Konstanten folgen denselben Regeln wie die mit let (und var) deklarierten Variablen:

const myConstant = true;

myConstant
> true

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

const myConstant;
Uncaught SyntaxError: missing = in const declaration

Der Versuch, den Wert einer mit const deklarierten Variablen so zu ändern, wie Sie den Wert einer mit let (oder var) deklarierten Variablen ändern, führt zu einem Typfehler:

const myConstant = true;

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

Wird jedoch einem Objekt eine Konstante zugeordnet, 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 änderbaren Datenwert. Die Konstante selbst kann zwar nicht geändert werden, die Eigenschaften des referenzierten Objekts können jedoch geändert, hinzugefügt oder entfernt werden:

const constantObject = { "firstvalue" : true };

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

Wenn Sie nicht erwarten, dass eine Variable neu zugewiesen wird, empfiehlt es sich, sie als Konstante festzulegen. Mit const weisen Sie Ihr Entwicklungsteam oder die zukünftigen Betreuer eines Projekts an, diesen Wert nicht zu ändern. So vermeiden Sie, dass die Annahmen, die Ihr Code zur Verwendung des Codes trifft, widerlegt werden. So wird z. B. eine Variable anhand eines erwarteten Datentyps ausgewertet.

Bereich von Variablen

Der Geltungsbereich einer Variablen ist der Teil eines Skripts, in dem sie verfügbar ist. Außerhalb des Geltungsbereichs einer Variablen wird sie nicht definiert – nicht als Kennung mit einem undefined-Wert, sondern als wäre sie nicht deklariert worden.

Je nach dem Schlüsselwort, mit dem Sie eine Variable deklarieren, und dem Kontext, in dem Sie sie definieren, können Sie Variablen zu Blockanweisungen (Blockbereich), einzelnen Funktionen (Funktionsbereich) oder zur gesamten JavaScript-Anwendung (globaler Geltungsbereich) einschränken.

Umfang blockieren

Jede Variable, die Sie mit let oder const deklarieren, bezieht sich auf die jeweils nächste enthaltende Blockanweisung. Das bedeutet, dass auf die Variable nur innerhalb dieses Blocks zugegriffen werden kann. Der Versuch, auf eine blockbezogene Variable außerhalb des zugehörigen Blocks zuzugreifen, führt zum gleichen Fehler wie der Versuch, auf eine nicht vorhandene Variable zuzugreifen:

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

scopedVariable
> ReferenceError: scopedVariable is not defined

Eine blockbezogene Variable ist nicht außerhalb des Blocks vorhanden, in dem sie enthalten ist. Sie können beispielsweise eine Konstante innerhalb eines Blocks und dann eine weitere Konstante außerhalb des Blocks deklarieren, die dieselbe Kennung verwendet:

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

scopedConstant;
> true

Obwohl eine deklarierte Variable nicht in ihren übergeordneten Block erweitert werden kann, ist sie für alle nachfolgenden Blöcke verfügbar:

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

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

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

Eine neue Variable kann mit let oder const in einem Nachfolgeblock ohne Fehler 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

Funktionsbereich

Variablen, die mit var deklariert werden, werden auf die nächstgelegene enthaltende Funktion (oder statischen Initialisierungsblock innerhalb einer Klasse) beschränkt.

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

Dies ist auch nach dem Aufruf einer Funktion der Fall. Obwohl die Variable initialisiert wird, während die Funktion ausgeführt wird, ist sie außerhalb des Bereichs der Funktion 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 der gesamten JavaScript-Anwendung und innerhalb von Blöcken und Funktionen sowie in jedem Skript auf der Seite verfügbar.

Auch wenn dies ein wünschenswerter Standard erscheint, können Variablen, auf die jeder Teil einer Anwendung zugreifen und diese ändern kann, unnötigen Aufwand verursachen oder sogar zu Konflikten mit Variablen an anderer Stelle in einer Anwendung mit derselben ID führen. Dies gilt für jeglichen JavaScript-Code, der am Rendering einer Seite beteiligt ist, einschließlich Bibliotheken von Drittanbietern und Nutzeranalysen. Es wird daher empfohlen, den globalen Geltungsbereich nach Möglichkeit zu vermeiden.

Jede Variable, die mit var außerhalb einer übergeordneten Funktion oder mit let oder const außerhalb eines übergeordneten Blocks deklariert wird, ist 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 ihn explizit zu deklarieren, also niemals mit var, let oder const zu erstellen, wird eine Variable in den globalen Bereich hochgestuft, selbst wenn sie innerhalb einer Funktion oder eines Blocks initialisiert wird. Eine mit diesem Muster erstellte Variable wird manchmal als "impliziertes globales" bezeichnet.

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Variable Winden

Variablen und Funktionsdeklarationen werden an den Anfang ihres Geltungsbereichs hochgezogen. Das bedeutet, dass der JavaScript-Interpreter jede an einer beliebigen Stelle in einem Skript deklarierte Variable verarbeitet und vor der Skriptausführung in die erste Zeile des einschließenden Bereichs verschiebt. Das bedeutet, dass auf eine mit var deklarierte Variable verwiesen werden kann, bevor sie deklariert wird, ohne dass ein Fehler auftritt:

hoistedVariable
> undefined

var hoistedVariable;

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

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 Deklarierungen von Windvariablen, jedoch nur für Deklarierungen von Windvariablen, die mit var deklariert wurden.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Dieses wenig intuitive Verhalten ist ein Großteil der Designentscheidungen, die in den frühesten Versionen von JavaScript getroffen wurden. Es kann nicht geändert werden, ohne dass dadurch vorhandene Websites beeinträchtigt werden.

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

{
    hoistedVariable;

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

Dieser Fehler unterscheidet sich von dem Fehler „hoistedVariable ist nicht definiert“, den Sie möglicherweise beim Zugriff auf eine nicht deklarierte Variable erwarten. Da die Variable in JavaScript gezogen wurde, wird erkannt, dass die Variable innerhalb des angegebenen Bereichs erstellt wird. Anstatt diese Variable vor ihrer Deklaration mit dem Wert undefined verfügbar zu machen, gibt der Interpreter einen Fehler aus. Mit let, const (oder class) deklarierte Variablen befinden sich vom Beginn ihres einschließenden Blocks bis zu dem Punkt im Code in einer temporären Totzone (TDZ) bis zu dem Punkt, an dem die Variable deklariert wird.

Eine zeitlich begrenzte Totzone macht das Verhalten von let für Autoren intuitiver als var. Es ist auch wichtig für das Design von const. Da Konstanten nicht geändert werden können, konnte eine Konstante, die an den Anfang verschoben wurde und mit dem impliziten Wert undefined versehen wurde, nicht mit einem aussagekräftigen Wert initialisiert werden.

Wissen testen