TOC

Grundlegendes zu Variablen, Umfang und Hosten in JavaScript

Einführung

Variables sind ein wesentlicher Bestandteil vieler Programmiersprachen und gehören zu den ersten und wichtigsten Konzepten, die Anfänger lernen müssen. In JavaScript gibt es eine Reihe verschiedener Eigenschaften von Variablen sowie verschiedene Regeln, die bei der Benennung beachtet werden müssen. In JavaScript werden drei Schlüsselwörter zum Deklarieren einer Variablen verwendet -var,let undconst - und jedes beeinflusst, wie der Code die Variable unterschiedlich interpretiert.

In diesem Lernprogramm wird erläutert, was Variablen sind, wie sie deklariert und benannt werden, und es wird auch der Unterschied zwischenvar,let undconst genauer untersucht. Wir werden auch die Auswirkungen des Hebens und die Bedeutung des globalen und lokalen Umfangs für das Verhalten einer Variablen untersuchen.

Variablen verstehen

Avariable ist ein benannter Container, der zum Speichern von Werten verwendet wird. Eine Information, auf die wir möglicherweise mehrmals verweisen, kann zur späteren Verwendung oder Änderung in einer Variablen gespeichert werden. In JavaScript kann der in einer Variablen enthaltene Wert ein beliebigesJavaScript data typeein, einschließlich einer Zahl, einer Zeichenfolge oder eines Objekts.

Vor der Sprachspezifikation vonECMAScript 2015 (ES6), auf der das heutige JavaScript basiert, gab es nur eine Möglichkeit, eine Variable zu deklarieren - das Schlüsselwortvar. Infolgedessen verwenden die meisten älteren Code- und Lernressourcen nurvar für Variablen. Wir werden die Unterschiede zwischen den Schlüsselwörternvar,let undconstinits own sectionunten untersuchen.

Wir könnenvar verwenden, um das Konzept einer Variablen selbst zu demonstrieren. Im folgenden Beispiel wirddeclareeine Variable undassignein Wert dafür sein. 

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

Diese Aussage besteht aus einigen Teilen:

  • Die Deklaration einer Variablen mit dem Schlüsselwortvar

  • Der Variablenname (oder Bezeichner)username

  • Die Zuweisungsoperation, dargestellt durch die Syntax von=

  • Der zugewiesene Wert ist"sammy_shark"

Jetzt können wirusername im Code verwenden. JavaScript merkt sich, dassusername den Zeichenfolgenwertsammy_shark darstellt. 

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
}
Outputtrue

Wie bereits erwähnt, können Variablen zur Darstellung eines beliebigen JavaScript-Datentyps verwendet werden. In diesem Beispiel deklarieren wir Variablen mit den Werten string, number, object, Boolean und null. 

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" };
var success = true;
var nothing = null;

Mitconsole.log können wir den in einer bestimmten Variablen enthaltenen Wert sehen. 

// Send spartans variable to the console
console.log(spartans);
Output300

Variablen speichern Daten im Speicher, auf die später zugegriffen und geändert werden kann. Variablen können auch neu zugewiesen und mit einem neuen Wert versehen werden. Das vereinfachte Beispiel unten zeigt, wie ein Kennwort in einer Variablen gespeichert und anschließend aktualisiert werden kann. 

// Assign value to password variable
var password = "hunter2";

// Reassign variable value with a new value
password = "hunter3";

console.log(password);
Output'hunter3'

In einem tatsächlichen Programm würde ein Kennwort höchstwahrscheinlich sicher in einer Datenbank gespeichert. Dieses Beispiel zeigt jedoch eine Situation, in der der Wert einer Variablen möglicherweise aktualisiert werden muss. Der Wert vonpassword warhunter2, aber wir haben ihnhunter3 zugewiesen, was der Wert ist, den JavaScript von diesem Punkt an erkennt.

Variablen benennen

