TypeScript - null vs. undefined

Hallo, angehende Programmierer! Heute tauchen wir in ein spannendes Thema ein, das oft Anfänger verwirrt: den Unterschied zwischen null und undefined in TypeScript. Machen Sie sich keine Sorgen, wenn Sie sich etwas überwältigt fühlen – ich erinnere mich, als ich zum ersten Mal auf diese Konzepte gestoßen bin, habe ich auch mit dem Kopf geschüttelt! Aber am Ende dieses Lektions werden Sie ein Profi im Unterscheiden zwischen diesen beiden besonderen Werten sein. Los geht's!

Was ist null?

In TypeScript (und JavaScript) ist null ein besonderer Wert, der die absichtliche Abwesenheit eines Objektwertes darstellt. Es ist so, als würde man sagen: "Hey, hier sollte etwas sein, aber im Moment ist hier nichts."

Schauen wir uns einige Beispiele an, um dies besser zu verstehen:

let meinHaustier: string | null = null;
console.log(meinHaustier); // Ausgabe: null

// Später im Code...
meinHaustier = "Fluffy";
console.log(meinHaustier); // Ausgabe: Fluffy

In diesem Beispiel deklarieren wir eine Variable meinHaustier, die entweder eine Zeichenkette oder null sein kann. Initially, setzen wir sie auf null, was bedeutet, dass wir noch kein Haustier haben. Später, wenn wir ein Haustier bekommen, weisen wir den Namen "Fluffy" meinHaustier zu.

Hier ist ein weiteres Beispiel:

function findeBenutzer(id: number): { name: string } | null {
// Stell dir vor, wir durchsuchen eine Datenbank
if (id === 1) {
return { name: "Alice" };
} else {
return null;
}
}

let benutzer = findeBenutzer(1);
console.log(benutzer); // Ausgabe: { name: "Alice" }

benutzer = findeBenutzer(2);
console.log(benutzer); // Ausgabe: null

In diesem Fall gibt unsere findeBenutzer-Funktion entweder ein Benutzerobjekt oder null zurück, wenn kein Benutzer gefunden wird. Dies ist ein gängiges Muster in der Programmierung – die Verwendung von null, um anzuzeigen, dass eine Suche oder Operation kein Ergebnis geliefert hat.

Was ist undefined?

Nun, lassen Sie uns über undefined sprechen. Dieser besondere Wert stellt eine Variable dar, die deklariert, aber noch keinen Wert zugewiesen wurde. Es ist wie eine leere Box – sie existiert, aber es ist noch nichts drin.

Hier sind einige Beispiele, um undefined zu verdeutlichen:

let meinName: string;
console.log(meinName); // Ausgabe: undefined

// Später im Code...
meinName = "John";
console.log(meinName); // Ausgabe: John

function grüße(name?: string) {
console.log(name);
}

grüße(); // Ausgabe: undefined
grüße("Alice"); // Ausgabe: Alice

Im ersten Teil deklarieren wir meinName, aber wir weisen ihm keinen Wert zu. TypeScript weist ihm automatisch den Wert undefined zu. Später weisen wir einen Wert zu, und er ist nicht mehr undefined.

In der grüße-Funktion verwenden wir einen optionalen Parameter. Wenn wir die Funktion ohne Argument aufrufen, wird der name-Parameter undefined.

Hier ist ein weiteres Szenario, bei dem Sie undefined antreffen könnten:

let person = {
name: "Bob",
age: 30
};

console.log(person.name); // Ausgabe: Bob
console.log(person.job); // Ausgabe: undefined

In diesem Fall ist person.job undefined, weil wir nie eine job-Eigenschaft für unser person-Objekt definiert haben.

Null vs. Undefined: Wichtige Unterschiede

Nun, da wir null und undefined einzeln untersucht haben, vergleichen wir sie nebeneinander, um ihre Unterschiede besser zu verstehen.

Aspekt	null	undefined
Bedeutung	Absichtliche Abwesenheit eines Objektwertes	Variabel deklariert, aber kein Wert zugewiesen
Typ	Objekt	Undefined
In JSON	Gültig	Ungültig
Standardparameter für Funktionen	Wird nicht als Standard verwendet	Wird als Standard für optionale Parameter verwendet
Gleichheit	null == undefined (wahr), null === undefined (falsch)	undefined == null (wahr), undefined === null (falsch)

Schauen wir uns einige Codebeispiele an, um diese Unterschiede zu verdeutlichen:

// Typüberprüfung
console.log(typeof null);       // Ausgabe: "object"
console.log(typeof undefined);  // Ausgabe: "undefined"

// JSON-Serialisierung
console.log(JSON.stringify({ a: null }));     // Ausgabe: {"a":null}
console.log(JSON.stringify({ a: undefined })); // Ausgabe: {}

// Standardparameter für Funktionen
function sageHallo(name: string = "World") {
console.log(`Hallo, ${name}!`);
}

sageHallo();        // Ausgabe: Hallo, World!
sageHallo(undefined); // Ausgabe: Hallo, World!
sageHallo(null);    // Ausgabe: Hallo, null!

// Gleichheit
console.log(null == undefined);  // Ausgabe: true
console.log(null === undefined); // Ausgabe: false

In der Praxis hängt die Wahl zwischen null und undefined oft von persönlicher oder Teampräferenz ab. Das Verständnis der Unterschiede kann jedoch dabei helfen, präzisere und bugfreie Code zu schreiben.

Hier ist ein letztes Beispiel, um alles zusammenzufassen:

function verarbeiteBenutzer(benutzer: { name: string, age?: number } | null | undefined) {
if (benutzer === null) {
console.log("Benutzer explizit auf null gesetzt");
} else if (benutzer === undefined) {
console.log("Benutzer nicht bereitgestellt");
} else {
console.log(`Verarbeite Benutzer: ${benutzer.name}, Alter: ${benutzer.age ?? "Unbekannt"}`);
}
}

verarbeiteBenutzer(null);                    // Ausgabe: Benutzer explizit auf null gesetzt
verarbeiteBenutzer(undefined);               // Ausgabe: Benutzer nicht bereitgestellt
verarbeiteBenutzer({ name: "Alice" });       // Ausgabe: Verarbeite Benutzer: Alice, Alter: Unbekannt
verarbeiteBenutzer({ name: "Bob", age: 30 }); // Ausgabe: Verarbeite Benutzer: Bob, Alter: 30

Diese Funktion zeigt, wie wir null, undefined und gültige Benutzerobjekte in einer realen Welt-Situation unterschiedlich behandeln könnten.

Und das war's! Sie haben gerade die Ins und Outs von null und undefined in TypeScript gelernt. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Konzepte in Ihrem eigenen Code auszuprobieren. Frohes Coden und möge Ihre Variablen stets absichtlich null oder undefined sein!

Credits: Image by storyset