Check out a free preview of the full JavaScript: From First Steps to Professional course

The "try catch Error Handling" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana demonstrates error handling using try catch blocks to be aware of potential errors and then manage them if they occur.

Preview
Close

Transcript from the "try catch Error Handling" Lesson

[00:00:00]
>> So, we've been looking at the Firefox Debugger. You might be working in Chrome or Safari or another browser, different browser's Dev Tools work differently, so their debuggers work differently. So you can read up on them, there're some links in the slides here. You can read up in the documentation for your particular browser, how its developer tools work.

[00:00:18]
And in fact, there is, I believe an entire course on using developer tools on front end masters. So if you think this is fun, and you're like, clicking around and poking around in the web page in your Dev Tools, you can take that course next and kind of get even more tricks up your sleeve there.

[00:00:37]
But suffice it to say that the the debugger and kind of looking into what's going on inside of your functions and different parts of your code can be a useful way to figure out when something is going wrong, what is going wrong. And so then once we've figured out where something is going wrong, or maybe where it is likely, maybe we already have an idea of where it's likely that something might go wrong.

[00:01:02]
We're trying something a little dangerous, then we can do something about it, we can handle it. So, what usually happens in JavaScript, is that certain code will throw an exception or an error that then will cause JavaScript to stop running our code. So if I have some function, this throws an error that is, and the keyword in JavaScript to throw an error is throw.

[00:01:29]
We haven't really looked in detail at that because usually we will be running into errors and maybe some other module that we've loaded or something like that. But if we do need to manually throw an error we can use the keyword throw. And if we have a function that throws an error, let's say, or a line in our code that throws an error because a variable wasn't declared or something like that, as we've seen before, when we had a missing variable or we tried to use await in the wrong place or do any other thing that JavaScript don't like, JavaScript will quit.

[00:02:04]
It'll just give up, it'll say, I can't run anymore, I'm done, this is terrible. And so we won't get to the next line of code. And sometimes that is exactly what we want JavaScript to do. We want it to stop running our program and let us know that something has gone horribly wrong and that it makes sense.

[00:02:19]
But other times, we might want to maybe try something again a couple of times, or maybe try a different way, or try a fallback. Maybe we have a default dongle image that we want to load if loading a random image doesn't work. For example, or maybe we were just trying to do something optional, like add in some extra data, some extra facts about JavaScript or about our dongles that aren't really required in order for our application to do its job, but maybe we're just adding some extra pizzas there.

[00:02:54]
And in that case, if we have an error in that optional part, we wanna just kind of skip it and forget about it and say, whatever and keep going on with our lives. And so, in JavaScript the way that we can do that, the way that we can handle an error, and either, maybe give ourselves some more information about it or do something else if we run into an error, is using a couple of friends, try and catch.

[00:03:21]
So a try catch block here, which we have a try block and a catch block, they work together in order to try something that might give us an error. So for example, we have a function that we're calling here in our try block, inside our curly braces, that we think might throw an error.

[00:03:41]
And try is going to try to run it, and if it works and there's no error, cool, we're just gonna go on with the rest of the code after this whole try catch block. But if this might throw an error, does throw an error, then we're going to enter the catch block.

[00:04:01]
And JavaScript is gonna pass in an error object to that catch block that we now have as an error that we can capture in these parenthesis, we can capture that as a variable, which you'll often see called error, or e, or err, something like that. So we can catch that object, that exception or error object that JavaScript gives us and then maybe we wanna log a message about it with some details.

[00:04:28]
Say, as if, we can even use that code then, we write into an error and maybe we wanna do something else here. Maybe we wanna use a fallback value or we want to try some other way of getting this optional information or something like that. Or maybe we just wanna say, whatever, let's just keep going, and the catch block is going to allow us to decide what we wanna do in the event that whatever happened in the try block, throws an error.

[00:04:58]
And in this case, we're just gonna log whatever and keep rolling with the homies. I hope folks that seemed clueless cuz otherwise this won't make any sense. But, [LAUGH] in any case, suffice it to say that try catch is how we can handle errors in our program and make decisions in our code about what to do if we run into an error in a particular line of code or a particular block of code.

[00:05:22]
We can have more than one line in that try block two. So you can read all about try and catch on MDN, of course, and you can read a lot more about error, objects, and how that works, and what kind of things we can work with there on our error objects, and see some more examples of how to use try and catch.

[00:05:45]
And that is something you'll see in a lot of professional JavaScript code where we're doing things that might not work, so this is how we would handle it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now