JavaScript - Fehler und Ausnahmenverarbeitung

Hallo da draußen, zukünftige JavaScript-Zauberer! ? Willkommen auf unserer aufregenden Reise in die Welt der Fehlerbehandlung in JavaScript. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich durch dieses Abenteuer zu führen. Also, schnall dich an und tauchen wir ein!

Was ist ein Fehler?

Stell dir vor, du backst einen Kuchen ? und verwendest versehentlich Salz anstelle von Zucker. Das ist ein Fehler! In der Programmierung sind Fehler ähnlich - sie sind unerwartete Probleme, die auftreten, wenn unser Code ausgeführt wird. Diese können Tippfehler, logische Fehler oder sogar Probleme mit den Daten sein, mit denen wir arbeiten.

Hier ist ein einfaches Beispiel für einen Fehler in JavaScript:

console.log(Hello, World!);

Wenn du diesen Code ausführst, erhältst du einen Fehler, weil wir vergessen haben, unsere Zeichenkette in Anführungszeichen zu setzen. JavaScript erwartet, dass Zeichenketten in Anführungszeichen stehen.

Was ist Fehlerbehandlung?

Fehlerbehandlung ist wie ein Sicherheitsnetz, wenn du auf einem Seil balancierst. Es ist eine Möglichkeit, Fehler in unserem Code elegant zu verwalten und zu verhindern, dass unser gesamtes Programm abstürzt, wenn etwas falsch läuft.

Die try...catch...finally-Anweisung

Die try...catch...finally-Anweisung ist unser Hauptwerkzeug zur Fehlerbehandlung in JavaScript. Es ist wie ein Superhelden-Trio, das kommt, um den Tag zu retten! ?‍♀️?‍♂️?‍♀️

So funktioniert es:

try {
// Code, der einen Fehler verursachen könnte
let result = 10 / 0;
console.log(result);
} catch (error) {
// Code zur Fehlerbehandlung
console.log("Ups! Ein Fehler ist aufgetreten:", error.message);
} finally {
// Code, der immer ausgeführt wird, unabhängig von Fehlern
console.log("Das läuft immer!");
}

In diesem Beispiel:

• Der try-Block enthält Code, der einen Fehler verursachen könnte (Division durch Null).
• Wenn ein Fehler auftritt, fängt der catch-Block diesen und behandelt ihn elegant.
• Der finally-Block wird immer ausgeführt, egal, ob ein Fehler aufgetreten ist oder nicht.

Die throw-Anweisung

Manchmal möchten wir unsere eigenen benutzerdefinierten Fehler erstellen. Hier kommt die throw-Anweisung ins Spiel. Es ist so, als wärest du der Schiedsrichter in einem Spiel und rufst ein Foul! ?

Hier ist ein Beispiel:

function checkAge(age) {
if (age < 0) {
throw new Error("Age cannot be negative!");
}
console.log("Age is valid:", age);
}

try {
checkAge(-5);
} catch (error) {
console.log("Caught an error:", error.message);
}

In diesem Code werfen wir einen benutzerdefinierten Fehler, wenn jemand versucht, ein negatives Alter zu verwenden. Der catch-Block behandelt dann diesen Fehler.

Die onerror Ereignis-Handler-Eigenschaft

Die onerror Ereignis-Handler-Eigenschaft ist wie ein aufmerksamer Wächter für deine gesamte JavaScript-Anwendung. Sie fängt Fehler, die überall in deinem Code auftreten.

So kannst du sie verwenden:

window.onerror = function(message, source, lineno, colno, error) {
console.log("An error occurred:");
console.log("Message:", message);
console.log("Source:", source);
console.log("Line:", lineno);
console.log("Column:", colno);
console.log("Error object:", error);
return true;
};

// Dies wird den onerror Handler auslösen
nonExistentFunction();

Dieser Code richtet einen globalen Fehlerhandler ein, der jeden nicht abgefangenen Fehler in deiner Anwendung fängt.

JavaScript Fehler-Objekt Referenz

JavaScript bietet mehrere eingebauten Fehlerarten. Sehen wir uns diese in einer praktischen Tabelle an:

Fehlerart	Beschreibung
Error	Der allgemeine Fehlerart
SyntaxError	tritt auf, wenn es einen Syntaxfehler im Code gibt
ReferenceError	tritt auf, wenn auf eine nicht existierende Variable verwiesen wird
TypeError	tritt auf, wenn ein Wert nicht den erwarteten Typ hat
RangeError	tritt auf, wenn eine Zahl außerhalb des zulässigen Bereichs liegt
URIError	tritt auf, wenn falsche URI-Funktionen verwendet werden
EvalError	tritt in Bezug auf die eval()-Funktion auf

Hier ist ein Beispiel, wie diese Fehler auftreten könnten:

try {
// SyntaxError
eval("Hello World");

// ReferenceError
console.log(undefinedVariable);

// TypeError
null.f();

// RangeError
let arr = new Array(-1);

// URIError
decodeURIComponent("%");

} catch (error) {
console.log(error.name + ": " + error.message);
}

Jede dieser Zeilen wird einen anderen Fehler werfen, den unser catch-Block behandelt.

Und das ist es, meine lieben Schüler! Wir haben die Welt der JavaScript-Fehlerbehandlung bereist. Denke daran, Fehler sind nicht deine Feinde - sie sind wertvolles Feedback, das dir hilft, deinen Code zu verbessern. Nehme sie an, lerne daraus und bald wirst du Fehler wie ein Profi behandeln! ?

Weiter codieren, weiter lernen und nicht vergessen, Spaß zu haben! Bis zum nächsten Mal! ?

Credits: Image by storyset