Variablen und Datentypen in JavaScript kennenlernen

HTML gibt einer Seite ihre Struktur, CSS steuert ihr Aussehen und JavaScript ergänzt Verhalten. Die JavaScript-Engine eines Browsers führt die Anweisungen in einem Skript aus. Sofern keine Entscheidung den Ausführungsweg ändert, laufen diese Anweisungen von oben nach unten.

Code in die Seite oder in eine separate Datei schreiben

Ein Inline-Skript enthält JavaScript zwischen einem öffnenden und einem schließenden Tag:

<script>
  console.log("Hello from the page");
</script>

Bei einem externen Skript steht JavaScript in einer separaten .js-Datei. Dieses HTML lädt sie:

<script src="js/app.js"></script>

Die externe Datei enthält console.log("Hello from the page"); ohne <script>-Tags. Die Trennung der Dateien hält das HTML lesbar, ermöglicht mehreren Seiten die gemeinsame Nutzung von Code und erlaubt dem Browser, das Skript im Cache zu speichern. Ist src vorhanden, wird Code innerhalb desselben Elements ignoriert. Verwende pro Element eine der beiden Möglichkeiten und schreibe immer das schließende </script>-Tag: Ein selbstschließendes <script ... /> schließt das Element in HTML nicht.

Wähle den Ausführungszeitpunkt

Ein klassisches Skript ohne Ladeattribut unterbricht das Parsen des HTML, während der Browser es lädt und ausführt. In <head> wird es ausgeführt, bevor der spätere Inhalt des body aufgebaut wurde. Platzierst du es direkt vor </body>, steht der Seiteninhalt davor.

Für ein externes klassisches Skript in <head> ist defer ein nützlicher Standard:

<script src="js/app.js" defer></script>

Der Browser lädt das Skript herunter, während er das HTML weiter parst. Er führt es aus, nachdem das Parsen abgeschlossen ist. Mehrere verzögert ausgeführte Skripte laufen in ihrer HTML-Reihenfolge, sodass ein zweites Skript Werte nutzen kann, die das erste gesetzt hat.

Verwende async für unabhängigen Code, der weder davon abhängt, dass die Seite bereit ist, noch von einem anderen Skript. Bei einem klassischen Inline-Skript hat defer keine Wirkung.

Lade ein Modul

<script type="module" src="js/main.js"></script>

Ein Modul wird standardmäßig verzögert und im strikten Modus ausgeführt. Es kann über import und export Code austauschen. Um Module in Chrome oder Firefox zu laden, stelle das Projekt über einen lokalen Entwicklungsserver bereit, etwa über die Funktion live-server eines Editors. Wird die Seite unter einer file://-Adresse geöffnet, gelten Einschränkungen beim Laden von Modulen.

Prüfe die Verbindung

Angenommen, index.html liegt neben einem Ordner js, der greet.js enthält. Schreibe console.log("Page ready"); in dieses Skript und <script src="js/greet.js" defer></script> in den head des HTML. Öffne die Seite und dann ihre Konsole: Die Meldung lautet „Page ready“.

Der relative Pfad beginnt beim Ordner der HTML-Datei. Bei dieser Anordnung zeigt src="greet.js" auf die falsche Stelle. Eine Meldung über eine fehlende Datei bedeutet, dass unter dieser Adresse kein Skript ausgeführt werden kann. Hast du die HTML-Tags in die JavaScript-Datei kopiert, meldet die Engine stattdessen einen Syntaxfehler beim Markup.

Die Browserkonsole zeigt Meldungen, Fehler und die Ergebnisse von Code, den du eingibst. Öffne die Konsole für die Seite, die du testest. Verwende in Chrome oder Edge Ctrl+Shift+J unter Windows/Linux oder Cmd+Option+J auf dem Mac. In Firefox verwendest du Ctrl+Shift+K oder Cmd+Option+K. F12 öffnet in Chrome und Edge die Entwicklerwerkzeuge insgesamt.

Anweisungen und Ausdrücke

Ein Ausdruck erzeugt einen Wert: 4 + 5 erzeugt 9. Eine Anweisung gibt eine Instruktion, etwa diesen Wert zu speichern oder auszugeben:

let total = 4 + 5;
console.log("Total:", total);

Die erste Zeile wird vor der zweiten ausgeführt, die „Total: 9“ ausgibt. Ein Semikolon beendet eine Anweisung. JavaScript kann viele ausgelassene Semikolons einfügen, aber Zeilenumbrüche funktionieren nicht immer als Trennzeichen. Beende Anweisungen mit Semikolons, um die beabsichtigte Struktur deutlich zu machen.

Gib 2 + 3 in die Konsole ein und drücke die Eingabetaste, um 5 zu sehen. Verwende Shift+Enter für eine neue Zeile, ohne die Eingabe auszuführen. Wenn du let x = 5; eingibst, zeigt die Konsole möglicherweise undefined als Ergebnis dieser Anweisung an. Das bedeutet nicht, dass x den Wert undefined enthält: Gibst du danach x ein, erscheint 5. Ebenso gibt ein Aufruf von console.log() seine Meldung aus und liefert selbst undefined zurück.

Namen und Kommentare

JavaScript unterscheidet Groß- und Kleinschreibung. console.log("Hi"); funktioniert, aber Console.log("Hi"); verweist auf einen anderen Namen und löst einen ReferenceError aus. console.Log("Hi"); findet console, scheitert aber mit einem TypeError, weil es keine aufrufbare Methode Log gibt.

Kommentare sind für Leser bestimmt. Die Engine überspringt sie:

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Setzt du // vor eine Anweisung, schaltest du diese Zeile vorübergehend aus. Ein nützlicher Kommentar erklärt einen Grund, den der Code allein nicht deutlich macht.

Meldungen, Warnungen und Experimente

console.log("Total:", 9); gibt seine Argumente durch Leerzeichen getrennt aus. console.warn() kennzeichnet eine Warnung; console.error() kennzeichnet eine Fehlermeldung. Eine Ausgabe mit console.error() löst selbst keine Ausnahme aus. console.clear() leert die Anzeige.

Konsoleneingaben sind Experimente, keine gespeicherten Änderungen. Beim Neuladen werden die gespeicherten Seitenskripte erneut ausgeführt. Du kannst Variablen auf oberster Ebene klassischer Skripte in der Konsole untersuchen; Variablen auf oberster Ebene eines Moduls bleiben innerhalb dieses Moduls.

Einfache Dialoge und strikter Modus

alert("Saved!"); zeigt eine Meldung. confirm("Continue?") gibt für „OK“ true und für „Abbrechen“ false zurück. prompt("Quantity?", "1") gibt die eingegebene Zeichenkette zurück oder null bei „Abbrechen“. Die Eingabe von 12 ergibt "12", nicht 12. Diese Dialoge unterbrechen die Interaktion, solange sie geöffnet sind.

