JavaScript ist die Sprache des Webs – kein Browser kommt ohne sie aus, und auch auf dem Server hat sie sich mit Node.js fest etabliert. Wer den Einstieg sucht, sollte zuerst die Grundlagen sitzen haben: Wie deklariere ich Variablen richtig, wie funktionieren Funktionen, und warum verhält sich JavaScript manchmal anders, als man es erwartet? Dieser Artikel räumt mit den wichtigsten Unklarheiten auf.
Variablen: let, const und das veraltete var
In modernem JavaScript deklarierst du Variablen mit let oder const. Das frühere var solltest du in neuem Code vermeiden, weil es ein eigenwilliges Verhalten beim Geltungsbereich hat, das immer wieder zu Bugs führt.
- const: Für Werte, die sich nach der Zuweisung nicht mehr ändern sollen. Die Bindung ist konstant – du kannst die Variable nicht neu zuweisen.
- let: Für Werte, die sich ändern, etwa Zähler in Schleifen oder Zustände, die sich im Programmverlauf entwickeln.
- var: Funktioniert noch aus Kompatibilitätsgründen, hat aber funktionsweiten statt blockweiten Geltungsbereich. In neuem Code: nicht verwenden.
Die Faustregel lautet: Nutze standardmäßig const, und greife nur zu let, wenn du die Variable tatsächlich neu zuweisen musst. Das macht deinen Code vorhersehbarer, weil Leser sofort sehen, welche Werte feststehen.
Vorsicht: const schützt nicht den Inhalt
Ein verbreitetes Missverständnis: const macht ein Objekt nicht unveränderbar. Du kannst zwar die Variable nicht neu zuweisen, aber die Eigenschaften eines mit const deklarierten Objekts oder die Elemente eines Arrays sehr wohl ändern. const arr = [1, 2]; arr.push(3); ist völlig erlaubt – nur arr = [4, 5] wäre verboten. Wer ein Objekt wirklich einfrieren will, braucht Object.freeze().
Datentypen: was JavaScript kennt
JavaScript unterscheidet primitive Typen und Objekte. Zu den Primitiven gehören string, number, boolean, null, undefined, bigint und symbol. Alles andere – Arrays, Funktionen, Datumsobjekte – ist ein Objekt.
Eine Besonderheit von JavaScript ist die dynamische Typisierung: Eine Variable kann erst eine Zahl, dann ein String sein. Das ist flexibel, sorgt aber auch für Überraschungen. Der berüchtigte Vergleich "5" == 5 ergibt true, weil der doppelte Gleichheitsoperator Typen umwandelt. Nutze deshalb immer den strikten Vergleich ===, der ohne Typumwandlung arbeitet und nur true liefert, wenn Wert und Typ übereinstimmen.
Funktionen: das Herzstück
Funktionen sind in JavaScript erstklassige Objekte – du kannst sie in Variablen speichern, als Argumente übergeben und aus anderen Funktionen zurückgeben. Es gibt mehrere Schreibweisen, und jede hat ihren Platz.
Die klassische Funktionsdeklaration function gruesse(name) { return "Hallo " + name; } ist die ausführlichste Form. Daneben gibt es den Funktionsausdruck, bei dem die Funktion einer Variablen zugewiesen wird, und die kompakten Arrow Functions: const gruesse = name => "Hallo " + name;.
Arrow Functions und das this-Verhalten
Arrow Functions sind nicht nur kürzer, sie verhalten sich auch anders beim Schlüsselwort this. Während eine normale Funktion ihr eigenes this mitbringt, das vom Aufrufkontext abhängt, übernimmt eine Arrow Function das this aus dem umgebenden Geltungsbereich. Das macht sie ideal für Callbacks innerhalb von Methoden, wo das klassische this sonst verloren ginge – ein häufiger Stolperstein für Einsteiger.
Scope: Wo gilt eine Variable?
Der Geltungsbereich (Scope) bestimmt, von wo aus eine Variable sichtbar ist. let und const haben Blockscope – sie gelten nur innerhalb der geschweiften Klammern, in denen sie deklariert wurden. Das schließt Schleifenkörper und if-Blöcke ein. var dagegen kennt nur Funktionsscope, was zu klassischen Schleifen-Bugs führt.
Verschachtelte Funktionen haben Zugriff auf die Variablen ihrer äußeren Funktionen. Diese Eigenschaft heißt Closure und ist eines der mächtigsten Konzepte von JavaScript. Eine Closure merkt sich die Umgebung, in der sie erstellt wurde – auch wenn die äußere Funktion längst beendet ist. Damit lassen sich private Zustände kapseln und Funktionsfabriken bauen.
Hoisting: das Hochziehen von Deklarationen
JavaScript "hebt" Deklarationen gedanklich an den Anfang ihres Geltungsbereichs – das nennt man Hoisting. Funktionsdeklarationen sind dadurch schon vor ihrer Definition im Code aufrufbar. Bei let und const ist die Sache subtiler: Sie werden zwar gehoistet, befinden sich aber in einer sogenannten temporalen Todeszone, bis die Deklaration tatsächlich erreicht wird. Greifst du vorher darauf zu, gibt es einen Fehler. Das ist gewollt und schützt vor schwer auffindbaren Bugs, die var verursacht hätte.
Arrays und Objekte im Alltag
Arrays sind in JavaScript extrem flexibel. Die Methoden map(), filter() und reduce() sind das tägliche Brot jedes JavaScript-Entwicklers. map() transformiert jedes Element, filter() behält nur passende, und reduce() fasst alles zu einem einzigen Wert zusammen. Diese Methoden geben neue Arrays zurück und verändern das Original nicht – ein Stil, der zu robusterem Code führt.
Objekte speichern Daten als Schlüssel-Wert-Paare. Mit der Destrukturierung holst du Werte elegant heraus: const { name, alter } = person; erzeugt zwei Variablen aus den entsprechenden Eigenschaften. Der Spread-Operator ... kopiert oder kombiniert Objekte und Arrays kompakt.
Typische Stolperfallen
JavaScript hat ein paar berüchtigte Eigenheiten. typeof null liefert "object" – ein historischer Bug, der aus Kompatibilitätsgründen nie behoben wurde. Floating-Point-Arithmetik führt dazu, dass 0.1 + 0.2 nicht exakt 0.3 ergibt. Und der Unterschied zwischen undefined (Variable existiert, hat aber keinen Wert) und null (bewusst gesetzter Leerwert) sorgt regelmäßig für Verwirrung.
Tools zum Ausprobieren
Zum Üben brauchst du keine komplexe Umgebung – die Browser-Konsole reicht für die ersten Schritte. Für das Formatieren und Prüfen von Daten, die du in JavaScript verarbeitest, findest du im Webtools-Bereich nützliche Helfer. Wer von JavaScript zu mehr Typsicherheit wechseln möchte, findet in unserem Beitrag zu TypeScript und Typsicherheit den logischen nächsten Schritt.
Häufige Fragen
Soll ich immer const statt let nutzen?
Ja, als Standard. Beginne jede Variable mit const und wechsle nur zu let, wenn du sie tatsächlich neu zuweisen musst. Das macht deinen Code lesbarer und verhindert versehentliche Änderungen.
Was ist der Unterschied zwischen == und ===?
Der doppelte Gleichheitsoperator == wandelt vor dem Vergleich Typen um, was zu unerwarteten Ergebnissen führt. Der dreifache === vergleicht strikt ohne Umwandlung. Verwende in der Praxis fast immer ===.
Wann nehme ich eine Arrow Function?
Arrow Functions eignen sich hervorragend für kurze Callbacks und überall dort, wo du das this aus dem umgebenden Kontext beibehalten willst. Für Methoden eines Objekts oder klassische benannte Funktionen ist oft die normale Schreibweise klarer.
Warum sollte ich var nicht mehr verwenden?
var hat Funktionsscope statt Blockscope und wird auf eine Weise gehoistet, die zu schwer auffindbaren Fehlern führt. let und const verhalten sich vorhersehbarer und sind seit ES6 der etablierte Standard.