Speichern der benötigten Informationen — Variablen

Im Verlauf dieses Artikels werden Sie aufgefordert, Codezeilen einzugeben, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist der beste Ort, um Ihren Beispielcode einzugeben, die JavaScript-Konsole Ihres Browsers (siehe Was sind Browser-Entwicklertools für weitere Informationen, wie Sie auf dieses Tool zugreifen können).

Eine Variable ist ein Behälter für einen Wert, wie eine Zahl, die wir in einer Summe verwenden könnten, oder ein String, den wir als Teil eines Satzes verwenden könnten.

Schauen wir uns ein Beispiel an:

<button id="button_A">Press me</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector("#button_A");
const headingA = document.querySelector("#heading_A");

let count = 1;

buttonA.onclick = () => {
  buttonA.textContent = "Try again!";
  headingA.textContent = `${count} clicks so far`;
  count += 1;
};

In diesem Beispiel wird beim Drücken der Schaltfläche etwas Code ausgeführt. Erstens ändert es den Text auf der Schaltfläche selbst. Zweitens zeigt es eine Nachricht über die Anzahl der Male an, die die Schaltfläche gedrückt wurde. Die Zahl wird in einer Variablen gespeichert. Jedes Mal, wenn der Benutzer die Schaltfläche drückt, wird die Zahl in der Variablen um eins erhöht.

Um zu verstehen, warum das so nützlich ist, denken wir darüber nach, wie wir dieses Beispiel ohne eine Variable schreiben würden, um die Zählung zu speichern. Es würde ungefähr so aussehen:

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector("#button_B");
const headingB = document.querySelector("#heading_B");

buttonB.onclick = () => {
  buttonB.textContent = "Try again!";
  headingB.textContent = "1 click so far";
};

Sie verstehen vielleicht noch nicht vollständig die Syntax, die wir verwenden (noch nicht!), aber Sie sollten die Idee verstehen können. Ohne eine Variable haben wir keine Möglichkeit zu wissen, wie oft die Schaltfläche geklickt wurde. Die Nachricht an den Benutzer wird schnell irrelevant, wenn keine Informationen gespeichert werden können.

Variablen machen einfach Sinn, und je mehr Sie über JavaScript lernen, desto mehr werden sie zur zweiten Natur.

Eine besondere Sache an Variablen ist, dass sie nahezu alles enthalten können — nicht nur Strings und Zahlen. Variablen können auch komplexe Daten und sogar komplette Funktionen enthalten, um erstaunliche Dinge zu tun. Sie werden mehr darüber lernen, während Sie fortschreiten.

Um eine Variable zu verwenden, müssen Sie sie zuerst erstellen — genauer gesagt, wir nennen dies Deklarieren der Variablen. Dazu geben Sie das Schlüsselwort let gefolgt von dem Namen, den Sie Ihrer Variable geben möchten, ein:

let myName;
let myAge;

Hier erstellen wir zwei Variablen namens myName und myAge. Versuchen Sie, diese Zeilen in der Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine Variable (oder zwei) mit Ihren eigenen Namenswahlen zu erstellen.

Sie können testen, ob diese Werte jetzt in der Ausführungsumgebung existieren, indem Sie einfach den Namen der Variablen eingeben, z.B.

myName;
myAge;

Derzeit haben sie keinen Wert; sie sind leere Behälter. Wenn Sie die Variablennamen eingeben, sollte ein Wert von undefined zurückgegeben werden. Wenn sie nicht existieren, erhalten Sie eine Fehlermeldung — versuchen Sie, einzugeben

scoobyDoo;

Sobald Sie eine Variable deklariert haben, können Sie sie mit einem Wert initialisieren. Dies tun Sie, indem Sie den Variablennamen eingeben, gefolgt von einem Gleichheitszeichen (=), gefolgt von dem Wert, den Sie ihm geben möchten. Zum Beispiel:

myName = "Chris";
myAge = 37;