Setze "use strict"; an den Anfang eines klassischen Skripts, damit bestimmte Fehler gemeldet werden. Beispielsweise löst totl = 5; ohne Deklaration im strikten Modus einen ReferenceError aus; in einem klassischen Skript ohne strikten Modus kann dadurch versehentlich eine globale Variable entstehen. Ein Modul verwendet bereits den strikten Modus. Prüfe die Schreibweise und deklariere Namen, bevor du ihnen Werte zuweist.

Eine Variable ist ein Name, der auf einen Wert verweist. Du kannst den Namen zuerst deklarieren und ihm später einen Wert zuweisen oder beides in einer Anweisung tun. Der Zuweisungsoperator = speichert den Wert auf der rechten Seite unter dem Namen auf der linken Seite.

Wähle let oder const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; deklariert die Variable. Bis eine Zuweisung ihr einen anderen Wert gibt, enthält sie undefined. Die nächste Zuweisung speichert 10. In score = score + 2; liest JavaScript den alten Punktestand, addiert 2 und speichert dann 12. Das ist eine Aktualisierungsanweisung und muss daher als mathematische Gleichung keinen Sinn ergeben. Die Neuzuweisung verwendet den vorhandenen Namen, ohne let erneut zu schreiben.

Eine const-Deklaration muss ihren Anfangswert enthalten:

const BOILING_POINT_C = 100;

Die Deklaration const rate; ist ein Syntaxfehler, weil ihr ein Initialisierer fehlt. Der Versuch, BOILING_POINT_C später einen neuen Wert zuzuweisen, löst einen TypeError aus.

Verwende standardmäßig const. Wähle let für eine laufende Summe, einen Zähler oder ein Ergebnis, das spätere Anweisungen zuweisen. Auch ein aus anderen Werten berechneter Wert kann const verwenden, wenn das Programm diesem Namen nie einen neuen Wert zuweist.

Gib dem Namen eine klare Bedeutung

Namen dürfen Buchstaben, Ziffern, _ und $ enthalten; sie dürfen nicht mit einer Ziffer beginnen. place1 ist zulässig, 1stPlace jedoch nicht. Leerzeichen sind verboten und ein Bindestrich wird als Subtraktion gelesen, sodass total-price nicht eine einzelne Variable bezeichnet. Reservierte Wörter wie if, return und class können keine Variablennamen sein.

Verwende camelCase für gewöhnliche Namen: itemCount, firstName oder priceWithTax. Namen für boolesche Werte wie isLoggedIn und hasDiscount beschreiben einen Ja-Nein-Wert. Nimm Einheiten in den Namen auf, wenn sie Verwechslungen verhindern: distanceKm und durationMin. Feste Werte, die vor der Ausführung des Programms bekannt sind, verwenden häufig UPPER_SNAKE_CASE, etwa MAX_LOGIN_ATTEMPTS. Die Groß- und Kleinschreibung ist wichtig: total und Total sind verschiedene Namen.

Gehe eine laufende Summe durch

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

Die Summe beginnt bei 0, wird zu 12.5 und dann zu 20. Der Faktor 1 + TAX_RATE ist 1.2, sodass der Endbetrag 24 beträgt. Nur total benötigt eine Neuzuweisung. Der Steuersatz und der berechnete Endbetrag verwenden const.

Schreibst du let total = 7.5; ein zweites Mal im selben Gültigkeitsbereich, versuchst du, eine zweite Variable zu deklarieren, statt die erste zu aktualisieren. Verwende total = 7.5;, um den Wert zu ersetzen.

Erkenne ältere Deklarationen

Älterer Code verwendet häufig var. Es funktioniert weiterhin, aber seine Variablen gehören zu einer Funktion oder einem Skript statt zu einem gewöhnlichen verschachtelten Block. Es erlaubt wiederholte Deklarationen und Lesezugriffe vor der Deklaration ergeben undefined. Die modernen Schlüsselwörter let und const erkennen diese Fehler. Behalte ihre Regeln im Kopf, wenn du eine ältere Anleitung liest, die var verwendet.

Ein Block ist der Code zwischen geschweiften Klammern, etwa der Rumpf eines if. Der Gültigkeitsbereich einer Variablen ist der Bereich, in dem ihr Name auf diese Variable verweist. Sowohl let als auch const haben einen Blockgültigkeitsbereich, der alle im deklarierenden Block verschachtelten Blöcke einschließt.

Halte ein Ergebnis dort verfügbar, wo es gebraucht wird

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label wird außerhalb der Ausführungszweige deklariert, sodass die letzte Zeile den Wert lesen kann. Jeder Zweig weist der vorhandenen Variablen einen Wert zu. Deklarierst du stattdessen const label = "hot"; innerhalb des ersten Zweigs, kann diese Variable nach dem Block nicht gelesen werden. Befindet sich kein anderes label im Gültigkeitsbereich, löst der letzte Lesezugriff einen ReferenceError aus.

Eine Deklaration auf oberster Ebene eines klassischen Skripts hat globalen Gültigkeitsbereich: Späterer Code in diesem Skript und die anderen klassischen Skripte der Seite können sie verwenden. In einem Modul gehören Variablen auf oberster Ebene zu diesem Modul. Belasse eine Variable im kleinsten Gültigkeitsbereich, der sie benötigt, um Namenskonflikte zu verringern.

Unterscheide Verdeckung von Neuzuweisung

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

Die innere Deklaration erzeugt eine eigene Variable. Das ist Verdeckung: Innerhalb des inneren Blocks verweist x auf die innere Variable. Die äußere Variable bleibt 1. Würdest du das innere let entfernen, würdest du stattdessen der äußeren Variablen 2 zuweisen. Unterschiedliche Namen machen diesen Unterschied leichter lesbar.

Lesen vor der Initialisierung

Eine Bindung mit Blockgültigkeitsbereich umfasst ihren ganzen Block, aber vor der Initialisierung durch die Deklaration kann nicht auf sie zugegriffen werden. Der Bereich vor der Initialisierung ist die zeitliche Totzone:

console.log(price);
let price = 5;

Das löst ReferenceError: Cannot access 'price' before initialization aus. Der Name existiert im Gültigkeitsbereich, ist aber noch nicht bereit. Dagegen bedeutet price is not defined, dass dort keine Bindung mit diesem Namen gefunden werden kann. Eine innere Deklaration verdeckt einen äußeren Namen auch schon vor der inneren Deklarationszeile; der äußere Wert kann die zeitliche Totzone der inneren Variablen nicht umgehen.

Ordne jedem Fehler eine Lösung zu

Syntaxfehler verhindern, dass das Skript startet. Ein Laufzeitfehler stoppt die aktuelle Ausführung, sobald sie die fehlerhafte Anweisung erreicht. Chrome erlaubt der Einfachheit halber eine weitere let-Deklaration in einer separaten Konsoleneingabe; dadurch werden doppelte Deklarationen in einem Skript nicht zulässig.

