Foutafhandeling in JavaScript

Dit artikel legt uit hoe foutafhandeling in JavaScript werkt.

YouTube Video

Foutafhandeling in JavaScript

Foutafhandeling in JavaScript is een belangrijke functie om fouten op te sporen en correct af te handelen wanneer een programma onverwachte problemen tegenkomt. Het is gebruikelijk om de try...catch-syntax te gebruiken om fouten op te vangen en af te handelen. Bovendien kan foutafhandeling bij het werken met Promises of asynchrone operaties ook worden uitgevoerd met async/await of Promise.prototype.catch.

try...catch-Syntax

try...catch wordt gebruikt om fouten op te vangen en af te handelen wanneer deze binnen een codeblok optreden.

 1try {
 2    // Code that may throw an error
 3    let result = riskyFunction();
 4    console.log(result);
 5} catch (error) {
 6    // Catch and handle the error
 7    console.error("An error occurred:", error.message);
 8} finally {
 9    // Code that will always execute
10    console.log("Error handling has completed.");
11}

• Als er een fout optreedt in een try-blok, wordt de uitvoering van het programma onderbroken en wordt het catch-blok uitgevoerd.
• Het finally-blok wordt altijd uitgevoerd, ongeacht of er een fout is opgetreden of niet. Het is onder andere nuttig voor het vrijgeven van middelen en voor eindverwerking.

Fouten opwerpen (throw)

In JavaScript kun je expliciet een fout veroorzaken met het sleutelwoord throw. Dit wordt gebruikt bij het opwerpen van aangepaste foutmeldingen of aangepaste fouten.

 1function checkAge(age) {
 2    if (age < 18) {
 3        throw new Error("You are under 18 years old.");
 4    }
 5    return "Age verification completed.";
 6}
 7
 8try {
 9    let result = checkAge(15);
10    console.log(result);
11} catch (error) {
12    console.error(error.message);  // Displays "You are under 18 years old."
13}

Foutafhandeling bij Asynchrone Operaties (Promise en async/await)

Bij het uitvoeren van asynchrone operaties is de foutafhandeling enigszins anders. Bij het gebruik van Promises worden fouten opgevangen met de catch-methode.

1let promise = new Promise((resolve, reject) => {
2    // Asynchronous operation
3    setTimeout(() => reject(new Error("An issue has occurred!")), 1000);
4});
5
6promise
7    .then(result => console.log(result))
8    .catch(error => console.error(error.message));  // Displays "An issue has occurred!"

Bij het uitvoeren van asynchrone operaties met behulp van async/await kun je fouten afhandelen met try...catch.

 1async function fetchData() {
 2    try {
 3        let response = await fetch('https://api.example.com/data');
 4        let data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("An error occurred while fetching data:", error.message);
 8    }
 9}
10
11fetchData();

Samenvatting

• Je kunt synchrone fouten opvangen met de try...catch-syntax.
• Je kunt je eigen fouten veroorzaken met throw.
• Fouten in asynchrone operaties kunnen worden afgehandeld met de catch-methode van Promise, of met async/await en try...catch.

Door deze methoden te gebruiken, kun je ervoor zorgen dat je programma correct functioneert, zelfs wanneer er fouten optreden.

Error

De Error-klasse wordt gebruikt voor foutafhandeling. Deze biedt de mogelijkheid om fouten te creëren en foutmeldingen en stacktraces te leveren.

1try {
2    throw new Error("Something went wrong");
3} catch (e) {
4    console.log(e.message); // Something went wrong
5}

Basisgebruik

Een Error-object kan expliciet worden gemaakt wanneer er een fout optreedt. Je maakt een instantie met new Error() en geeft een foutbericht door.

1const error = new Error("Something went wrong");
2console.log(error.message);  // "Something went wrong"
3console.log(error.name);     // "Error"
4
5// Stack trace (information about where the error occurred)
6console.log(error.stack);

Eigenschappen van het Error-object

Het Error-object heeft de volgende eigenschappen.

• message: Dit is het foutbericht.
• name: De naam van de fout, standaard ingesteld op "Error".
• stack: Een stack-trace met de locatie waar de fout is opgetreden, handig voor het debuggen.

