Null und undefined in

Über Null und undefined

Anders als in vielen anderen Sprachen gibt es in JavaScript zwei verschiedene Entitäten, die das Fehlen eines (sinnvollen) Werts darstellen. Es gibt null und undefined.

Null

Der primitive Wert null wird als absichtlicher „leerer Wert“ für eine Variable verwendet. In anderen Sprachen wird ein ähnliches Konstrukt vielleicht nur für (fehlende) Objekte oder Zeigertypen verwendet. In JavaScript steht null allgemein für einen leeren Wert eines beliebigen Typs.

let name = null;
// name is intentionally set to "empty" because it is not
// available

Du kannst mit dem Operator für strikte Gleichheit === prüfen, ob eine Variable null ist. Obwohl null ein primitiver Wert ist, gibt der typeof-Operator aus historischen Gründen „fälschlicherweise“ object zurück. Das bedeutet, dass er allein nicht verwendet werden kann, um zu prüfen, ob eine Variable null ist.

let name = null;

name === null;
// => true

// Pitfall:
typeof name;
// => 'object'

Undefined

Eine Variable, der kein Wert zugewiesen wurde, hat den Typ undefined.¹

Das heißt: Während null einen leeren Wert (aber immer noch einen Wert) darstellt, steht undefined für das völlige Fehlen eines Werts. 🤯

undefined tritt in verschiedenen Zusammenhängen auf.

• Wird eine Variable ohne Wert (Initialisierung) deklariert, ist sie undefined.
• Wenn du auf einen Wert für einen nicht vorhandenen Schlüssel in einem Objekt zugreifst, erhältst du undefined.
• Wenn eine Funktion keinen Wert zurückgibt, ist das Ergebnis undefined.
• Wenn ein Argument nicht an eine Funktion übergeben wird, ist es undefined, es sei denn, das Argument hat einen Standardwert.

let name;
console.log(name);
// => undefined

let obj = { greeting: 'hello world' };
console.log(obj.missingKey);
// => undefined

function returnNothing() {
  return;
}
console.log(returnNothing());
// => undefined

Du kannst mit dem Operator für strikte Gleichheit === oder dem typeof-Operator prüfen, ob eine Variable undefined ist.

let name;

name === undefined;
// => true

typeof name === 'undefined';
// => true

Es wird nicht empfohlen, einer Variable manuell undefined zuzuweisen. Verwende stattdessen immer null, um deutlich zu machen, dass du absichtlich einen leeren Wert gesetzt hast.

Optional Chaining

Wie oben erwähnt, liefert der Zugriff auf einen nicht vorhandenen Schlüssel in einem Objekt in JavaScript undefined. Wenn du jedoch versuchst, einen verschachtelten Wert abzurufen, und der übergeordnete Schlüssel nicht existiert, wird die Auswertung des verschachtelten Schlüssels auf undefined ausgeführt und führt zu TypeError: Cannot read property ... of undefined. Theoretisch müsstest du immer prüfen, ob der übergeordnete Schlüssel existiert, bevor du versuchen kannst, den verschachtelten Schlüssel abzurufen. Früher wurde das oft mit dem UND-Operator && gemacht, aber bei tief verschachtelten Werten führt das zu sehr langen Ausdrücken.

obj.level1 && obj.level1.level2 && obj.level1.level2.level3;

Um dieses Problem zu lösen, wurde 2020 Optional Chaining zur Sprachspezifikation hinzugefügt. Mit dem Operator für Optional Chaining ?. stellst du sicher, dass JavaScript nur dann versucht, auf den verschachtelten Schlüssel zuzugreifen, wenn der übergeordnete Wert nicht null oder undefined war. Andernfalls wird undefined zurückgegeben.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.residence;
// => undefined

obj.address.zipCode;
// => undefined

obj.residence.street;
// => TypeError: Cannot read property 'street' of undefined

obj.residence?.street;
// => undefined

obj.residence?.street?.number;
// => undefined

Nullish Coalescing

Es gibt Situationen, in denen du einen Standardwert anwenden möchtest, falls eine Variable null oder undefined ist. Früher wurde das oft mit einem Ternär-Operator ? oder durch die Nutzung der faulen Auswertung des ODER-Operators || gemacht. Das hat den Nachteil, dass der Standardwert in allen Fällen angewendet wird, in denen die Variable falsy ist (z. B. '' oder 0), und nicht nur, wenn sie null oder undefined ist. Das kann leicht zu unerwarteten Ergebnissen führen.

let amount = null;
amount = amount || 1;
// => 1

amount = 0;
amount = amount || 1;
// => 1

amount = 0;
amount ? amount : 1;
// => 1

Um dem zu begegnen, wurde der Nullish-Coalescing-Operator ?? eingeführt. Genau wie Optional Chaining wurde er 2020 zur Sprachspezifikation hinzugefügt. Der Nullish-Coalescing-Operator ?? gibt den rechten Operanden nur dann zurück, wenn der linke Operand null oder undefined ist. Andernfalls wird der linke Operand zurückgegeben. Damit lässt sich ein Standardwert jetzt gezielter anwenden.

let amount = null;
amount = amount ?? 1;
// => 1

amount = 0;
amount = amount ?? 1;
// => 0

---

[1] Undefined, MDN. (2021). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined (abgerufen am 4. Juni 2021).