Const legt die Referenz fest

Primitive Werte wie Zahlen und Zeichenketten können nicht an Ort und Stelle verändert werden. Der Inhalt eines Objekts kann sich auch dann ändern, wenn sein Name const verwendet:

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

Der Name verweist weiterhin auf dasselbe Objekt. Die Zuweisung settings = {}; versucht, diese Referenz zu ersetzen, und löst einen TypeError aus.

Die Werte 7, "7" und true haben unterschiedliche Typen. Sie können an ähnlichen Stellen auf einer Seite erscheinen, aber JavaScript wendet auf jeden andere Regeln an. Ein Typ beschreibt den aktuell enthaltenen Wert und ist keine dauerhafte Einschränkung seiner Variablen.

Beginne mit den drei wichtigsten Typen

Ein number steht für ganze und dezimale Zahlenwerte: 42, -7 und 3.75 haben alle denselben Typ. Auch die wissenschaftliche Schreibweise ist numerisch: 1e3 bedeutet 1000. Ein string enthält Text in Anführungszeichen, sodass "42" Text ist, obwohl seine Zeichen Ziffern sind. Ein boolean ist entweder true oder false, ohne Anführungszeichen. Vergleiche erzeugen boolesche Werte, die ein Programm für Entscheidungen nutzen kann.

Untersuche einen Wert mit typeof. Der Operator gibt eine Zeichenkette mit dem Typnamen zurück:

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

Die Kommentare zeigen die ausgegebenen Wörter; die Ergebnisse selbst sind Zeichenketten wie "number".

Erkenne fehlende Werte

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined bedeutet häufig, dass JavaScript kein Wert übergeben wurde, wie bei einem nicht initialisierten let. null wird üblicherweise bewusst zugewiesen und bedeutet „leer“ oder „kein Wert“. Prüfe mit middleName === null auf einen bewusst leeren Wert.

Verwende typeof value === "object" nicht als Prüfung auf null. typeof null ergibt aufgrund eines historisch bedingten Sprachverhaltens "object", obwohl null ein primitiver Wert ist.

Kenne die vollständige Liste der Typen

JavaScript hat sieben primitive Typen: number, string, boolean, undefined, null, bigint und symbol. Der achte Typ ist object und wird für strukturierte Werte verwendet. Funktionen sind Objekte, die aufgerufen werden können, obwohl typeof für sie "function" meldet.

Ein bigint ist eine ganze Zahl mit einem abschließenden n, etwa 9007199254740993n. Damit lassen sich große ganze Zahlen exakt darstellen. Mische bei Rechnungen keinen bigint mit einem number: 1n + 2 löst einen TypeError aus. Ein symbol ist ein eindeutiger Bezeichner; typeof Symbol("id") ergibt "symbol". typeof 42n ergibt "bigint".

NaN ist ein weiteres spezielles Ergebnis, das du erkennen solltest: Trotz seines Namens „keine Zahl“ ergibt typeof NaN den Wert "number". Es ist ein Zahlenwert, der ein ungültiges numerisches Ergebnis markiert. Sein Name allein bezeichnet keinen eigenen Typ.

Verfolge eine Variable, die sich ändert

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

Das ist dynamische Typisierung. Eine Neuzuweisung kann eine Zahl durch eine Zeichenkette ersetzen. Wegen dieser Flexibilität ist es bei einem überraschenden Ergebnis nützlich, sowohl den Wert als auch seinen Typ auszugeben:

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

Die erste Addition verbindet Text; die zweite addiert Zahlen. Primitive Werte können nicht an Ort und Stelle verändert werden: Eine Operation erzeugt einen neuen Wert. Wird eine Variable aktualisiert, ändert sich, auf welchen Wert sie verweist.

JavaScript verwendet einen gewöhnlichen Zahlentyp für ganze und dezimale Werte. Bei der Division bleibt ein Nachkommateil erhalten: 10 / 4 ergibt 2.5. Sowohl der gewählte Operator als auch die Reihenfolge seiner Ausführung beeinflussen das Ergebnis.

Rechne in der beabsichtigten Reihenfolge

Potenzen werden vor Multiplikation, Division und Divisionsrest berechnet; diese wiederum vor Addition und Subtraktion. Operatoren gleicher Stufe werden von links nach rechts ausgeführt, Potenzen jedoch von rechts nach links zugeordnet: 2 ** 3 ** 2 ist 2 ** 9, also 512. Klammern ändern diese Reihenfolge: 2 + 3 * 4 ergibt 14, aber (2 + 3) * 4 ergibt 20.

Für den Mittelwert von 72, 85 und 90 addierst du die ganze Gruppe, bevor du dividierst:

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Ohne Klammern dividiert 72 + 85 + 90 / 3 nur die 90 und ergibt 187.

Trenne ganze Einheiten und Reste

Math.trunc(7 / 2) entfernt den Nachkommateil und ergibt 3. Bei einer positiven Länge von 245 cm ergibt Math.floor(245 / 100) den Wert 2 Meter und 245 % 100 die verbleibenden 45 Zentimeter. Ebenso ergeben 3.725 Sekunden mit Math.floor(3725 / 3600) den Wert 1 Stunde, mit Math.floor((3725 % 3600) / 60) den Wert 2 Minuten und mit 3725 % 60 den Wert 5 Sekunden. Für eine ganze Zahl prüft n % 2 === 0, ob sie gerade ist. Ein Divisionsrest hat das Vorzeichen des linken Operanden: -7 % 3 ergibt -1.

Aktualisiere eine Zahl

x += 5 bedeutet x = x + 5. Die Operatoren -=, *=, /=, %= und **= folgen demselben Muster. Ausgehend von 10 ergeben die Aktualisierungen += 5, *= 2, -= 4 und dann /= 2 die Werte 15, 30, 26 und schließlich 13.

++ erhöht um eins und -- verringert um eins. Bei let a = 5; let b = a++; wird a zu 6, aber b erhält 5: Das Postfix-Inkrement gibt den alten Wert zurück. Bei let b = ++a; werden beide zu 6, wenn du wieder mit a = 5 beginnst. Steht eine Aktualisierung in einer eigenen Zeile, musst du dich nicht auf das Ergebnis dieses Ausdrucks verlassen.

Runde und formatiere gezielt

Math.round(13.456 * 100) / 100 ergibt die Zahl 13.46. Dagegen ergibt (3.14159).toFixed(2) die Zeichenkette "3.14" und (19.999).toFixed(2) die Zeichenkette "20.00". Formatiere am Ende: Wird eine Zahl zu einer formatierten Zeichenkette addiert, wird Text verbunden.

Erkenne die Grenzen der Zahlendarstellung

