Variablen

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

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

• IDs dürfen Unicode-Buchstaben, Dollarzeichen ($) und Unterstriche enthalten. Zeichen (_), Ziffern (0–9) und sogar einige Unicode-Zeichen.
• IDs dürfen keine Leerzeichen enthalten, da der Parser Leerzeichen verwendet. separate Eingabeelemente. Wenn Sie z. B. versuchen, eine Variable my Variable statt myVariable erkennt der Parser zwei Kennungen: my und Variable und gibt einen Syntaxfehler aus (unerwartetes Token: Kennung").

• IDs müssen mit einem Buchstaben, Unterstrich (_) oder Dollarzeichen ($) beginnen. Sie dürfen nicht mit Ziffern beginnen, um Verwechslungen zwischen Zahlen und Kennzeichnungen:

  let 1a = true;
  
  > Uncaught SyntaxError: Invalid or unexpected token
  

  Wenn JavaScript Zahlen am Anfang einer Kennung zulässt, Kennzeichnungen, die nur aus Zahlen bestehen, was zu Konflikten zwischen Zahlen führt, die als Zahlen 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.

Die folgenden Regeln sind keine strikten Regeln für die Erstellung von Kennungen, Best Practices der Branche, die die Pflege Ihres Codes erleichtern. Wenn Ihre spezifischen Projekt hat unterschiedliche Standards, sollten Sie sich stattdessen an diese halten.

Ausgehend vom Beispiel, das von den integrierten Methoden und Eigenschaften von JavaScript vorgegeben wird, CamelCase (auch als CamelCase stilisiert) ist eine gängige Konvention für IDs, die aus mehreren Wörtern bestehen. Im Camel-Case-Szenario wird Großschreibung des ersten Buchstabens jedes Wortes mit Ausnahme des ersten Buchstabens zur Verbesserung Lesbarkeit ohne Leerzeichen.

let camelCasedIdentifier = true;

Einige Projekte verwenden je nach Kontext und Art andere Namenskonventionen der Daten. Beispielsweise der erste Buchstabe einer Klasse. wird in der Regel großgeschrieben, sodass aus mehreren Wörtern bestehende Klassennamen oft eine Variante von Camel verwenden. Camel-Case-Schreibweise oder Pascal-Fall.

class MyClass {

}

IDs sollten die Art der darin enthaltenen Daten präzise beschreiben (für z. B. ist currentMonthDays ein besserer Name als theNumberOfDaysInTheCurrentMonth) und auf einen Blick gelesen werden können (originalValue ist besser als val). Die Die in diesem Modul verwendeten myVariable-Kennungen funktionieren im Kontext von isolierte Beispiele zu erstellen, wären aber im Produktionscode sehr hilfreich, weil sie keine Informationen darüber enthalten, welche Daten sie enthalten.

Kennungen sollten die darin enthaltenen Daten nicht zu detailliert beschreiben, da können sich ihre Werte ändern, je nachdem, wie Skripts auf diese Daten reagieren. Entscheidungen, die zukünftige Instandhaltungsteams treffen. Beispiel: Eine Variable, die ursprünglich das Ereignis Die Kennung miles muss unter Umständen später in Kilometern geändert werden. die Projektleitung erforderlich, alle Verweise auf diese Variable in zukünftige Unklarheiten zu vermeiden. Verwenden Sie distance als Kennung, um dies zu verhindern. .

JavaScript räumt Kennungen keine besonderen Berechtigungen oder Bedeutungen ein, mit Unterstrich (_) beginnen. In der Regel geben sie aber an, dass wenn eine Variable, Methode oder Property „privat“ ist, d. h., es ist nur für zur Verwendung im Kontext des Objekts, das sie enthält. auf die außerhalb dieses Kontextes zugegriffen oder geändert werden. Diese Konvention wurde übernommen, aus anderen Programmiersprachen stammen, und ist schon vor der Einführung der private Properties erstellen.

Variablendeklaration

Es gibt mehrere Möglichkeiten, JavaScript auf eine Kennung, einen Prozess, namens „deklarieren“ eine Variable. Eine Variable wird mit let, const, oder var Keywords.

let myVariable;

Verwenden Sie let oder var, um eine Variable zu deklarieren, die jederzeit geändert werden kann. Diese Schlüsselwörter teilen dem JavaScript-Interpreter mit, dass eine Zeichenfolge Kennung, die einen Wert enthalten könnte.

Wenn Sie in einer modernen Codebasis arbeiten, verwenden Sie let anstelle von var. var funktioniert weiterhin in modernen Browsern funktioniert, aber einige nicht intuitive Verhaltensweisen, Versionen von JavaScript verwendet, die später nicht mehr die Abwärtskompatibilität zu wahren. let wurde in ES6 hinzugefügt, um einige Probleme zu beheben mit dem Design von var.

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

let myVariable = 5;

myVariable + myVariable
> 10

Sie können eine Variable auch mit let (oder var) deklarieren, ohne sie zu initialisieren . In diesem Fall beträgt der Anfangswert der Variablen undefined, bis Ihr weist ihm einen Wert zu.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

Eine Variable mit einem undefined-Wert unterscheidet sich von einer nicht definierten Variablen. deren ID noch nicht deklariert wurde. Wenn Sie auf eine Variable verweisen, deklariert einen 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 Keywords let, var oder const folgt, wird als „Bindungsliste“, und ermöglicht mehrere kommagetrennte Variablendeklarationen. (endet mit dem erwarteten Semikolon). Dadurch werden die folgenden Code-Snippets funktional identisch:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

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

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

Sie können Variablen neue Werte auf Basis ihrer vorhandenen 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

Browser Entwicklertools sind bei der Erklärung von let (und class) großzügiger. Sie werden also möglicherweise der gleiche Fehler in Ihrer Developer Console angezeigt.

Um die Kompatibilität mit älteren Browsern aufrechtzuerhalten, lässt var eine unnötige Neudeklaration zu ohne Fehler in irgendeinem Kontext:

var myVariable = true;
var myVariable = false;

myVariable\
> false

const

Verwenden Sie das Schlüsselwort const, um eine Konstante anzugeben. Dies ist ein Variablentyp, der sofort initialisiert und dann nicht mehr geändert werden. Kennungen für Konstanten Sie befolgen dieselben Regeln wie für Variablen, die mit let (und var) deklariert werden:

const myConstant = true;

myConstant
> true

Konstanten können nicht deklariert werden, ohne ihr sofort einen Wert zuzuweisen. Konstanten können nach dem Erstellen nicht neu zugewiesen werden. wäre für immer undefined. Wenn Sie versuchen, eine Konstante 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, das Ändern des Werts einer Variablen, die wit mit let (oder var) deklariert ist, führt zu einem Typ. Fehler:

const myConstant = true;

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

Wenn jedoch eine Konstante mit einem Objekt verknüpft ist, Objekt können 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 unveränderlich. Verweis auf einen änderbaren Datenwert Die Konstante selbst kann zwar nicht geändert werden, die Eigenschaften der referenzierten -Objekt kann 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, hat es sich bewährt, eine Konstante. Mit const können Sie Ihrem Entwicklungsteam oder zukünftigen Administratoren Folgendes mitteilen: diesen Wert nicht zu ändern, um zu vermeiden, dass die Annahmen des Codes wie sie verwendet wird – zum Beispiel, dass eine Variable irgendwann die mit einem erwarteten Datentyp verglichen werden.

Bereich von Variablen

Der Gültigkeitsbereich einer Variablen ist der Teil eines Skripts, in dem die Variable verfügbar ist. Außerhalb des Gültigkeitsbereichs einer Variablen wird sie nicht definiert, nicht als Kennung undefined enthält, aber so als wäre er nicht deklariert worden.

Abhängig vom Keyword, mit dem Sie eine Variable deklarieren, und vom Kontext, können Sie den Umfang von Variablen auf Blockanweisungen festlegen (Blockumfang). einzelne Funktionen (Funktionsbereich) oder die gesamte JavaScript-Anwendung (globaler Geltungsbereich)

Blockbereich

Jede Variable, die Sie mit let oder const deklarieren, wird auf die jeweils nächste mit block-Anweisung, Das bedeutet, dass nur innerhalb dieses Blocks auf die Variable zugegriffen werden kann. Der Versuch, auf eine blockbezogene Variable außerhalb ihres enthaltenden Blocks zuzugreifen, führt zu denselben Fehler beim Versuch, auf eine nicht vorhandene Variable zuzugreifen:

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

scopedVariable
> ReferenceError: scopedVariable is not defined

Für JavaScript gibt es keine Variable für Blockierungen. außerhalb des Blocks, der sie enthält. Sie können z. B. eine Konstante innerhalb eines Blocks und deklarieren Sie dann eine andere Konstante außerhalb dieses Blocks, bei der dieselbe Kennung:

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

scopedConstant;
> true

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

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

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

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

Eine neue Variable kann mit let oder const in einem Nachfolgerelement initialisiert werden. ohne Fehler blockieren, auch wenn sie dieselbe Kennung wie eine Variable in einem übergeordneter Block:

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

Funktionsbereich

Mit var deklarierte Variablen werden der Funktion zugeordnet, die sie am nächsten liegt (oder statischer Initialisierungsblock innerhalb einer Klasse).

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

Dies ist immer noch der Fall, nachdem eine Funktion aufgerufen wurde. Auch wenn die während die Funktion initialisiert wird, ist außerhalb des Geltungsbereichs 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 verfügbar, innerhalb aller Blöcke und Funktionen in jedem Script auf der Seite.

Auch wenn dies eine wünschenswerte Standardeinstellung sein kann, sind Variablen, die in einem kann eine Anwendung unnötigen Overhead verursachen mit Variablen an anderer Stelle in einer Anwendung mit derselben Kennung kollidieren. Dies gilt für jegliches JavaScript, das am Rendern einer Seite beteiligt ist, etwa Bibliotheken von Drittanbietern und Nutzeranalysen. Daher ist es sollten Sie nach Möglichkeit eine Verschmutzung des globalen Geltungsbereichs vermeiden.

Jede Variable, die mit var außerhalb einer übergeordneten Funktion oder mit let oder const außerhalb eines übergeordneten Blocks 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

Einer Variablen einen Wert zuweisen, ohne diesen explizit zu deklarieren (d. h. durch Verwenden Sie nie var, let oder const, um eine Variable zu erstellen, globalen Gültigkeitsbereich, auch wenn die Initialisierung innerhalb einer Funktion oder eines Blocks erfolgt. Eine Variable die mit diesem Muster erstellt wurden, wird manchmal als „implizierte globale“ bezeichnet.

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Variable Hebewerk

Variablen und Funktionsdeklarationen werden an den Anfang ihres Bereichs zugeoben. Das bedeutet, dass der JavaScript-Interpreter alle Variablen verarbeitet, die Punkt in einem Skript und verschiebt es effektiv in die erste Zeile des umschließenden Skripts. bevor Sie das Skript ausführen. Das bedeutet, dass eine mit Auf var kann verwiesen werden, bevor die Variable deklariert wird, ohne dass ein Fehler:

hoistedVariable
> undefined

var hoistedVariable;

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

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

Wie bereits erwähnt, eine deklarierte, aber nicht initialisierte Variable erhält den Wert undefined. Dieses Verhalten gilt für die Winde -Deklarationen verwenden, jedoch nur in den mit var deklarierten Deklarationen.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Dieses nicht intuitive Verhalten ist größtenteils ein Weichen auf Designentscheidungen, die in den und können nicht ohne Risiko funktionsunfähig ist.

let und const lösen dieses Verhalten aus, indem sie stattdessen einen Fehler ausgeben, wenn ein auf die Variable zugreifen, bevor sie erstellt wird:

{
    hoistedVariable;

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

Dieser Fehler unterscheidet sich von „hoistedVariable is notdefined“. Fehler wenn auf eine nicht deklarierte Variable zugegriffen wird. Da JavaScript die Variable angehoben hat, wird sie innerhalb von den angegebenen Umfang. Anstatt diese Variable jedoch vor ihrer mit dem Wert undefined angeben, gibt der Interpreter einen Fehler aus. Mit let, const (oder class) deklarierte Variablen sollen in einem „Zeitliche Leerlaufzone“ („TDZ“) vom Beginn des einschließenden Blocks bis zum Punkt im Code, an dem die Variable deklariert ist.

Durch die zeitliche Leerlaufzone ist das Verhalten von let für diese Zeit intuitiver als var für Autoren. Sie ist auch entscheidend für das Design von const. Da Konstanten nicht geändert, eine Konstante, die sich ganz nach oben aus ihrem Umfang erhöht hat und mit einem impliziten Wert von undefined konnten dann nicht mit einem aussagekräftigen Wert initialisiert werden.

Wissen testen