Versuchen Sie, jetzt zu der Konsole zurückzukehren und diese Zeilen einzugeben. Sie sollten den Wert, den Sie der Variablen zugewiesen haben, in der Konsole zurückgegeben sehen, um es zu bestätigen, in jedem Fall. Wieder können Sie Ihre Variablenwerte zurückgeben, indem Sie ihren Namen in die Konsole eingeben — versuchen Sie diese erneut:

myName;
myAge;

Sie können eine Variable gleichzeitig deklarieren und initialisieren, wie dies:

let myDog = "Rover";

Dies werden Sie wahrscheinlich die meiste Zeit tun, da es schneller ist als die beiden Aktionen auf zwei getrennten Zeilen auszuführen.

Sie werden wahrscheinlich auch eine andere Möglichkeit sehen, Variablen zu deklarieren, unter Verwendung des Schlüsselworts var:

var myName;
var myAge;

Als JavaScript erstmals erstellt wurde, war dies die einzige Möglichkeit, Variablen zu deklarieren. Das Design von var ist verwirrend und fehleranfällig. Deshalb wurde in modernen Versionen von JavaScript let erstellt, ein neues Schlüsselwort zum Erstellen von Variablen, das etwas anders funktioniert als var, um dessen Probleme zu beheben.

Ein paar einfache Unterschiede werden unten erklärt. Wir werden jetzt nicht auf alle Unterschiede eingehen, aber Sie werden beginnen, sie zu entdecken, während Sie mehr über JavaScript lernen (wenn Sie wirklich jetzt darüber lesen möchten, fühlen Sie sich frei, unsere let Referenzseite zu überprüfen).

Zum Beispiel, wenn Sie ein mehrzeiliges JavaScript-Programm schreiben, das eine Variable deklariert und initialisiert, können Sie tatsächlich eine Variable mit var nach ihrer Initialisierung deklarieren und es wird trotzdem funktionieren. Zum Beispiel:

myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;

Dies funktioniert aufgrund von Hoisting — lesen Sie var Hoisting für mehr Details zu diesem Thema.

Hoisting funktioniert nicht mehr mit let. Wenn wir im obigen Beispiel var durch let ersetzen, würde es mit einem Fehler fehlschlagen. Dies ist eine gute Sache — das Deklarieren einer Variablen nach ihrer Initialisierung führt zu verwirrendem, schwer verständlichem Code.

Zweitens, wenn Sie var verwenden, können Sie dieselbe Variable so oft deklarieren, wie Sie möchten, aber mit let können Sie das nicht. Das Folgende würde funktionieren:

var myName = "Chris";
var myName = "Bob";

Aber das Folgende würde beim zweiten Aufruf einen Fehler auslösen:

let myName = "Chris";
let myName = "Bob";

Sie müssten stattdessen dies tun:

let myName = "Chris";
myName = "Bob";

Auch dies ist eine vernünftige Sprachentscheidung. Es gibt keinen Grund, Variablen neu zu deklarieren — es macht die Dinge nur verwirrender.

Aus diesen und anderen Gründen empfehlen wir, let in Ihrem Code zu verwenden, anstatt var. Sofern Sie nicht ausdrücklich Unterstützung für alte Browser schreiben, gibt es keinen Grund mehr, var zu verwenden, da alle modernen Browser let seit 2015 unterstützen.

> let myName = "Chris";
  let myName = "Bob";
// Als eine Eingabe: SyntaxError: Identifier 'myName' has already been declared

> let myName = "Chris";
> let myName = "Bob";
// Als zwei Eingaben: beide erfolgreich

Nachdem eine Variable mit einem Wert initialisiert wurde, können Sie diesen Wert ändern (oder aktualisieren), indem Sie ihm einen anderen Wert geben. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:

myName = "Bob";
myAge = 40;

Sie können eine Variable so ziemlich alles nennen, was Sie möchten, aber es gibt Einschränkungen. Im Allgemeinen sollten Sie sich darauf beschränken, nur lateinische Zeichen (0-9, a-z, A-Z) und das Unterstrich-Zeichen zu verwenden.