Zahlen verwenden eine binäre 64-Bit-Gleitkommadarstellung. Die meisten Dezimalbrüche werden nur näherungsweise dargestellt, daher ergibt 0.1 + 0.2 den Wert 0.30000000000000004. Runde für die Anzeige, vergleiche mit einer geeigneten kleinen Toleranz oder rechne in ganzen Einheiten wie Cent oder Millimetern.

Einige ungültige Operationen geben einen Wert zurück, statt einen Fehler auszulösen: 5 / 0 ergibt Infinity, -5 / 0 ergibt -Infinity und 0 / 0 oder "abc" * 2 ergibt NaN. Die meisten Rechnungen mit NaN ergeben weiterhin NaN; NaN ** 0 ist eine Ausnahme und ergibt 1.

Jede ganze Zahl bis einschließlich Number.MAX_SAFE_INTEGER, also 9007199254740991, ist exakt. Darüber hinaus lassen sich nur manche ganzen Zahlen darstellen: 9007199254740992 + 1 ergibt weiterhin 9007199254740992. Bigints unterstützen größere exakte ganze Zahlen.

Eine Zeichenkette speichert Text zwischen zusammenpassenden einfachen Anführungszeichen, doppelten Anführungszeichen oder Backticks. Bei einfachem Text können alle drei denselben Wert darstellen. Die Anführungszeichen markieren Anfang und Ende des Textes; sie sind kein Teil des Werts.

Anführungszeichen, Escape-Sequenzen und Verknüpfung

Verwende die andere Art von Anführungszeichen, um ein Anführungszeichen einzufügen: "It's late". Eine Maskierung verwendet einen umgekehrten Schrägstrich, wie in 'It\'s late'. \n steht für einen Zeilenumbruch, \t für einen Tabulator und \\ für einen umgekehrten Schrägstrich. Die Escape-Sequenz \n belegt eine Position in der Zeichenkette, obwohl sie mit zwei Zeichen geschrieben wird. "It's".length ergibt 4; "Line 1\nLine 2".length ergibt 13.

Der Operator + verknüpft Zeichenketten. "Hello" + " " + "world" ergibt "Hello world"; es wird kein Leerzeichen eingefügt, sofern keines der Teile eines enthält. Bei let msg = "Hi"; msg += " there"; ist der aktualisierte Wert "Hi there".

Positionen beginnen bei null

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

Der letzte Index ist length - 1. Ein negatives Argument für at() zählt vom Ende aus. length ist eine Eigenschaft, keine Methode: language.length() löst einen TypeError aus. Genauer gesagt verwenden Zeichenkettenpositionen und length UTF-16-Codeeinheiten, also die Einheiten, mit denen JavaScript Text speichert. Diese gewöhnlichen englischen Buchstaben belegen jeweils eine Einheit; manche Symbole und Emojis belegen mehr.

Speichere die neue Zeichenkette

Zeichenketten sind unveränderlich: Ihr Inhalt kann nicht an Ort und Stelle bearbeitet werden. Die Zuweisung word[0] = "b" erzeugt nicht "bat", wenn word den Wert "cat" hat; im strikten Modus löst sie einen Fehler aus. Methoden, die Text umwandeln, geben eine neue Zeichenkette zurück:

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

Der Aufruf der Methode allein reicht nicht aus, um ihr Ergebnis zu behalten. Schreibst du name.toUpperCase ohne Klammern, wird sie überhaupt nicht aufgerufen.

Wähle die passende Textoperation

toLowerCase() und toUpperCase() ändern die Groß- beziehungsweise Kleinschreibung; trim() entfernt Leerraumzeichen an beiden Enden. Bei der Methodenverkettung wird jede Methode auf das vorherige Ergebnis angewendet: " Ana@Example.com ".trim().toLowerCase() ergibt "ana@example.com".

includes(), startsWith() und endsWith() geben boolesche Werte zurück. Zum Beispiel ergibt "report.pdf".endsWith(".pdf") den Wert true. indexOf() ergibt die Position des ersten Treffers oder -1: "JavaScript".indexOf("S") ergibt 4, die Suche nach "s" dagegen -1. Suchvorgänge unterscheiden Groß- und Kleinschreibung. "JavaScript".includes("script") ergibt false; wandle die Zeichenkette vor dieser Suche in Kleinbuchstaben um, um true zu erhalten.

slice(start, end) gibt Text vom Startindex bis ausschließlich zum Endindex zurück. "JavaScript".slice(0, 4) ergibt "Java"; .slice(4) und .slice(-6) ergeben "Script".

"a-b-c".replace("-", "+") ergibt "a+b-c"; replaceAll() mit denselben Argumenten ergibt "a+b+c". "ab".repeat(3) ergibt "ababab" und "5".padStart(3, "0") ergibt "005". Bei const city = "paris"; erzeugt city[0].toUpperCase() + city.slice(1) den Wert "Paris", indem ein großer Anfangsbuchstabe mit dem unveränderten Rest verbunden wird.

Ein Template-Literal setzt Text zwischen Backticks. Darin markiert ${...} einen Platzhalter, dessen Ausdruck ausgewertet und in den Text eingefügt wird. Das ist nützlich, wenn eine Meldung mehrere Werte mit Satzzeichen, Leerzeichen oder Berechnungen verbindet.

Lies einen Platzhalter als Ausdruck

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

Die Engine liest name, erhält "Ana" und setzt es zwischen die Begrüßung und das Ausrufezeichen. Die Backticks und Platzhalterzeichen beschreiben die Zeichenkette; sie erscheinen nicht in der fertigen Meldung.

Mit Konkatenation lautet dieselbe Idee "Hello, " + name + "!". Eine längere Meldung wie "Hello, " + name + "! You have " + count + " new messages." benötigt mehrere einzeln in Anführungszeichen gesetzte Teile. Ein Template hält den ganzen Satz zusammen: `Hello, ${name}! You have ${count} new messages.`. Leerzeichen musst du weiterhin dort eingeben, wo du sie haben möchtest.

Berechne und formatiere im Platzhalter

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

Die Ausgabe lautet „Ana bought 3 tickets for 13.50 in total.“ Zuerst erzeugt tickets * price den Wert 13.5. Die Klammern machen das ganze Produkt zum Empfänger von .toFixed(2), das "13.50" erzeugt. Der Platzhalter fügt diesen Text in den Satz ein. Die numerischen Variablen price und tickets bleiben unverändert.

Ohne Formatierung zeigt ein Platzhalter die gewöhnliche Textform der Zahl. `${0.1 + 0.2}` ergibt "0.30000000000000004". Die Formatierung darin, `${(0.1 + 0.2).toFixed(2)}`, ergibt "0.30".

Ausdrücke passen hinein, Anweisungen nicht

