Common JavaScript Errors

[00:00:00]
>> WebDevSimplified: So the final section that I want to talk about is all about debugging. I'm going to be talking about some common errors you may run into, as well as how you can use your browser debugging tools and even VS Code for debugging. So the very first thing we need to understand is that there's three main types of errors inside of JavaScript. First of all, we have syntax errors. These are mistakes that are in your code, how you wrote it that prevent your code from actually running.

[00:00:20]
For example, if you spell a variable name wrong or you forget to put a parenthesis inside your function, these prevent your code from running, and oftentimes when you have these errors, you'll notice you get red squiggly lines inside your code telling you what these particular errors are. The next type of error is a runtime error. These are problems that don't show up in your code in the editor as red squiggles, but as soon as you run your code, it actually crashes your program or throws different errors.

[00:00:44]
This often happens when you try to use certain code in a way that is not expected. For example, you try to call a function that doesn't exist or something along those lines. The last type of error that you run into is by far the most difficult to debug, and these are logical errors. Essentially, it's when you write out code that runs perfectly. There's no errors in your browser. But the code doesn't do what you expect it to.

[00:01:04]
Maybe you have an if statement backwards or something along those lines. So instead you implemented a logical error or a bug in your code, even though the rest of your code still runs fine, it just doesn't do what you actually want it to do. So we're going to go through each of these different sections and how to find them. First, I want to talk about syntax errors because they're the easiest to find, but also the most common when you're first getting started.

[00:01:24]
For example, if you forget to put a comma inside of an object or an array, or maybe you forget to put some brackets in the correct place, you're going to get these red squiggles in your code. I'll just copy this over to kind of show you exactly what I'm talking about. You can see here we have these red underlines, and when I hover over it, you can see comma expected. It's specifically telling me, hey, I expect there to be a comma, and that's a good indicator that, hey, maybe I forgot to put a comma somewhere in my code.

[00:01:47]
So whenever you see those red squiggly lines in your code, it means that you have some type of syntax error where you accidentally wrote your code incorrectly. So those, like I said, they're the easiest to find and solve, but again, some of the most common. The next type of error, these are much harder to find are runtime errors. So your code may work entirely fine, but as soon as you run it, it actually doesn't work as you expect it to.

[00:02:08]
So let's come over here with this type of code. When I give this a quick save, you'll notice there are no red squiggles or errors in my code anywhere, but when I run my code, I get an error in the console of my browser because that's where the error is happening. It's happening when I run my code. And the reason this error is occurring is because I spelled this username variable wrong. This should be a capital N instead of a lowercase n.

[00:02:30]
Doing that will actually fix the particular problem. There we go. But again, these types of bugs are much harder to find because you accidentally type something in your code wrong or do something wrong, and it doesn't show up as an error until you actually run your code. So again, these are most often caused by variable typos, or if you have different type errors, for example, this git user is returning to me null, so you're trying to access the name property on something that's null.

[00:02:53]
Obviously that's not great, or you're trying to redefine a constant variable. All those different things could cause runtime errors. The next type of error is going to be a logical error, and these, like I said, are not technically errors with your code. Your code will still run fine, but there may be an error in how your actual code works itself. It doesn't do what you expect. A common one is an off by one error in your loop.

[00:03:15]
You may be looping one too many times or one too few times than you actually want to, so your code doesn't execute as expected. It still runs and there's still no errors, but it doesn't do what you expect it to. Or probably one of the most common errors that you may run into is when you're doing an if check, you may accidentally use a single equal sign instead of a triple equal sign. I'll show you exactly what this code looks like because this is actually a really common error that I've made a lot myself back when I was first learning.

[00:03:38]
You'll see here I have a variable called name which is equal to Kyle, and I'm comparing that name and setting it equal to Sally, and then finally I'm logging out is Sally if their name is Sally. Now let me just give that a quick save, and let's change this to my name or something, just to get rid of some of those underlines that we have in our code. There we go. Oops. There we go. So now, essentially what's happening, I have a constant variable right here, and actually let's change it to a let variable because it'll be even more clear what's going on.

[00:04:07]
And you'll notice when I run my code, even though my name is Kyle, it's still logging out is Sally, and actually, if I log out my name, it's printing out Sally as the name. The reason for this is because I'm using a single equal sign, and in JavaScript, a single equal sign is always used for redefining a variable. So I'm redefining my name to be the value of Sally. And when you redefine a variable, essentially all it's doing is checking to see what our value of our variable is, which is Sally.

[00:04:34]
Sally is a truthy value, so it runs the code inside our if statement. If you see something like this, it just means that you forgot to put your proper triple equal sign check in here. Once I change that, you can now see it prints out Kyle, and this is Sally code no longer runs. Very common mistake that I see a lot when I was first starting as well as other people that get started programming. Now some DOM related errors that you may run into is if you try to access an element on the page, but that element doesn't actually exist on the page, you're going to get an error trying to use that particular element.

[00:05:02]
So just make sure if you're trying to access an element and you're not sure if it's there or not, just throw a simple if check to see if that element exists or not. Another common error is you forget to add the deferred attribute to your script tag, which means now your script loads before the document even loads, which means nothing's available. So when you try to access like a form, for example, even if you know it's in the HTML, it won't work because this script tag will load before the rest of your code.

[00:05:26]
Again, just make sure you're using the deferred attribute for that. So that's just a few examples of some of the common errors you may run into, but now I want to talk about how do you actually understand what an error message means. This is one of the most important things you can learn when it comes to programming. So here is a type of error message that you may run into, a very common one. TypeError: cannot read property name of null, and it also says at and it tells you a bunch of information down here.