• Sie sollten keine anderen Zeichen verwenden, da sie Fehler verursachen oder für ein internationales Publikum schwer verständlich sein könnten.
• Verwenden Sie keine Unterstriche am Anfang von Variablennamen — dies wird in bestimmten JavaScript-Konstruktionen verwendet, um bestimmte Dinge zu bedeuten, und kann daher verwirrend sein.
• Verwenden Sie keine Zahlen zu Beginn von Variablen. Dies ist nicht erlaubt und verursacht einen Fehler.
• Eine sichere Konvention ist Lower Camel Case, bei der Sie mehrere Wörter zusammenfügen, wobei Sie Kleinbuchstaben für das gesamte erste Wort und dann Großbuchstaben für die folgenden Wörter verwenden. Wir haben dies bisher in unseren Variablennamen in dem Artikel verwendet.
• Machen Sie Variablennamen intuitiv, sodass sie die Daten, die sie enthalten, beschreiben. Verwenden Sie nicht einfach nur einzelne Buchstaben/Zahlen oder lange Sätze.
• Variablen sind case-sensitive — also ist myage eine andere Variable als myAge.
• Ein letzter Punkt: Sie müssen auch vermeiden, JavaScript reservierte Wörter als Ihre Variablennamen zu verwenden — damit meinen wir die Wörter, die die eigentliche Syntax von JavaScript bilden! Sie können also keine Wörter wie var, function, let und for als Variablennamen verwenden. Browser erkennen sie als unterschiedliche Codeelemente, und Sie erhalten Fehler.

Gute Namensbeispiele:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Schlechte Namensbeispiele:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

Versuchen Sie jetzt, einige weitere Variablen mit den oben genannten Richtlinien zu erstellen.

Es gibt einige verschiedene Arten von Daten, die wir in Variablen speichern können. In diesem Abschnitt werden wir diese kurz beschreiben. In zukünftigen Artikeln werden Sie mehr im Detail darüber lernen.

Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch ganze Zahlen oder Integer genannt) oder Dezimalzahlen wie 2.456 (auch Float oder Gleitkommazahlen genannt). Sie müssen in JavaScript keine Variablentypen deklarieren, im Gegensatz zu einigen anderen Programmiersprachen. Wenn Sie einer Variablen einen Zahlenwert geben, schließen Sie ihn nicht in Anführungszeichen ein:

let myAge = 17;

Strings sind Textstücke. Wenn Sie einer Variablen einen String-Wert geben, müssen Sie ihn in einfache oder doppelte Anführungszeichen setzen; andernfalls versucht JavaScript, ihn als einen anderen Variablennamen zu interpretieren.

let dolphinGoodbye = "So long and thanks for all the fish";

Booleans sind Wahr-/Falschwerte — sie können zwei Werte haben, true oder false. Diese werden im Allgemeinen verwendet, um eine Bedingung zu testen, wonach Code entsprechend ausgeführt wird. Ein einfaches Beispiel wäre also:

let iAmAlive = true;

Wo es in der Realität eher so verwendet würde:

let test = 6 < 3;

Dies verwendet den "kleiner als"-Operator (<), um zu testen, ob 6 kleiner als 3 ist. Wie man erwarten kann, gibt es false zurück, weil 6 nicht kleiner als 3 ist! Sie werden später im Kurs viel mehr über solche Operatoren lernen.

Ein Array ist ein einziges Objekt, das mehrere Werte enthält, die in eckige Klammern eingeschlossen und durch Kommas getrennt sind. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

Sobald diese Arrays definiert sind, können Sie auf jeden Wert durch ihre Position im Array zugreifen. Versuchen Sie diese Zeilen:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

Die eckigen Klammern geben einen Indexwert an, der der Position des gewünschten Wertes im Array entspricht. Sie haben vielleicht bemerkt, dass Arrays in JavaScript null-basierte Indizes verwenden: Das erste Element befindet sich an der Position 0.

Beim Programmieren ist ein Objekt eine Code-Struktur, die ein reales Objekt modelliert. Sie können ein Objekt haben, das eine Box darstellt und Informationen über ihre Breite, Länge und Höhe enthält, oder Sie könnten ein Objekt haben, das eine Person darstellt und Daten über ihren Namen, ihre Größe, ihr Gewicht, welche Sprache sie sprechen, wie man sie begrüßt und mehr enthält.