Variablennamen werden in JavaScript alsidentifiers bezeichnet. Wir haben einige der Regeln für die Benennung von Bezeichnern inUnderstanding Syntax and Code Structure in JavaScript diskutiert, die hier zusammengefasst sind:

  • Variablennamen können nur aus Buchstaben (a-z), Zahlen (0-9), Dollarzeichensymbolen ($) und Unterstrichen (_) bestehen.

  • Variablennamen dürfen keine Leerzeichen (Tabulatoren oder Leerzeichen) enthalten

  • Zahlen dürfen nicht mit dem Namen einer Variablen beginnen

  • Es gibt mehrerereserved keywords, die nicht als Name einer Variablen verwendet werden können

  • Variablennamen unterscheiden zwischen Groß- und Kleinschreibung

JavaScript hat auch die Konvention, Camel Case (manchmal als CamelCase stilisiert) in den Namen von Funktionen und Variablen zu verwenden, die mitvar oderlet deklariert wurden. Dies ist die Praxis, das erste Wort in Kleinbuchstaben zu schreiben und dann den ersten Buchstaben jedes nachfolgenden Wortes ohne Leerzeichen dazwischen in Großbuchstaben zu schreiben. Die meisten Variablen, die keine Konstanten sind, werden mit einigen Ausnahmen dieser Konvention folgen. Die Namen von Variablen, die konstant sind und mit dem Schlüsselwortconstdeklariert werden, werden normalerweise in Großbuchstaben geschrieben.

Dies scheint eine Menge Regeln zu sein, aber es wird sehr schnell zur zweiten Natur werden, gültige und konventionelle Variablennamen zu schreiben.

Differenz zwischenvar,let undconst

JavaScript verfügt über drei verschiedene Schlüsselwörter, um eine Variable zu deklarieren, wodurch die Sprache noch komplexer wird. Die Unterschiede zwischen den drei basieren auf Umfang, Heben und Neuzuweisung.

Stichwort Umfang Heben Kann neu zugewiesen werden Kann neu deklariert werden

var

Funktionsumfang

Yes

Yes

Yes

let

Bereich blockieren

No

Yes

No

const

Bereich blockieren

No

No

No

Möglicherweise fragen Sie sich, welche der drei Optionen Sie in Ihren eigenen Programmen verwenden sollten. Eine allgemein akzeptierte Praxis besteht darin,const so oft wie möglich undlet im Fall von Schleifen und Neuzuweisungen zu verwenden. Im Allgemeinen könnenvar außerhalb der Arbeit an Legacy-Code vermieden werden.

Variabler Bereich

Scope in JavaScript bezieht sich auf den aktuellen Codekontext, der die Zugänglichkeit von Variablen für JavaScript bestimmt. Die beiden Arten von Gültigkeitsbereichen sindlocal undglobal:

  • Global variables sind diejenigen, die außerhalb eines Blocks deklariert sind

  • Local variables sind diejenigen, die innerhalb eines Blocks deklariert sind

Im folgenden Beispiel erstellen wir eine globale Variable. 

// Initialize a global variable
var creature = "wolf";

Wir haben gelernt, dass Variablen neu zugewiesen werden können. Mithilfe des lokalen Bereichs können wir tatsächlich neue Variablen mit demselben Namen wie eine Variable in einem äußeren Bereich erstellen, ohne den ursprünglichen Wert zu ändern oder neu zuzuweisen.

Im folgenden Beispiel erstellen wir eine globalespecies-Variable. Innerhalb der Funktion befindet sich eine lokale Variable mit dem gleichen Namen. Wenn Sie sie an die Konsole senden, können Sie feststellen, dass der Wert der Variablen je nach Bereich unterschiedlich ist und der ursprüngliche Wert nicht geändert wird. 

// Initialize a global variable
var species = "human";

function transform() {
  // Initialize a local, function-scoped variable
  var species = "werewolf";
  console.log(species);
}

// Log the global and local variable
console.log(species);
transform();
console.log(species);
Outputhuman
werewolf
human

In diesem Beispiel ist die lokale Variablefunction-scoped. Variablen, die mit dem Schlüsselwortvardeklariert wurden, haben immer einen Funktionsumfang, dh sie erkennen Funktionen mit einem separaten Gültigkeitsbereich. Auf diese Variable mit lokalem Gültigkeitsbereich kann daher im globalen Gültigkeitsbereich nicht zugegriffen werden.