Fouten gooien met throw

In JavaScript kun je een fout gooien met het throw-sleutelwoord. Dit wordt gebruikt om de verwerking in specifieke situaties te onderbreken en de controle door te geven aan een foutafhandelaar.

1function doSomething() {
2    throw new Error("This function is not yet implemented");
3}
4
5try {
6    doSomething();
7} catch (e) {
8    console.error(e.message);  // "This function is not yet implemented"
9}

Fouten die met throw worden gegooid, kunnen worden opgevangen met de try...catch-syntaxis.

Aangepaste fouten maken

In JavaScript kun je je eigen aangepaste fouten maken door de Error-klasse uit te breiden. Dit stelt je in staat fouten te maken die zijn afgestemd op specifieke situaties.

 1class CustomError extends Error {
 2    constructor(message) {
 3        super(message);  // Call the parent class constructor
 4        this.name = "CustomError";  // Set the error name
 5    }
 6}
 7
 8try {
 9    throw new CustomError("A custom error has occurred");
10} catch (e) {
11    console.error(e.name);    // "CustomError"
12    console.error(e.message); // "A custom error has occurred"
13}

Ingebouwde foutklassen

JavaScript heeft verschillende ingebouwde foutklassen die de Error-klasse uitbreiden. Deze worden gebruikt om specifieke fouten weer te geven.

• ReferenceError: Treedt op wanneer je verwijst naar een variabele die niet bestaat.
• TypeError: Treedt op wanneer het type van een waarde verschilt van het verwachte type.
• RangeError: Treedt op wanneer een getal buiten het toegestane bereik valt.
• SyntaxError: Treedt op wanneer code wordt uitgevoerd die syntactisch onjuist is.
• EvalError: Fouten gerelateerd aan het gebruik van de eval()-functie. Het wordt tegenwoordig zelden gebruikt.
• URIError: Treedt op wanneer een ongeldige URI (coderings- of decoderingsfouten) wordt gebruikt.

Voorbeeld: ReferenceError

Hier is een voorbeeld van een ReferenceError.

1try {
2    console.log(undefinedVariable);  // Undefined variable
3} catch (e) {
4    console.error(e.name);    // "ReferenceError"
5    console.error(e.message); // "undefinedVariable is not defined"
6}

Voorbeeld: TypeError

Hier is een voorbeeld van een TypeError.

1try {
2    null.f();  // Attempting to call a function on null
3} catch (e) {
4    console.error(e.name);    // "TypeError"
5    console.error(e.message); // "Cannot read properties of null (reading 'f')"
6}

finally-blok

Gebruik in de try...catch-syntaxis het finally-blok voor operaties die je wilt uitvoeren, ongeacht of er een fout optreedt.

1try {
2    throw new Error("An issue has occurred");
3} catch (e) {
4    console.error(e.message);  // "An issue has occurred"
5} finally {
6    console.log("Performing cleanup");
7}

In dit voorbeeld worden de handelingen in het finally-blok uitgevoerd, zelfs als er een fout wordt gegooid.

Voordelen van uitzonderingafhandeling

Door foutafhandeling correct te implementeren, kun je voorkomen dat de applicatie crasht bij onverwacht gedrag. Door de try...catch-syntax en foutobjecten correct te gebruiken, kun je robuustere code schrijven.

 1function divide(a, b) {
 2    if (b === 0) {
 3        throw new Error("Cannot divide by zero");
 4    }
 5    return a / b;
 6}
 7
 8try {
 9    console.log(divide(4, 0));  // An error will occur
10} catch (e) {
11    console.error(e.message);   // "Cannot divide by zero"
12}

Samenvatting

• De Error-klasse wordt gebruikt om een foutoorzaak weer te geven en om foutafhandeling uit te voeren.
• Gebruik de try...catch...finally-syntax om fouten af te handelen en onverwachte beëindiging van de applicatie te voorkomen.
• Het is ook mogelijk om de Error-klasse uit te breiden om aangepaste fouten te maken.
• Je kunt verschillende soorten fouten afhandelen door ingebouwde foutklassen zoals TypeError en ReferenceError te gebruiken.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video