Speichern der benötigten Informationen — Variablen

In diesem Artikel werden Sie aufgefordert, Codezeilen einzutippen, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist die beste Stelle zum Eingeben Ihres Beispielcodes die JavaScript-Konsole Ihres Browsers (siehe Was sind Entwicklerwerkzeuge für Browser für weitere Informationen zum Zugriff auf dieses Werkzeug).

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

Lassen Sie uns ein Beispiel ansehen:

<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 durch das Drücken der Schaltfläche ein Code ausgeführt. Zunächst wird der Text auf der Schaltfläche selbst geändert. Zweitens wird eine Nachricht über die Anzahl der Male angezeigt, 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 dies so nützlich ist, denken wir darüber nach, wie wir dieses Beispiel ohne die Verwendung einer Variablen zur Speicherung der Zählung schreiben würden. Es würde in etwa 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 möglicherweise noch nicht vollständig die Syntax, die wir verwenden (noch nicht!), aber Sie sollten die Idee bekommen. 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 wenn Sie mehr über JavaScript lernen, werden sie zur zweiten Natur.

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

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

let myName;
let myAge;

Hier erstellen wir zwei Variablen mit den Namen myName und myAge. Versuchen Sie, diese Zeilen in die Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine Variable (oder zwei) mit eigenen Namenswahl zu erstellen.

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

myName;
myAge;

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

scoobyDoo;

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

myName = "Chris";
myAge = 37;

Versuchen Sie jetzt, in die Konsole zurückzugehen und diese Zeilen einzugeben. Sie sollten den Wert, den Sie der Variablen zugewiesen haben, in der Konsole bestätigt sehen. Erneut können Sie Ihre Variablenwerte zurückrufen, indem Sie ihre Namen in die Konsole eingeben — versuchen Sie diese erneut:

myName;
myAge;

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

let myDog = "Rover";

Dies werden Sie wahrscheinlich die meiste Zeit tun, da es schneller ist als die beiden Aktionen in zwei separaten Zeilen durchzuführen.

Sie werden wahrscheinlich auch eine andere Möglichkeit sehen, Variablen zu deklarieren, indem Sie das Schlüsselwort var verwenden:

var myName;
var myAge;

Als JavaScript zuerst erstellt wurde, war dies der einzige Weg, Variablen zu deklarieren. Das Design von var ist verwirrend und fehleranfällig. Deshalb wurde in modernen Versionen von JavaScript let eingeführt, ein neues Schlüsselwort zur Erstellung von Variablen, das etwas anders funktioniert als var und seine Probleme dabei behebt.

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 mehr darüber lesen möchten, können Sie gerne unsere Referenzseite zu let nachschlagen).

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 der Initialisierung deklarieren und es wird trotzdem funktionieren. Zum Beispiel:

myName = "Chris";

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

logName();

var myName;

Dies funktioniert wegen Hoisting — lesen Sie Var Hoisting für mehr Details über das Thema.

Hoisting funktioniert nicht mehr mit let. Wenn wir var im obigen Beispiel in let ändern, würde es mit einem Fehler fehlschlagen. Dies ist eine gute Sache — deklarieren einer Variable nach ihrer Initialisierung führt zu verwirrendem, schwerer 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 es nicht. Das folgende würde funktionieren:

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

Aber das folgende würde einen Fehler in der zweiten Zeile auslösen:

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

Sie müssten stattdessen das folgende tun:

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

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

Aus diesen und weiteren Gründen empfehlen wir, let in Ihrem Code zu verwenden, anstatt var. Es sei denn, Sie schreiben explizit Unterstützung für alte Browser, 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

Sobald 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 Ihrer Konsole einzugeben:

myName = "Bob";
myAge = 40;