Ein Platzhalter kann einen Wert, eine Berechnung, einen Methodenaufruf oder einen Ausdruck enthalten, der einen Wert auswählt. Bei birthYear = 1990 ergibt `You turn ${2026 - birthYear} this year.` den Text „You turn 36 this year.“

Der bedingte Operator kann Text im Singular oder Plural auswählen:

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

Der Vergleich wählt eine Zeichenkette zum Einfügen aus. Eine if-Anweisung kann diesen Ausdruck innerhalb von ${...} nicht ersetzen, weil ein Platzhalter einen Ausdruck benötigt, der einen Wert erzeugt.

Beachte die genaue Zeichensetzung

Nur Backticks aktivieren Platzhalter. Bei const n = 5; ist "n + 1 = ${n + 1}" gewöhnlicher Text und lässt ${n + 1} unverändert. Das Template `n + 1 = ${n + 1}` ergibt „n + 1 = 6“. Ein Backtick ist ein anderes Zeichen als ein einfaches Anführungszeichen.

Innerhalb von Backticks eingegebene Zeilenumbrüche werden zu Zeilenumbrüchen in der resultierenden Zeichenkette. Auch Leerzeichen zur Einrückung werden Teil davon. Fehlende Werte werden als Text eingefügt: `${undefined}` ergibt "undefined", während `${null}` den Wert "null" ergibt. Enthält eine Meldung unerwartet „undefined“, untersuche die eingefügte Variable und die Stelle, an der ihr ein Wert zugewiesen wurde.

Explizite Typumwandlung bedeutet, dass du die Umwandlung selbst schreibst und dazu etwa Number(), String() oder Boolean() verwendest. Sie macht den beabsichtigten Typ an der Stelle sichtbar, an der ein Wert in die Berechnung eingeht.

Wähle eine numerische Umwandlung

Number() liest den gesamten Text als Zahl und ignoriert umgebende Leerraumzeichen. Number("1.5") ergibt 1.5 und Number(" 12 ") ergibt 12. Number("12px") ergibt NaN, weil nicht die gesamte Zeichenkette numerisch ist. Code verwendet einen Dezimalpunkt: Auch Number("1,5") ergibt NaN.

parseInt() und parseFloat() lesen einen numerischen Anfang und stoppen, wenn der Text nicht mehr passt. parseInt("12px", 10) ergibt 12; parseFloat("3.75 kg") ergibt 3.75. Der Parser für ganze Zahlen stoppt am Dezimalpunkt, sodass parseInt("0.5", 10) den Wert 0 ergibt. parseInt("abc", 10) ergibt NaN, weil kein numerischer Anfang vorhanden ist. Übergib parseInt() eine Zahlenbasis: parseInt("08", 10) ergibt 8, während parseInt("ff", 16) hexadezimal liest und 255 ergibt.

Auch das unäre Plus wandelt gewöhnlichen numerischen Text um: +"42" ergibt 42.

Unterscheide fehlende Eingaben von null

Ein prompt-Dialog gibt eine Zeichenkette oder null zurück. „Abbrechen“ ergibt null, und das Bestätigen eines leeren Feldes ergibt "". Beide werden durch Number() zu null, ebenso Text, der nur aus Leerraumzeichen besteht. Prüfe vor der Umwandlung, ob eine Eingabe fehlt:

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

Das || überspringt den Aufruf von trim(), wenn input den Wert null hat. Die Eingabe „12“ erreicht die numerische Berechnung und gibt 13 aus. Die Eingabe „12px“ führt zur Meldung über eine ungültige Zahl. Die Eingabe „0“ ist eine gültige Antwort und gibt 1 aus.

Verwende Number.isNaN(value), um auf einen tatsächlichen NaN-Wert zu prüfen. value === NaN ist nie wahr. Das ältere globale isNaN() wandelt sein Argument zuerst um: isNaN("hello") ergibt true, aber Number.isNaN("hello") ergibt false, weil dieser Wert weiterhin eine Zeichenkette ist.

Wandle in Text oder einen booleschen Wert um

String(42) ergibt "42", String(true) ergibt "true" und String(null) ergibt "null". Auch (42).toString() erzeugt "42", aber der Aufruf von .toString() auf null oder undefined löst einen TypeError aus. String() verarbeitet beide.

Boolean() gibt für false, 0, -0, 0n, "", null, undefined und NaN den Wert false zurück; dies sind Falsy-Werte. Browser haben außerdem das ältere Falsy-Objekt document.all. Andere Werte sind Truthy-Werte. Insbesondere sind "0", "false" und eine Zeichenkette mit einem einzelnen Leerzeichen allesamt Truthy-Werte. !!value führt dieselbe Umwandlung in einen booleschen Wert durch.

Bei den beiden Antworten "12" und "30" aus einem prompt-Dialog erzeugt a + b den Wert "1230". Wandle zuerst beide Eingaben um: Number(a) + Number(b) ergibt 42.

Implizite Typumwandlung ist die automatische Umwandlung eines Typs innerhalb einer Operation. Ihre Regeln hängen vom Operator ab. Eine Berechnung, die zu funktionieren scheint, kann dennoch einen Textwert enthalten, der einen späteren Schritt scheitern lässt.

Verfolge die Additionsregel

Bei gewöhnlichen Operanden der Typen number, string, boolean, null und undefined verbindet + Text, wenn einer der Operanden eine Zeichenkette ist. Andernfalls führt der Operator eine numerische Umwandlung und Addition durch. "5" + 2 ergibt "52" und 2 + "5" ergibt "25".

Werte eine Kette von links nach rechts aus:

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

Im ersten Ausdruck ergeben zwei addierte Zahlen 3; beim anschließenden Addieren von "3" werden die beiden Textformen zu "33" verbunden. Im zweiten Ausdruck erzeugt bereits die erste Operation "31", sodass die letzte Operation eine weitere Ziffer anhängt. Klammern können ändern, welche Operation zuerst ausgeführt wird: "3" + (1 + 2) ergibt "33".

Andere arithmetische Operatoren erwarten Zahlen

Subtraktion, Multiplikation, Division, Divisionsrest und Potenzen wandeln numerische Zeichenketten in Zahlen um. "5" - 2 ergibt 3, "5" * "2" ergibt 10 und "10" / "4" ergibt 2.5. Eine Zeichenkette wie "abc" kann nicht zu einer gültigen Zahl werden, sodass "abc" * 2 den Wert NaN ergibt. Für Bigints gelten eigene Rechenregeln; werden sie mit einem number gemischt, wird ein TypeError ausgelöst.

Dieser Unterschied kann einen Fehler verbergen:

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

Die Multiplikation wandelt den Preis um, ändert aber die Variable nicht. Die spätere Addition trifft weiterhin auf eine Zeichenkette. Wandle Eingaben einmal dort um, wo sie ankommen, und arbeite dann mit dem numerischen Ergebnis weiter.

Verfolge kleine automatische Umwandlungen

