let und const

Bisher hast du Werte direkt hingeschrieben: einen Text in console.log, eine Zahl in einer Rechnung. Ab jetzt bekommen sie Namen, und damit fängt Programmieren eigentlich erst an.

Ein Name ist eine Schublade mit Aufschrift. Du legst einmal etwas hinein und kommst danach überall im Code an diesen Wert, indem du den Namen hinschreibst. Ändert sich der Wert, änderst du ihn an einer Stelle statt an fünfzehn.

01 / 05Die Schreibweise

Drei Teile: das Schlüsselwort, der Name, das Gleichheitszeichen mit dem Wert.

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// const für alles, was so bleibt, wie es ist.
const name = "Mario";
const stadt = "Leipzig";

// let für alles, was sich noch ändern soll.
let punkte = 0;

console.log(name, "aus", stadt);
console.log("Punkte:", punkte);

punkte = 10;
console.log("Punkte:", punkte);

const und let machen fast dasselbe. Der Unterschied ist einer: Ein Name, den du mit let angelegt hast, darf später einen neuen Wert bekommen. Ein Name mit const nicht.

Beachte, dass beim Ändern kein let mehr davorsteht. Das Schlüsselwort gehört zur Anlage, nicht zur Zuweisung. punkte = 10 heißt „nimm den bekannten Namen und gib ihm einen neuen Wert”, let punkte = 10 heißt „leg einen neuen Namen an”. Schreibst du das zweite ein zweites Mal, beschwert sich der Browser, und zwar mit einem Syntaxfehler: die Datei läuft dann gar nicht erst.

Das Gleichheitszeichen ist übrigens keine Gleichung. Es liest sich nicht „punkte ist gleich 10”, sondern „punkte bekommt 10”. Die Richtung ist immer von rechts nach links. Das klingt spitzfindig, wird aber wichtig, sobald punkte = punkte + 1 dasteht, und das ist eine völlig normale Zeile.

02 / 05Warum const zuerst kommt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const stadt = "Leipzig";
console.log("Erst:", stadt);

// Diese Zeile wirft einen TypeError und bricht ab.
stadt = "Dresden";

console.log("Hierher kommt das Programm nicht mehr.");

Der Versuch, einem const-Namen etwas Neues zuzuweisen, wirft einen TypeError und bricht ab. Das ist kein Ärgernis, sondern der Zweck.

Das kannst du selbst nachstellen, ohne eine Datei kaputtzumachen. Geh zurück ins erste Beispiel, dort stehen punkte mit let und stadt mit const nebeneinander, und tipp in die Eingabezeile der Console punkte = 99. Zurück kommt 99, und punkte allein getippt sagt danach auch 99: Der Wert steht wirklich anders drin. Jetzt dasselbe mit stadt = "Dresden", und zurück kommt TypeError: Assignment to constant variable. (in Firefox invalid assignment to const 'stadt'). Damit ist der Unterschied zwischen den beiden Schlüsselwörtern keine Behauptung mehr, sondern etwas, das du in zehn Sekunden selbst gesehen hast.

Die Regel für den Alltag lautet: Nimm const, bis es nicht mehr geht. Erst wenn du merkst, dass der Wert sich wirklich ändern muss, machst du ein let daraus.

Der Gewinn ist beim Lesen, nicht beim Schreiben. Wenn du in fremdem Code ein const siehst, weißt du sofort: dieser Wert ist hier oben gesetzt und bleibt so, egal wie lang die Funktion ist. Bei let musst du den Rest durchsuchen, um sicher zu sein. In der Praxis sind die allermeisten Namen const, und die wenigen let fallen dann auf, was genau richtig ist.

Ein Sonderfall, den du in Abschnitt 7 wiedersiehst: Bei einem Objekt oder einer Liste schützt const nur den Namen, nicht den Inhalt. Du kannst also einer const-Liste weitere Einträge hinzufügen, ihr aber keine andere Liste zuweisen. Das verwirrt am Anfang und ergibt Sinn, sobald man weiß, was in der Schublade wirklich liegt.

