Introduction

Dealing with errors is one of the most important aspects of programming - you can hardly find a large, complex codebase that doesn't contain any errors. The problem with these errors is the fact that only some of them can be caught by the interpreter and/or compiler - the rest of the errors will only surface under certain conditions.

With some programming languages, we have a compiler, which will check all the code for the most obvious mistakes and complain about them, before allowing the code to be compiled and executed. And then we have JavaScript, which is generally not compiled, but interpreted on the fly. This means that only common syntax errors can be caught when the code is executed.

Syntax errors

Consider this example, where I have made a pretty obvious syntax error:

alert("test 1");
alert("test 2);
alert("test 3");

As you can see, I forgot the ending double quote on the second line. This error is so obvious that the interpreter will stop execution of the code and throw an error immediately, resulting in none of the three lines ever being executed. The error message will depend on the interpreter, but typically look something like this:

Uncaught SyntaxError: Invalid or unexpected token "

This error is caught immediately because the JavaScript interpreter will have to make sure that the code is valid before trying to execute it, and with the syntax error I made, the code is simply not valid.

Runtime errors

But some errors are less obvious and are therefore not caught before the execution of the code starts. They are often referred to as runtime errors. Consider this example:

let user = 
{
	name:
	{
		firstName: "John",
		lastName: "Doe"
	}
};

alert(user.name.firstName);
alert(user.Name.lastName);

In the last line, I have made a small typo, writing "Name" instead of "name". Now since JavaScript is case-sensitive, this means that I'm trying to access a property (lastName) on an undefined object ("Name" is not defined - only "name" is).

However, since JavaScript is such a dynamic language, it can't be decided whether this is an error or not before the code is executed (during runtime). So if you try to run this code, you WILL see the first alert, and only after that is the execution stopped and an error is thrown:

Uncaught TypeError: Cannot read properties of undefined (reading 'lastName')

It's important to know the difference between these two types of errors, because you will quickly start writing more complex codes, and then you will realize that while the syntax errors are pretty easy to deal with, the runtime errors are way more tricky, because of their nature: You will only discover runtime errors when the specific part of the code is executed.

Fortunately for us, another difference between syntax and runtime errors is the fact that we can actually do something proactively about runtime errors: We can catch them and deal with them, allowing the execution of your code to continue even when something unexpected happens. We'll talk much more about this in the following articles.

Summary

Dealing with coding errors (often referred to as bugs) is a huge part of working with any programming language, including JavaScript, where runtime errors can halt the execution of your code and thereby cause your website/application to not work. Move along to the next article, where we'll talk about how we can catch and deal with runtime errors.