JavaScript 101 /errors

By now you have probably run into errors once or twice. It is important to understand that errors aren't bad. They are not the enemy. In fact, they are your "friend". A good error (sadly not every error's good) gives a good explanation of exactly what's going wrong and even where.

Fixing bugs/errors takes time but you will get a lot better at this. And yet even experienced programmers encounter bugs that even take hours or days to fix. Don't worry though, it's all part of the fun :)

This page will show you a lot of possible errors that you have never seen before which can make it look difficult. You don't have to look at all of the errors but you can search through the document using CTRL + F in the future to look up specific errors.

Editor errors

When you're testing your code in the browser you should have resolved everything in the editor by now. Things might be going wrong that the editor doesn't know about and these will be shown here.

These are the first errors you see. They pop-up in the editor itself as you do something wrong.

Don't try to convince yourself that you did everything right. If you see an error, you did something wrong. It's that simple. Doing something wrong however isn't the end of the world. It happens to the best of us. Just try and look for it. You get better at it by just doing.

Sadly the editor errors are some of the worst errors as they often don't tell you what you did wrong but what's going wrong because of it.

Some examples..

Encounter one? Let me know! This problem should be quite lessened due to the "Error Lens" extension.

Console errors

Some examples..

var x = y;

ReferenceError: y is not defined at student-code.js:1:9

In this case you're trying to get a value of something that doesn't exist. 'y' is not defined. You have not made a variable called 'y'. Or maybe you just want 'y' to be a string?

The error line also tells you that in this case the error's on line 1, position 9.

var x: 4;

SyntaxError: Unexpected token ':'

You have a ':' in a place where it doesn't belong. It didn't expect that.. :)

var result = "hello" * 2;

NaN

You're trying to do something mathematical with something that's NaN. Not a Number.

console.log;

TypeError: console.log is not a function

You're trying to call something as a function which is not a function. In this case, console.log is a function, but you're not calling it as one. A function always needs parentheses () to be called.

document.getElementById("exampleId").innerHTML = "Hi";

TypeError: Cannot set properties of null (setting 'innerHTML')

You're trying to access an element that doesn't exist in the DOM. Make sure the element with the specified ID exists before trying to manipulate it.

Console.log("hi");

ReferenceError: Console is not defined

You might think that something's wrong with the console but JavaScript is case-sensitive. 'Console' is not the same as 'console'.

Some more that you'll start to run into soon..

if(true { console.log("hi"); }

SyntaxError: Unexpected token '{'

Again, it didn't expect a certain character. In this case it doesn't mean that the character is bad, it just didn't expect that yet. It needed something else first.

var x = null; x.toUpperCase();

TypeError: Cannot read properties of null

You're trying to interpret data that's "null", which is impossible. You can't do something with nothing.

var obj = {}; console.log(obj.name.length);

TypeError: Cannot read properties of undefined

You're trying to read data of something that has not been defined. The object is empty, it has no name and yet you're trying to access that.

var num = 5; num();

TypeError: num is not a function

You're trying to execute something as a function which is not one. Notice that the error message says exactly the same as with console.log but the case is different. log() is an actual function which you're calling wrong (as a property). num is just a number, not a function and you're trying to call it as a function.

var obj = { name: x }; obj.name();

TypeError: obj.name is not a function

Of course it says that! It's a property.

document.body.innerHTML = obj;

In HTML you see: [object Object]

You are trying to visualise an object, which is not possible. You need to target specific things (probably a property) inside the object.

if(x = 5){ console.log("hi"); }

A very common mistake that will throw you off. In this case, you're using a single equals sign '=' which is an assignment operator, instead of '==' or '===' which are comparison operators. So you're not checking if x is equal to 5, you're actually changing x to 5.

Code layout

You want clean code for many reasons. When it's easier to read you save time, stress and energy now and even more when you have to check on it later. Also, other people won't get mad at you for having horrible code. Clean code is just as important as writing working code.

What's considered clean?

• Breathing room. Don't let everything stick to eachother.
• Not enough spaces.
• Too many spaces.
• Clear, logical names. With camelCasing.
• Properly indented code (using tab).
• Comments to describe functionality that's not easily scanned.

You can comment out a line by pressing CTRL + / (works in every language) or by simply typing // in front of your comment

Some more rookie mistakes & solutions:

• When working in VSC, always open the project folder, not just a file.
• Save all your files in the cloud. Let this be the first thing you do, don't postpone it.
• When you have an error, don't panic. Read the error message for it will be thy salvation.
• Don't just copy-paste code... Best case you have something you don't understand and can't adapt now.
• Not making use of your new best friend - the console.
• CTRL + S
• Got more ideas? Let me know!

Quiz time!

Next: JS Basics - math