Auch das sind drei Zeilen in der Eingabezeile, und du musst dafür nichts von Listen wissen: const liste = [1], dann liste.push(2), dann liste. Die letzte Zeile antwortet mit (2) [1, 2]. Der Name zeigt weiter auf dieselbe Liste, nur liegt jetzt mehr darin.

03 / 05Warum var in diesem Kurs nicht vorkommt

Es gibt ein drittes Schlüsselwort, var. Du wirst es in älterem Code und in vielen Tutorials sehen, und du brauchst es nie.

var ist der Weg, wie man Namen bis 2015 angelegt hat. Es hat zwei Eigenschaften, die regelmäßig zu Fehlern führen: Es kennt geschweifte Klammern nicht als Grenze, und es lässt sich beliebig oft neu anlegen, ohne dass sich jemand beschwert. Beides klingt harmlos und ist es nicht. Was genau daran kaputt ist, verstehst du in Abschnitt 5, wenn der Gültigkeitsbereich dran ist. Bis dahin reicht: const und let sind der Nachfolger, sie tun dasselbe besser, und wenn du irgendwo var liest, ist der Code älter als 2015 oder von jemandem, der es nicht mitbekommen hat.

04 / 05Was einen guten Namen ausmacht

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// So nicht. In drei Wochen weiß niemand mehr, was das war.
const p = 1999;
const m = 19;
const f = true;

console.log("Ergebnis:", p * (1 + m / 100));

// So schon. Dieselbe Rechnung, lesbar.
const nettoPreisInCent = 1999;
const steuersatzInProzent = 19;
const istGeschaeftskunde = true;

console.log("Ergebnis:", nettoPreisInCent * (1 + steuersatzInProzent / 100));

Beide Blöcke rechnen dasselbe. Der erste ist nach drei Wochen unlesbar, auch für den, der ihn geschrieben hat.

Drei Gewohnheiten, die alles besser machen:

Sag, was drin ist, nicht wie groß es ist. preis ist besser als p, istAngemeldet besser als flag. Kurze Namen sparen Tipparbeit und kosten Lesezeit, und du liest Code deutlich öfter, als du ihn schreibst.

Nimm bei Wahrheitswerten eine Frage. Namen wie istAngemeldet, hatRabatt oder kannBearbeiten lesen sich in einer Bedingung wie ein Satz. Das zahlt sich in Abschnitt 3 aus.

Häng die Einheit an, wenn es eine gibt. preisInCent statt preis erspart dir genau die Sorte Fehler, bei der jemand irgendwo durch hundert teilt und niemand mehr weiß, warum.

In JavaScript schreibt man mehrteilige Namen zusammen und markiert die Wortgrenzen mit Großbuchstaben: nettoPreisInCent. Das heißt camelCase, weil die Höcker an ein Kamel erinnern. In CSS wird stattdessen mit Bindestrichen getrennt, das ist eine der Stellen, an denen sich die beiden Sprachen unterscheiden.

05 / 05Was ein Name nicht darf

Drei harte Regeln, und der Browser setzt sie durch:

Nicht mit einer Ziffer beginnen. 2teZahl ist verboten, zahl2 erlaubt.

Keinen Bindestrich enthalten. netto-preis liest JavaScript als „netto minus preis”, also als Rechnung. Das ist der häufigste Fehler bei Leuten, die aus CSS kommen.

Kein reserviertes Wort sein. Namen wie const, function, return, class oder if gehören der Sprache. Der Browser meldet das sofort.

Erlaubt sind neben Buchstaben und Ziffern noch der Unterstrich und das Dollarzeichen. Beide haben keine eingebaute Bedeutung, sie sind einfach zwei weitere Zeichen. Du wirst sie in fremdem Code sehen, brauchst sie aber nicht.

Umlaute sind übrigens erlaubt, größe funktioniert. Trotzdem tut es fast niemand: Code wandert zwischen Tastaturen und Systemen, und ein ö an der falschen Stelle ist ein Ärger, den man sich sparen kann.