[00:05:48]
So let's break down every single part of this error message that way when you run into similar error message, you can actually figure out what's going on. The first thing, the thing before the colon, this tells you the name of the error or the type. In our case, this variable or this error is called a TypeError. So at least you know, okay, this is the general type of error that I'm running into, and if you try to Google things, you can say I'm getting a TypeError.

[00:06:10]
After the colon is a message that tries to help you describe a little bit more why that error's occurring. So here we're saying that, okay, cannot read property name, so that means we're trying to access the property name on an object. But for some reason our object has a value of null. So that's what this little error message right here is trying to tell you. The second section is just a description telling you what's going on.

[00:06:28]
Sometimes it's helpful, sometimes it's really not that helpful. The part that is helpful though is everything that comes afterwards, which when I first started learning, I pretty much ignored all this stuff because it looks really confusing. But if we break it down really quickly, this app just tells us essentially, okay, we have some code it's running at this point. This first section is the name of the function we're inside of.

[00:06:51]
So our code is running inside of a function called getUserName. And then this final section after here tells you exactly where that code is. It tells us it's in a file called script.js on line 15 of that file in column number 20. So it'll even tell you exactly what character of your code caused this particular error to show up. Generally that column number doesn't matter, but this line number as well as the file number is really important because now if I know in script.js on line 15 I have an error, I can go into my code, I can find line 15, and I can look at what the code is doing there to see why that particular error is occurring.

[00:07:23]
Oftentimes that's enough to find the error that I'm looking for, but sometimes looking at line 15 doesn't actually solve the problem. So we need to dive a little bit further, and this actually renders out to us what's called a call stack or a stack trace, essentially all the different functions we called to get to this point. So first we're inside the getUserName function, but somewhere we call that getUserName function.

[00:07:45]
In our case, it is called inside of a function called main. So we have a brand new function main, which is inside of our script file on line 8 column 5. So at line 8 of our code we call this main function. So if we kind of emulate what our code would look like, we have a getUserName function, let me just make sure we get that typed out. There we go. So you have this getUserName function that inside of here is throwing our error somewhere we don't really know.

[00:08:13]
Then we have a main function. And inside this main function we're calling getUserName just like this. And then finally somewhere else we're calling our main function. That's kind of what this stack trace is supposed to be telling us. So we're at that getUserName function that is being called inside of our main function, and you'll notice this one doesn't have a function name. It just says at our script file.

[00:08:32]
That means we're at the global scope. We're essentially not inside of a function, we're just right here. So here this is telling us in line 25 of that script file is where we're running into that particular problem. So the most important thing to break down from these error messages, we have the type of error that sometimes helps you, not usually though. We have the error message which half the time is useful, half the time isn't.

[00:08:52]
And then finally we have this stack trace which this first row is always the exact line number where the error occurred. This is incredibly useful. And then if you can't figure out the bug from there, you can sometimes work backwards because sometimes a previous function you called is actually the reason you caused the error inside the function you're in. So we can work backwards through each one of these functions to figure out where we are.

[00:09:12]
Now here's just kind of a few common error messages that you may find and exactly what they mean. First of all, ReferenceError: variable is not defined. That just means you're trying to use a variable before you declare it. So for example, we have console.log(a) and then below that let a = 1. That's going to give us that ReferenceError that I was talking about. Next thing that we're going to have is a common error is TypeError: cannot read property X of undefined or null.

[00:09:38]
That means you're trying to access something on a null or undefined property. So for example, I can just say const a = null. Normally this would be like some object of some form, and I'm not sure what it is, but if I just say like a.name, I'm getting error right here. TypeError: cannot read property of null. So this means you're trying to access something on an object or value that is null. Next, TypeError: X is not a function.

[00:10:00]
That means you're trying to call something that's not a function. So again, if I have a variable and I try to call it like a function, I'm going to get that TypeError. This is not a function. We also have syntax errors, that just means you have a typo in your code. And finally, a RangeError: maximum call stack size exceeded, that means you ran into an infinite loop when you're doing some type of recursion.

[00:10:19]
So just some kind of quick tips for debugging. Whenever you see an error message, try to actually go and read it in depth. Usually when I was first starting, if I saw an error message, I just glanced at it real quick, didn't see anything I found useful and ignored it. But if you actually read through all the different details of what's going on in each line and everything it's telling you all that information, it's pretty much trying to point you directly to where the error is.

[00:10:37]
You just have to take the time to read the message to figure out where it's actually pointing you. Next, if you have an error, check for typos. That's one of the most common places you're going to run into errors, things like variable names and function names being spelled incorrectly. And also you can use console.log to help you debug issues by putting a bunch of console.logs in your code in various different spots.

[00:10:57]
You can see what's going on inside your code to try to figure out, okay, you know, here's what items look like here, here's what each item is, here's what my total looks like, and try to maybe figure out what's going on in your code. Then finally we can come in here and we can comment out different code. So for example, if I'm having an error inside my code and I just have a bunch of lines of code, you know, something like this, a bunch of different code, I don't know where my error is.

[00:11:20]
I could just say, you know what, I'm going to comment out this big chunk of code, and if I run my code and the error still occurs, well, I know it's not in here. So let's try commenting out this section of code. If my error still occurs again, it's not there. Finally, I'll comment out this code right here, and if now my error no longer appears, I know my error was somewhere in that section of code I commented out.

[00:11:39]
So this is a great way to kind of isolate where that error is showing up. And finally, whenever you're writing code, always keep the browser console somewhere open on the side of your screen because that's going to show you those error messages that show up on the runtime, so it's easy to find where those errors occur.