Versuchen Sie die folgende Zeile in Ihre Konsole einzugeben:

let dog = { name: "Spot", breed: "Dalmatian" };

Um die im Objekt gespeicherten Informationen abzurufen, können Sie die folgende Syntax verwenden:

dog.name;

JavaScript ist eine "dynamisch typisierte Sprache", was bedeutet, dass Sie, im Gegensatz zu einigen anderen Sprachen, den Datentyp einer Variablen nicht angeben müssen (Zahlen, Strings, Arrays usw.).

Zum Beispiel, wenn Sie eine Variable deklarieren und ihr einen Wert in Anführungszeichen geben, behandelt der Browser die Variable als String:

let myString = "Hello";

Selbst wenn der Wert in Anführungszeichen nur Ziffern enthält, ist es dennoch ein String — keine Zahl — also seien Sie vorsichtig:

let myNumber = "500"; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;

Versuchen Sie, die vier obigen Zeilen einzeln in Ihre Konsole einzugeben und sehen Sie sich die Ergebnisse an. Sie werden bemerken, dass wir einen speziellen Operator namens typeof verwenden — dieser gibt den Datentyp der Variablen zurück, die Sie danach eingeben. Ein erstes Mal sollte er string zurückgeben, da zu diesem Zeitpunkt die Variable myNumber einen String, '500', enthält. Sehen Sie, was er beim zweiten Aufruf zurückgibt.

Neben Variablen können Sie auch Konstanten deklarieren. Diese sind wie Variablen, außer dass:

• Sie müssen sie beim Deklarieren initialisieren
• Sie können ihnen keinen neuen Wert zuweisen, nachdem Sie sie initialisiert haben.

Zum Beispiel, mit let können Sie eine Variable ohne Initialisierung deklarieren:

let count;

Wenn Sie versuchen, dies mit const zu tun, erhalten Sie einen Fehler:

const count;

Ähnlich können Sie mit let eine Variable initialisieren und dann einen neuen Wert zuweisen (dies wird auch als Neuzuweisung der Variablen bezeichnet):

let count = 1;
count = 2;

Wenn Sie dies mit const versuchen, erhalten Sie einen Fehler:

const count = 1;
count = 2;

Beachten Sie, dass obwohl eine Konstante in JavaScript immer denselben Wert bezeichnen muss, Sie den Inhalt des Wertes, den sie bezeichnet, ändern können. Dies ist kein nützlicher Unterschied für einfache Typen wie Zahlen oder Booleans, aber betrachten Sie ein Objekt:

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

Sie können Eigenschaften eines Objekts, das mit const deklariert wurde, aktualisieren, hinzufügen oder entfernen, da obwohl sich der Inhalt des Objekts geändert hat, die Konstante immer noch auf dasselbe Objekt zeigt:

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

Wenn Sie mit const nicht so viel tun können wie mit let, warum würden Sie es dann vorziehen, const anstelle von let zu verwenden? In der Tat ist const sehr nützlich. Wenn Sie const verwenden, um einen Wert zu benennen, teilt es jedem, der Ihren Code liest, mit, dass dieser Name niemals einem anderen Wert zugewiesen wird. Immer wenn sie diesen Namen sehen, werden sie wissen, worauf er sich bezieht.

In diesem Kurs nehmen wir folgendes Prinzip an, wann let und wann const verwendet wird:

Verwenden Sie const, wann immer Sie können, und let, wenn Sie müssen.

Das bedeutet, dass Sie, wenn Sie eine Variable initialisieren können, wenn Sie sie deklarieren und sie später nicht erneut zuweisen müssen, es zu einer Konstante machen.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren — siehe Testen Sie Ihre Fähigkeiten: Variablen.

Inzwischen sollten Sie eine angemessene Menge über JavaScript-Variablen und wie man sie erstellt, wissen. Im nächsten Artikel konzentrieren wir uns detaillierter auf Zahlen und schauen uns an, wie man einfache Mathematik in JavaScript ausführt.

• Zurück
• Übersicht: Dynamisches Skripting mit JavaScript
• Weiter