null und undefined – Abwesenheit sinnvoller Werte

Gibts nicht geht nicht: Wenn Werte oder Eigenschaften nicht existieren

Die speziellen Werte null und undefined kennzeichnen die Abwesenheit sinnvoller Werte. Sie sind zwar selber Werte, aber sie enthalten keine Informationen. Sie werden eingesetzt, wenn Operationen keinen Wert liefern könnten, aber einen Wert haben müssen.

Beides wird eingesetzt, um auf fehlende Werte zu reagieren, aber ihr Verhalten weist feine Unterschiede auf: null wird eher bewusst zugewiesen, undefined von JavaScript erzeugt. In booleschen Ausdrücken gelten null und undefined als falsy (ein Wert ist falsy, wenn er sich in einem booleschen Kontext (if, &&, ||, !) wie false verhält).

undefined: existiert, aber hat keinen sinnvollen Wert

let foo;
console.log ("foo", foo);

JavaScript weist einer Variable, die mit let ohne Wertzuweisung definiert ist, den Wert undefined zu. Das Skript wirft keine Fehlermeldung aus.

[Log] foo – undefined 

Ihre Benutzung führt nicht zu Laufzeitfehlern, aber zu unbrauchbaren Ergebnissen. Hingegen führt die Benutzung einer Variablen, die nicht deklariert wurde, zu einem Laufzeitfehler:

console.log (bar);

[Error] ReferenceError: Can't find variable: bar

null – mit Absicht gesetzt

null wird einer Variablen absichtlich zugewiesen, um explizit zu kennzeichnen, dass sie derzeit kein Objekt bzw. keine Information enthält. So kann später eindeutig geprüft werden, ob ein Wert bewusst »leer« ist oder eine Variable nie initialisiert wurde. Vor Aktionen auf einem DOM-Element wird geprüft, ob die Variable ungleich null ist, um sicherzustellen, dass das Element existiert.

let elem = null;
elem = document.querySelector('.selector');

if (elem !== null) {
  elem.classList.add('active');
} else {
  console.warn('Element .selector nicht gefunden');
}

elem ist entweder:

• ein Element
• oder bewusst null

Die moderne Kurzform (Optional Chaining) lautet:

document.querySelector('.selector')?.classList.add('active');

Die Aktion wird nur ausgeführt, wenn das Element existiert, und dabei ist kein Extra if erforderlich.

Optional Chaining (?.) ist ein JavaScript-Operator, der sicher auf Eigenschaften, Methoden oder Indizes zugreifen kann, ohne dass ein Fehler entsteht, wenn ein Teil der Kette null oder undefined ist.

Ohne Optional Chaining:

const user = null;

console.log(user.name);
// TypeError: Cannot read properties of null

Mit Optional Chaining: Wenn links von ?. null oder undefined steht, wird der ganze Ausdruck sofort zu undefined ausgewertet.

console.log(user?.name);
// undefined (kein Fehler)

So werden Methoden nur aufgerufen, wenn sie existieren:

button?.addEventListener('click', handler);

Und der Zugriff auf ein Array wird nur durchgeführt, wenn das Array existiert:

items?.[0]

Wichtig: Optional Chaining schützt NICHT vor ReferenceError, sondern funktioniert nur, wenn die Variable existiert, aber null oder undefined ist.