In the last video, you saw how we could manually throw a generic error object. Well, there are more specific error types built into JavaScript. The MDN documentation lists all these out. There is the eval error, range error, reference error, syntax error, type error, URI error, aggregate error, and internal error.
The ones that you'll run into the most often are the reference error, syntax error, type error, and then occasionally the range error. Let's dive a little bit deeper into each of these. js file, and then the corresponding page over in the browser, the very first thing I've got here is a console log of a variable that is not defined. This results in a reference error.
Over in the browser, you can see exactly that log to the console. Reference error test is not defined. So reference errors are all about working with variables that are not defined or are not defined in the proper scope. Here, test isn't defined anywhere at all, but maybe it actually was defined inside of some kind of function.
This would still be a reference error though, because test is only available inside the scope of the hello function. Therefore, this test doesn't reference any actual variable. Okay, let's take a look at a range error. Range errors are all about trying to use a value that is outside of a valid numeric range.
For example, the repeat method on a string expects a positive number. Why? Because you can only repeat something a positive number of times, right? Therefore, negative one would be an invalid input here.
So when I say that, sure enough, I get a range error over in the browser. Okay, another good example of a range error is if you try to create an array of the length of negative one. This simply cannot happen. An array always has to have either zero items in it or a positive number of items in it.
So this would also create a range error. The point here being is that range errors are all about providing numbers within a valid numeric range. And when you don't, that's when the range errors occur. Okay, let's take a look now at syntax errors.
A syntax error occurs when you have something that can't be parsed or read properly in terms of, you know, valid JavaScript syntax. For example, right here, I have accidentally mistyped my if statement, spelling it ID. Now, if I say this, notice over in the browser, none of my other console logs that came prior to this if statement were ever run. In fact, it seems like this syntax error completely ignored the fact that it was inside of a try-catch block, resulting in a completely broken program.
This brings up a great lesson for us. Most syntax errors can't be caught with a try-catch. That's because a JavaScript file is actually read in two passes. The first pass parses the syntax and collects function definitions, and the second pass executes the code.
Therefore, this syntax error is caught in the first pass before we're ever actually executing the try catch statement. And it just kills our program altogether. This is actually a good thing though, because this syntax error couldn't happen based on data that's flowing through our app at runtime. This is something that can only happen as we're in development.
So it's really a good thing that things stop and point out that we're not doing something right. In fact, our IDE can even point out this error for us. Notice the red squiggly line here under the bracket. It says that a semicolon was expected here, because ID seems to be a function name, or we're passing in this as a function argument.
A little further inspection would let us know, no, this should be an if statement instead. Okay, so that is a syntax error. Probably one of the most common error types that you're going to run into are type errors. Type errors occur when the type of your variable is incompatible with things you try to do with it.
For example, here I have a variable that is defined as a number, but then I try to use a method that doesn't exist on number types. Pad start is only valid for strings. padStart is not a function and it is a type error. A common cause of type errors that you might run into is defining a constant with the const keyword and then trying to reassign the value of that constant.
I do this accidentally all the time because I default to using the const keyword when defining my variables. Then if I see a type error in my browser console assignment to constant variable, I'll just go and update my const to let instead. And this will always fix that issue if I do indeed actually want to override the variable. Finally, another type error that you will run into quite often is cannot read properties of null.
The reason for this is because you have some variable that you expect to be an object. and you go to read or write to a property on that object, but the variable turns out to be null or maybe undefined, for one reason or another. Either way, this is a common type error that you'll run into. So far, you've seen how to manually throw a generic error, and you've seen how JavaScript will throw built-in error types when you do something incorrectly.
In the next lesson, I'll show you how to create your own custom error types.