Die neuen Schlüsselwörterlet undconst sind jedochblock-scoped. Dies bedeutet, dass aus jeder Art von Block ein neuer lokaler Bereich erstellt wird, einschließlich Funktionsblöcken,if-Anweisungen undfor- undwhile-Schleifen.

Um den Unterschied zwischen Variablen mit Funktions- und Blockbereich zu veranschaulichen, weisen wir eine neue Variable in einemif-Block mitlet zu. 

var fullMoon = true;

// Initialize a global variable
let species = "human";

if (fullMoon) {
  // Initialize a block-scoped variable
  let species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);
OutputIt is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.

In diesem Beispiel hat die Variablespecies einen globalen Wert (human) und einen anderen lokalen Wert (werewolf). Wenn wir jedochvar verwenden würden, würde sich ein anderes Ergebnis ergeben. 

// Use var to initialize a variable
var species = "human";

if (fullMoon) {
  // Attempt to create a new variable in a block
  var species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);
OutputIt is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

Im Ergebnis dieses Beispiels erhalten sowohl die globale Variable als auch die Variable mit Blockbereich denselben Wert,werewolf. Dies liegt daran, dass Sie anstelle einer neuen lokalen Variablen mitvar dieselbe Variable im selben Bereich neu zuweisen. var erkenntif nicht als Teil eines anderen, neuen Bereichs. Es wird generell empfohlen, Variablen zu deklarieren, die blockspezifisch sind, da sie mit geringerer Wahrscheinlichkeit versehentlich Variablenwerte überschreiben.

Heben

In den meisten Beispielen haben wir bishervar bisdeclare als Variable verwendet, und wir habeninitialized als Wert. Nach dem Deklarieren und Initialisieren können wir auf die Variable zugreifen oder sie neu zuweisen.

Wenn wir versuchen, eine Variable zu verwenden, bevor sie deklariert und initialisiert wurde, gibt sieundefined zurück. 

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment
var x = 100;
Outputundefined

Wenn wir jedoch das Schlüsselwortvarweglassen, deklarieren wir die Variable nicht mehr, sondern initialisieren sie nur noch. Es gibt einReferenceError zurück und stoppt die Ausführung des Skripts. 

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment without var
x = 100;
OutputReferenceError: x is not defined

Der Grund dafür liegt inhoisting, einem Verhalten von JavaScript, bei dem Variablen- und Funktionsdeklarationen an den Anfang ihres Gültigkeitsbereichs verschoben werden. Da nur die eigentliche Deklaration angehoben wird, nicht die Initialisierung, gibt der Wert im ersten Beispielundefined zurück.

Zur Verdeutlichung dieses Konzepts sehen Sie unten den Code, den wir geschrieben haben, und wie JavaScript ihn tatsächlich interpretiert hat. 

// The code we wrote
console.log(x);
var x = 100;

// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

JavaScript hatx vor der Ausführung des Skripts als Variable im Speicher gespeichert. Da es noch vor seiner Definition aufgerufen wurde, ist das Ergebnisundefined und nicht100. Es verursacht jedoch keinReferenceError und stoppt das Skript. Obwohl das Schlüsselwortvar die Position vonvar nicht geändert hat, ist dies eine hilfreiche Darstellung der Funktionsweise des Hebens. Dieses Verhalten kann jedoch Probleme verursachen, da der Programmierer, der diesen Code geschrieben hat, wahrscheinlich erwartet, dass die Ausgabe vonxtrue ist, wenn sie stattdessenundefined ist.

Wir können auch im nächsten Beispiel sehen, wie das Heben zu unvorhersehbaren Ergebnissen führen kann: 

// Initialize x in the global scope
var x = 100;

function hoist() {
  // A condition that should not affect the outcome of the code
  if (false) {
    var x = 200;
  }
  console.log(x);
}

hoist();
Outputundefined

In diesem Beispiel haben wirx als100 global deklariert. Abhängig von einerif-Anweisung könnte sichx in200 ändern, aber da die Bedingungfalse war, sollte sie den Wert vonx nicht beeinflusst haben. Stattdessen wurdex an die Spitze derhoist()-Funktion angehoben, und der Wert wurde zuundefined.