Bei numerischen Rechnungen wird true zu 1, false zu 0 und null zu 0. So ergibt true + true den Wert 2, während null + 1 den Wert 1 ergibt. undefined wird zu NaN, sodass undefined + 1 den Wert NaN ergibt. Unäres Plus und Minus wandeln numerische Zeichenketten um: +"42" ergibt 42, -"5" ergibt -5 und +"" ergibt 0.

++ verlangt immer eine numerische Aktualisierung, aber += folgt der Additionsregel:

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Bedingungen wenden eine andere Umwandlung an

Eine if-Bedingung beurteilt einen Wert als Truthy- oder Falsy-Wert. "0" ist eine nicht leere Zeichenkette und erfüllt die Bedingung; die Zahl 0 ist ein Falsy-Wert und der Block wird übersprungen. Ist null eine gültige Menge, kann eine Prüfung auf Truthy-Werte allein null nicht von einer fehlenden Antwort unterscheiden. Bei einem Wert, der durch eine Zahl oder null dargestellt wird, prüft quantity !== null ausdrücklich auf das Fehlen eines Werts.

Auch bei Gleichheit gibt es zwei Verhaltensweisen: "7" == 7 ergibt nach impliziter Typumwandlung true, aber "7" === 7 ergibt false, weil die strikte Gleichheit den Typunterschied beibehält. Verwende für gewöhnliche Vergleiche die strikte Gleichheit.

Ist ein Ergebnis verbundener Text oder NaN, gib jede Eingabe neben typeof input aus. Suche den ersten falschen Typ und korrigiere die Umwandlung dort. Würdest du "205" am Ende in eine Zahl umwandeln, ergäbe das 205, nicht die beabsichtigte Summe 25.

Ein Vergleich erzeugt einen booleschen Wert. 7 > 3 ergibt true, 5 >= 5 schließt Gleichheit ein und ergibt true, und 4 < 2 ergibt false. Speichere ein Ergebnis wie in const isAdult = age >= 18; oder verwende es direkt in einer Bedingung.

Bevorzuge strikte Gleichheit

=== vergleicht, ohne Typen umzuwandeln. Zwei gewöhnliche primitive Werte müssen denselben Typ und übereinstimmende Werte haben: 7 === 7 ergibt true, während "7" === 7 den Wert false ergibt. !== kehrt die strikte Gleichheit um, sodass "7" !== 7 den Wert true ergibt.

Lose Gleichheit, ==, kann Operanden umwandeln. "7" == 7, 0 == "" und "0" == false ergeben alle true. Ihre besondere Regel für fehlende Werte macht null == undefined wahr, aber null == 0 falsch. != kehrt die lose Gleichheit um. Bevorzuge === und !==; mit einem gezielten value == null kannst du sowohl auf null als auch auf undefined prüfen.

Unterscheide Textreihenfolge von Zahlenreihenfolge

Zwei Zeichenketten werden anhand ihrer UTF-16-Codewerte von links nach rechts verglichen. Für gewöhnliche englische Wörter in gleicher Groß- oder Kleinschreibung ergibt "apple" < "banana" den Wert true. Ein kürzerer übereinstimmender Anfang steht zuerst: "apple" < "apples" ergibt true. Bei den englischen Buchstaben ohne Akzent stehen Großbuchstaben vor Kleinbuchstaben, sodass "Zebra" < "apple" den Wert true ergibt. Wandelst du beide Zeichenketten mit toLowerCase() um, entfällt dieser Unterschied bei einfachen Vergleichen englischer Buchstaben.

Auch Ziffernzeichenketten folgen der Textreihenfolge:

console.log("10" < "9"); // true
console.log("10" < 9);   // false

Im ersten Vergleich steht das Zeichen „1“ vor „9“. Im zweiten ist ein Operand numerisch, sodass der Text zur Zahl 10 wird. Wandle numerische Eingaben gezielt um, bevor du ihre Größe vergleichst. "abc" < 5 und "abc" > 5 ergeben beide false, weil die numerische Umwandlung NaN erzeugt.

Behandle fehlende und ungültige Zahlen zuerst

NaN ist sich selbst nicht gleich: Sowohl NaN === NaN als auch NaN == NaN ergeben false. Verwende Number.isNaN(), um es zu erkennen.

Ordnungsvergleiche wandeln null in null um, sodass null >= 0 den Wert true, aber null > 0 den Wert false ergibt. Für Gleichheit gilt eine andere Regel, sodass null == 0 weiterhin false ergibt. undefined wird bei Ordnungsvergleichen zu NaN, sodass undefined > 0 und undefined < 0 falsch sind; auch undefined == 0 ist falsch. Prüfe auf einen fehlenden Wert, bevor du ihn als Messwert behandelst.

Vergleiche Dezimalzahlen und Bereiche

Durch binäre Rundung ist 0.1 + 0.2 === 0.3 falsch. Für diese kleinen Werte funktioniert eine Toleranzprüfung:

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() entfernt das Vorzeichen der Differenz. Wähle eine Toleranz, die zur Größe und Genauigkeit der Werte passt, oder rechne in ganzen Einheiten wie Millimetern.

Verkette Bereichsprüfungen nicht wie in der Mathematik. Bei x = 50 ergibt 0 < x < 10 zunächst true und vergleicht diesen booleschen Wert dann als 1 < 10, was true ergibt. Ebenso wird 3 > 2 > 1 zu true > 1, also 1 > 1, was falsch ist. Schreibe beide Vergleiche vollständig: x > 0 && x < 10.

Mit logischen Operatoren kann eine Bedingung mehrere Anforderungen ausdrücken. Bei booleschen Operanden bedeutet && UND, || bedeutet ODER und ! bedeutet NICHT. Ihre Auswertungsreihenfolge ermöglicht außerdem, eine Operation abzusichern, die bei einem fehlenden Wert scheitern würde.

Drücke jede Anforderung aus

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange ist wahr, weil beide Schranken eingehalten werden. outside ist falsch, weil keine der beiden Prüfungen auf Werte außerhalb des Bereichs erfüllt ist. ODER schließt den Fall ein, dass beide Seiten wahr sind; es bedeutet nicht „eine, aber niemals beide“.

Schreibe jeden Vergleich vollständig. color === "red" || "green" prüft nicht auf beide Farben. Bei color = "blue" ist der erste Vergleich falsch, aber die nicht leere Zeichenkette "green" ist ein Truthy-Wert. Die beabsichtigte Prüfung lautet color === "red" || color === "green".

Gruppiere die gemeinte Bedingung

NICHT bindet vor UND und UND vor ODER. Daher ist true || false && false wahr, aber (true || false) && false falsch.