Sie können eine Variable fast alles nennen, was Sie wollen, aber es gibt Einschränkungen. Im Allgemeinen sollten Sie nur lateinische Zeichen (0-9, a-z, A-Z) und das Unterstrichzeichen 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-Konstrukten verwendet, um spezifische Dinge zu bedeuten, sodass es verwirrend werden kann.
• Verwenden Sie keine Zahlen am Anfang von Variablen. Dies ist nicht erlaubt und verursacht einen Fehler.
• Eine sichere Konvention, an die Sie sich halten können, ist lower camel case, bei dem Sie mehrere Wörter zusammenfügen, indem Sie das gesamte erste Wort in Kleinbuchstaben und dann nachfolgende Wörter groß schreiben. Wir haben dies bisher für unsere Variablennamen im Artikel verwendet.
• Machen Sie Variablennamen intuitiv, sodass sie die Daten beschreiben, die sie enthalten. Verwenden Sie nicht einfach nur einzelne Buchstaben/Zahlen oder lange Phrasen.
• Variablen sind case-sensitiv — daher 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 ausmachen! Daher können Sie Wörter wie var, function, let und for nicht als Variablennamen verwenden. Browser erkennen sie als unterschiedliche Code-Elemente, und daher erhalten Sie 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 der obigen Anleitung 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 über sie im Detail lernen.

Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch Ganzzahlen genannt) oder Dezimalzahlen wie 2,456 (auch Floats 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 keine 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-/Falsch-Werte — sie können zwei Werte haben, true oder false. Diese werden im Allgemeinen verwendet, um eine Bedingung zu testen, nach der Code entsprechend ausgeführt wird. Ein einfaches Beispiel wäre z.B.:

let iAmAlive = true;

In Wirklichkeit würde es jedoch mehr so verwendet werden:

let test = 6 < 3;

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

Ein Array ist ein einzelnes 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 entspricht. Sie haben möglicherweise bemerkt, dass Arrays in JavaScript nullbasiert sind: das erste Element befindet sich an Index 0.

Um mehr zu erfahren, sehen Sie sich unseren Artikel über Arrays an.

In der Programmierung ist ein Objekt eine Struktur von Code, die ein reales Objekt modelliert. Sie können ein einfaches Objekt haben, das eine Box darstellt und Informationen über seine 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 hallo zu ihnen sagt 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;

Für mehr zu diesem Thema, siehe das Modul: Einführung in JavaScript-Objekte.

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

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

let myString = "Hello";

Selbst wenn der in Anführungszeichen eingeschlossene Wert nur Ziffern sind, ist es immer noch 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 oben genannten Zeilen nacheinander in Ihre Konsole einzugeben und sehen Sie, was die Ergebnisse sind. Sie werden bemerken, dass wir einen speziellen Operator namens typeof verwenden — dieser gibt den Datentyp der Variable zurück, die Sie nach ihm eingeben. Das erste Mal, dass es aufgerufen wird, sollte es string zurückgeben, da zu diesem Zeitpunkt die Variable myNumber einen String, '500', enthält. Schauen Sie, was es das zweite Mal zurückgibt, wenn Sie es aufrufen.

Neben Variablen können Sie 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 deklarieren, ohne sie zu initialisieren:

let count;

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

const count;

Ebenso können Sie mit let eine Variable initialisieren und ihr dann einen neuen Wert zuweisen (dies wird auch Neuzuweisung der Variable genannt):

let count = 1;
count = 2;

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

const count = 1;
count = 2;

Beachten Sie, dass obwohl eine Konstante in JavaScript immer denselben Wert benennen muss, können Sie den Inhalt des Wertes, den sie benennt, ändern. Dies ist keine sinnvolle Unterscheidung 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 mit const deklarierten Objekts aktualisieren, hinzufügen oder entfernen, weil, auch wenn 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 bevorzugen, const anstelle von let zu verwenden? Tatsächlich ist const sehr nützlich. Wenn Sie const verwenden, um einen Wert zu benennen, teilt es jedem, der Ihren Code ansieht, mit, dass dieser Name nie einem anderen Wert zugewiesen wird. Jedes Mal, wenn sie diesen Namen sehen, werden sie wissen, worauf er sich bezieht.

In diesem Kurs übernehmen wir das folgende Prinzip darüber, wann man let und wann const verwenden sollte:

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

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

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

Bis jetzt sollten Sie eine angemessene Menge über JavaScript-Variablen und wie man sie erstellt wissen. Im nächsten Artikel werden wir uns ausführlicher mit Zahlen beschäftigen und untersuchen, wie man grundlegende Mathematik in JavaScript durchführt.

• Zurück
• Übersicht: JavaScript erste Schritte
• Weiter