Diese Art von unvorhersehbarem Verhalten kann möglicherweise Fehler in einem Programm verursachen. Dalet undconst einen Blockbereich haben, werden sie nicht auf diese Weise angehoben, wie unten gezeigt. 

// Initialize x in the global scope
let x = true;

function hoist() {
  // Initialize x in the function scope
  if (3 === 4) {
    let x = false;
  }
  console.log(x);
}

hoist();
Outputtrue

Eine doppelte Deklaration von Variablen, die mitvar möglich ist, führt zu einem Fehler mitlet undconst. 

// Attempt to overwrite a variable declared with var
var x = 1;
var x = 2;

console.log(x);
Output2
// Attempt to overwrite a variable declared with let
let y = 1;
let y = 2;

console.log(y);
OutputUncaught SyntaxError: Identifier 'y' has already been declared

Zusammenfassend lässt sich sagen, dass mitvar eingeführte Variablen möglicherweise vom Heben betroffen sind, einem Mechanismus in JavaScript, bei dem Variablendeklarationen im Speicher gespeichert werden. Dies kann zu undefinierten Variablen im eigenen Code führen. Die Einführung vonlet undconst behebt dieses Problem, indem ein Fehler ausgegeben wird, wenn versucht wird, eine Variable zu verwenden, bevor sie deklariert wird, oder wenn versucht wird, eine Variable mehrmals zu deklarieren.

Konstanten

Viele Programmiersprachen enthaltenconstants. Dies sind Werte, die nicht geändert oder geändert werden können. In JavaScript wird der Bezeichnerconst nach Konstanten modelliert, und die einemconst zugewiesenen Werte können nicht neu zugewiesen werden.

Es ist üblich, alleconst-Kennungen in Großbuchstaben zu schreiben. Dies kennzeichnet sie als leicht unterscheidbar von anderen Variablenwerten.

Im folgenden Beispiel initialisieren wir die VariableSPECIES als Konstante mit dem Schlüsselwortconst. Der Versuch, die Variable neu zuzuweisen, führt zu einem Fehler. 

// Assign value to const
const SPECIES = "human";

// Attempt to reassign value
SPECIES = "werewolf";

console.log(SPECIES);
OutputUncaught TypeError: Assignment to constant variable.

Da die Werte vonconstnicht neu zugewiesen werden können, müssen sie gleichzeitig deklariert und initialisiert werden, oder es wird ein Fehler ausgegeben. 

// Declare but do not initialize a const
const TODO;

console.log(TODO);
OutputUncaught SyntaxError: Missing initializer in const declaration

Werte, die sich in der Programmierung nicht ändern können, werden alsimmutable bezeichnet, während Werte, die geändert werden können,mutable sind. Obwohl die Werte vonconst nicht neu zugewiesen werden können, können sie geändert werden, da die Eigenschaften von Objekten geändert werden können, die mitconst deklariert wurden. 

// Create a CAR object with two properties
const CAR = {
    color: "blue",
    price: 15000
}

// Modify a property of CAR
CAR.price = 20000;

console.log(CAR);
Output{ color: 'blue', price: 20000 }

Konstanten sind nützlich, um Ihrem zukünftigen Selbst und anderen Programmierern, die mit Ihnen an einem Projekt arbeiten, klar zu machen, dass die beabsichtigte Variable nicht neu zugewiesen werden sollte. Wenn Sie erwarten, dass eine Variable in Zukunft geändert wird, möchten Sie wahrscheinlichlet verwenden, um die Variable stattdessen zu deklarieren.

Fazit

In diesem Lernprogramm wurde erläutert, was eine Variable ist, wie eine Variable benannt wird und wie Variablenwerte neu zugewiesen werden. Wir haben auch Informationen zum Umfang und zum Heben, zu einigen Einschränkungen des ursprünglichen Schlüsselwortsvarowie zur Behebung dieser Probleme durchletundconsterhalten.

Um zu vergleichen, wie Variablen in anderen Sprachen verwendet werden, lesen Sie unser Tutorial unter „https://www.digitalocean.com/community/tutorials/how-to-use-variables-in-python-3[How To Use Variables in Python 3]. "

Related