Angenommen, der Zugriff setzt eine Anmeldung und entweder die Rolle als Administrator oder als Eigentümer voraus. Schreibe loggedIn && (isAdmin || isOwner). Ohne Klammern kann isOwner in loggedIn && isAdmin || isOwner den ganzen Ausdruck auch bei loggedIn = false wahr machen. Die Klammern sorgen dafür, dass die Anmeldung für beide Rollen erforderlich bleibt.

Das Umkehren einer zusammengesetzten Bedingung ändert auch die Verknüpfung. !(a && b) hat denselben Wahrheitswert wie !a || !b; !(a || b) entspricht !a && !b. Für eine Temperatur außerhalb des Intervalls einschließlich seiner Grenzen wird beim Umkehren der beiden Prüfungen auf Werte innerhalb des Intervalls >= zu <, <= zu > und UND zu ODER.

Stoppe, wenn das Ergebnis feststeht

UND stoppt beim ersten Falsy-Operanden; ODER stoppt beim ersten Truthy-Operanden. Das ist Kurzschlussauswertung. Der übersprungene Operand wird nicht ausgewertet:

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

Die erste Prüfung ist falsch, sodass trim() nie auf null aufgerufen wird. Würdest du die beiden Prüfungen umkehren, würde zuerst die unsichere Operation versucht.

Diese Operatoren geben einen Operanden zurück, nicht unbedingt einen booleschen Wert. "" || "Guest" gibt "Guest" zurück; "Sam" || "Guest" gibt "Sam" zurück. "Ana" && "ok" gibt "ok" zurück und null && "x" gibt null zurück. Ein umgebendes if prüft anschließend, ob der zurückgegebene Wert ein Truthy-Wert ist.

Erhalte sinnvolle Falsy-Werte

Bei quantity = 0 ergibt quantity || 1 den Wert 1, aber quantity ?? 1 erhält 0. Bei nickname = "" ergibt nickname || "Anonymous" den Ersatzwert, während nickname ?? "Anonymous" die leere Zeichenkette erhält. Verwende ??, wenn diese Werte sinnvoll sind.

Setze Klammern, wenn du ?? mit UND oder ODER mischst: a || b ?? c ist ein Syntaxfehler, während (a || b) ?? c eine ausdrückliche Gruppierung enthält. NICHT wandelt zuerst in einen booleschen Wert um und kehrt ihn dann um: !0 ist wahr und !"0" ist falsch. Doppeltes NICHT, !!value, ergibt einen reinen booleschen Wert.

Eine if-Anweisung führt einen Block aus, wenn ihre Bedingung ein Truthy-Wert ist. Ein else wird ausgeführt, wenn diese Bedingung ein Falsy-Wert ist. Verwende geschweifte Klammern, um genau zu zeigen, welche Anweisungen zu welchem Zweig gehören.

Ordne eine Kette von Entscheidungen

Eine else if-Kette prüft von oben nach unten. Die erste erfüllte Bedingung gewinnt und alle späteren Zweige werden übersprungen:

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Der erste Vergleich ist nicht erfüllt; der zweite ist erfüllt, sodass grade zu "B" wird. Würde score >= 70 zuerst geprüft, würde sogar eine Punktzahl von 95 erfasst und "C" zugewiesen. Stelle bei überlappenden Mindestschwellen den höchsten Wert an den Anfang. Die gemeinsam genutzte Variable grade wird außerhalb der Zweige deklariert, damit späterer Code sie lesen kann.

Eine zusammengesetzte Bedingung kann eine kurze Entscheidung lesbar halten. Der Versand ist bei einem Bestellwert von mindestens 50 oder für ein Mitglied kostenlos; andernfalls kostet er 4,95:

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Zwei verschachtelte Bedingungen ohne else-Zweige lassen sich oft mit UND verbinden: if (isLoggedIn) { if (isAdmin) { ... } } führt seinen innersten Code unter denselben booleschen Bedingungen aus wie if (isLoggedIn && isAdmin) { ... }.

Vermeide Satzzeichen, die den Ausführungsweg ändern

Ohne geschweifte Klammern gehört nur die nächste Anweisung zu einem if; durch Einrückung lässt sich keine weitere Anweisung hinzufügen. Ein Semikolon unmittelbar nach der Bedingung erzeugt eine leere Anweisung: Bei if (x > 5); { ... } wird der folgende Block unabhängig von der Bedingung ausgeführt.

if (x = 5) weist 5 zu und prüft dann, ob der Wert ein Truthy-Wert ist. Es ändert x und die Bedingung ist erfüllt, weil 5 ein Truthy-Wert ist. Verwende zum Vergleichen if (x === 5).

Wähle einen Wert mit einem bedingten Ausdruck

Der bedingte oder ternäre Operator gibt einen von zwei Werten zurück:

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

Die Form lautet condition ? valueIfTrue : valueIfFalse. Verwende sie für eine kurze Auswahl innerhalb einer Zuweisung oder eines Template-Literals. Verwende if/else für Zweige aus Anweisungen. Bei tief verschachtelten bedingten Ausdrücken sind die Auswahlmöglichkeiten schwer nachzuvollziehen.

Ordne feste Auswahlmöglichkeiten mit switch zu

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch vergleicht den Wert strikt mit seinen case-Marken. Beide Wochenendmarken erreichen dieselbe Zuweisung. break beendet die switch-Anweisung; default behandelt einen Wert, zu dem kein Fall passt. switch ("2") passt nicht zu case 2:, weil sich die Typen unterscheiden.

Nach einem Treffer läuft die Ausführung durch spätere Fälle weiter, bis ein break oder das Ende erreicht wird. Dieses Fall-through kann wie bei aufeinanderfolgenden Marken beabsichtigt sein oder versehentlich auftreten. Fügt Fall 2 ein Wort hinzu und fehlt ein break, bevor Fall 3 ein weiteres hinzufügt, werden beide Hinzufügungen ausgeführt. Eine case-Marke ist ein Einstiegspunkt, keine neue Bedingung, die nach jeder Anweisung geprüft wird.

Ein Programm kann vor seinem Start scheitern, während der Ausführung stoppen oder mit einem falschen Ergebnis enden. Bestimme, was passiert ist, bevor du Code änderst. Die Konsole liefert Hinweise auf Fehler, während beschriftete Ausgaben Werte in Code sichtbar machen, der ausgeführt wird.

Unterscheide drei Arten von Problemen

Ein Syntaxfehler in einem Skript macht ein anderes, bereits ausgeführtes Skript nicht rückgängig. Eine unbehandelte Laufzeitausnahme stoppt die aktuelle Ausführung an der fehlerhaften Anweisung.

Lies die vollständige Meldung

Ein Konsoleneintrag wie Uncaught ReferenceError: totl is not defined nennt den Fehlertyp und den fehlerhaften Namen. „Uncaught“ bedeutet, dass die Ausnahme nicht behandelt wurde. Eine Fundstelle wie app.js:2 verweist auf Datei und Zeile; ein Klick darauf öffnet diesen Code.

