try, catch, finally, throw - error handling in JavaScript

Key Takeaways

Errors can be coding errors made by the programmer, errors due to wrong input, or other unforeseeable things. I will be discussing how to handle errors in JavaScript. Error handling is used most when working with data from other sources or user input, since those can be unreliable. It is common to see error handling associated with Ajax calls and asynchronous code. Error handling uses the keywords try, catch, finally, and throw. The try statement lets you test a block of code for errors. The catch statement lets you handle the error. The throw statement lets you create custom errors. And the finally statement lets you execute code after try and catch, regardless of the result. So, let's see some code. Okay, here's the first part. We're going to try some code to see if there's going to be any error, and then we're going to console.log start of try runs, and then this part right here is the error, because there is nothing in the program called unicycle. And then it's going to try to run some more code here. And then it's going to catch the error. And then we're going to have the finally statement. I'm going to run this, and then we'll talk about what's in the logs here. So, start of try runs, that's right here. And then it reached the error. So, since the error was reached here, it never goes to this next statement. Once the error is reached, it goes straight to the catch statement right down here. It says, "Error has occurred. Reference error, unicycle is not defined at pen.js 14 3." So, it we pass in an error object to the catch statement, and then I'm I'm to console.log error has occurred, and then we console.log error.stack. Now, .stack is is when it's going to show this part right here. We can also do it without the .stack where we just log the error. And if I run that, you're going to see this part. And this is what's going to be used usually. Not all browsers can handle the the .stack. So, when the error occurs, JavaScript generates an object containing the details about it. So, so that's what the error object is. And it's going to have two main properties, name and message. So, the name is the reference error right here, and then the message is unicycle is not defined. And then I also already showed you about getting the the call stack. Then it's going to go down to the finally statement, whether or not an error happens, we're going to always run the code in the finally statement. This is always run. And then at the end, you can see the execution continues. So, that's just after the the try catch statement is over, it continues. Now, for the try catch to work, the code must be runnable. In other words, it should be valid JavaScript. It won't work if the syntax is wrong. Like if I have a an opening brace here, and then I don't have the ending brace, and then if I if I try to run that, well, that's not going to work. This is called a parse time error. Well, try catch only handles run time errors. So, the code has to be able to run. So, I'm just going to delete that here, and then run that, and then we can actually see it run this time. There are many built-in errors that already exist, but you can also create your own custom errors with the throw statement. I'm going to talk about throw errors in the context of a more realistic use case for try catch statements. Okay, let's say you're going to get data from a server. Often from a server you're going to get JSON data, sometimes through an Ajax call, but we're just going to to like we got this data from a server and then we're going to try this. Let user equal JSON.parse. So, we're going to parse the data that we got from the server. And then, if there is no user.name, we're going to throw a new syntax error, incomplete data, no name. So, let's say we're expecting the data from the server to have a name, but this doesn't have a name. So, we're going to throw a new syntax error and put incomplete data, no name. Now, you can actually throw a number or a string or or a boolean. But, also you can create a new error, like a new syntax error or a new error, and you can pass in the message. So, syntax error is going to be the name of the error, and then this is going to be the message of the error. So, if I run that, you'll see what I mean. So, you can see down here we're going to console.log JSON error, and then we're just going to log the message, e.message. So, the message is incomplete data, no name. The name of the error will be syntax error. So, if we log the e.name down here, I run that, you'll see JSON error, syntax error. Or, we can just log the entire thing and just do e, and it's going to say JSON error, syntax error, incomplete data, no name. So, it got the JSON error, then it says the syntax error, that's the name of the error right here, and then it's going to have the message incomplete data, no name. So, in this code, if there was a name, it would console.log the name, but there's not a name. As soon as it throws this error here, it's going to go to the catch statement, and that's when it logs the error statement right here. So, that's the basics of error handling in JavaScript. Check the description for a link to more information, and also to the code used. Thanks for watching. My name is Beau Carnes. Don't forget to subscribe, and remember, use your code for good.