let total = 0;
total = totl + 5;
console.log(total);

Zeile 1 wird ausgeführt. In Zeile 2 kann JavaScript totl nicht lesen, sodass es weder diese Zuweisung abschließt noch die letzte Ausgabe erreicht. Korrigierst du den Schreibfehler zu total, gibt das Skript 5 aus.

Häufige Syntaxmeldungen erwähnen eine fehlende ), ein unerwartetes Token oder ein ungültiges Token. In console.log("hi"; fehlt die schließende Klammer. In if (x > 3 { fehlt die schließende Klammer der Bedingung. Die gemeldete Zeile ist die Stelle, an der die Engine das Problem bemerkt hat; suche auch direkt darüber nach einem nicht geschlossenen Anführungs- oder Trennzeichen.

Grenze die Ursache anhand des Typs ein

Ein ReferenceError weist auf einen Namen hin, auf den nicht zugegriffen werden kann: einen Tippfehler, ein Problem mit dem Gültigkeitsbereich oder einen Lesezugriff vor der Initialisierung. Ein TypeError bedeutet, dass die Operation nicht zum Wert passt, etwa bei "abc".length(), null.trim() oder einer Neuzuweisung an eine const-Variable. Ein RangeError kann durch ein nicht unterstütztes Argument entstehen, etwa bei (1.5).toFixed(101).

Fehlermeldungen können je nach Browser unterschiedlich formuliert sein. Der Typ und der beteiligte Wert sind hilfreicher, als sich den ganzen Satz zu merken. Behebe den ersten relevanten Fehler und führe den Code erneut aus, denn spätere Meldungen können aus derselben Ursache folgen.

Verfolge einen logischen Fehler

Gib bei einem falschen Mittelwert die Summe und das Ergebnis getrennt aus:

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

Die korrekte Summe grenzt den Fehler auf den Divisionsschritt ein. Ändere die Berechnung zu sum / 3, was 82.33333333333333 ergibt. Wenn eine Addition unerwartet Ziffern verbindet, gib auch die Typen aus: console.log("price:", price, typeof price);. Suche den ersten Wert, der von deiner Erwartung abweicht.

Verwende console.warn() oder console.error(), um eigene Diagnosemeldungen hervorzuheben. Prüfe die Stufenfilter der Konsole, wenn eine Ausgabe zu fehlen scheint. Ein 404-Fehler bedeutet, dass eine Ressource nicht gefunden wurde; prüfe daher den Skriptpfad. Bei anderen Ladefehlern benötigst du die vollständige Meldung. Eine fehlende Startmeldung kann auch auf einen Filter oder einen Syntaxfehler zurückgehen.

Reproduziere das Problem, lies den ersten Fehler, prüfe eine wahrscheinliche Ursache mit einer kleinen Änderung oder Ausgabe und führe den Code dann erneut aus, um das erwartete Ergebnis zu prüfen. Entferne vorübergehende Ausgaben, wenn der Fehler behoben ist.

Mit einem Debugger kannst du ein laufendes Skript anhalten und die Werte genau in diesem Moment untersuchen. Verwende den Bereich „Sources“ in Chrome oder Edge oder den Bereich „Debugger“ in Firefox. Das ist besonders hilfreich, wenn ein falsches Ergebnis von mehreren vorherigen Operationen abhängt.

Halte vor der Ausführung einer Zeile an

Öffne das Skript in „Sources“ und klicke auf eine Zeilennummer, um einen Haltepunkt zu setzen. Die Ausführung hält an, bevor diese Zeile ausgeführt wird. Läuft der Code während des Ladens der Seite, lade die Seite nach dem Setzen des Haltepunkts neu. Das bloße Setzen führt bereits abgeschlossenen Code nicht erneut aus.

Du kannst auch debugger; in das Skript schreiben. Bei aktivem Debugger hält die Anweisung die Ausführung an; ohne Debugger hat sie keine Wirkung. Entferne diese Anweisung, bevor du den Code veröffentlichst.

Wähle die nächste Aktion

Bei manchen integrierten Aufrufen gibt es keinen JavaScript-Quellcode, den du schrittweise durchgehen kannst. Der Prozedurschritt ist nützlich, wenn du das Ergebnis eines Aufrufs erhalten möchtest, ohne dessen interne Arbeit zu verfolgen.

Während die Ausführung angehalten ist, kannst du mit der Maus über einen Namen fahren, um ihn zu untersuchen, lokale Werte in Scope lesen oder einen Ausdruck zu Watch hinzufügen. Überwachungsausdrücke wie typeof price und total > 100 werden nach jedem Schritt erneut ausgewertet. Auch die Konsole kann Ausdrücke im angehaltenen Gültigkeitsbereich auswerten.

Untersuche eine irreführende Summe

Kostenloser Versand soll ab 50 gelten, aber dieser Code gewährt ihn bei einer Zwischensumme von 45 zuzüglich 4 Versandkosten:

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Setze einen Haltepunkt in der if-Zeile und lade die Seite neu. Die Zuweisung wurde bereits ausgeführt. „Scope“ zeigt subtotal als Zeichenkette "45" und total als "454". Der Überwachungsausdruck typeof total meldet "string". Der Vergleich wandelt "454" in eine Zahl um, sodass total >= 50 erfüllt ist.

Der Fehler liegt in der Addition vor dem Vergleich. Ändere die gespeicherte Berechnung zu const total = Number(subtotal) + shipping;. Lade erneut. Die Summe ist jetzt die Zahl 49 und die Bedingung ist falsch. Hältst du stattdessen bei der Zuweisung an, wurde diese noch nicht ausgeführt: Führe einen Prozedurschritt aus, bevor du das initialisierte total untersuchst.

Halte nur dort an, wo es nützlich ist

Ein bedingter Haltepunkt hält nur an, wenn sein Ausdruck wahr ist, etwa total > 100. Klicke mit der rechten Maustaste auf die Zeilennummer, um einen hinzuzufügen. Ein Protokollpunkt gibt bei jeder Ausführung seiner Zeile eine Meldung aus, ohne anzuhalten oder das Skript zu bearbeiten. Ausnahmehaltepunkte halten dort an, wo eine Ausnahme ausgelöst wird, sodass du die Werte beim Fehler untersuchen kannst.

Gehst du eine else if-Kette schrittweise durch, siehst du, welcher Zweig erreicht wird und welche frühere Bedingung spätere Prüfungen verhindert. Verwende Ausgaben für wenige bekannte Werte und den Debugger, wenn die Reihenfolge oder mehrere aktuelle Werte wichtig sind. Nimm die endgültige Korrektur im gespeicherten Projektcode vor: Eine experimentelle Änderung im Browser ist keine dauerhafte Änderung deines Projekts. Führe den ursprünglich fehlerhaften Fall erneut aus und prüfe das korrigierte Ergebnis.