Reading and Repairing an Error

Welcome back to Writing and Running Your First JavaScript Programs! We have printed messages and left ourselves tidy notes. Now we tackle something every programmer meets, usually within the first ten minutes: the error message.

So far our programs have run cleanly, but we have probably already noticed how picky JavaScript is. One missing quotation mark and the whole thing stops. That is not a sign of failure; it is a conversation. JavaScript is telling us exactly what confused it and where.

In this lesson, we will learn how to:

• Read an error message and find the line number it points at.
• Recognise the three mistakes we are most likely to make right now.
• Follow a simple routine to repair the line and run again.

By the end, an error will feel less like a wall and more like a signpost.

Let's start with the most important idea in this lesson: errors are a normal part of programming. Experienced programmers see them many times a day. The difference between a beginner and an expert is not that the expert never causes errors; it is that the expert reads the message, fixes the line, and moves on without a second thought.

Because JavaScript reads our code so literally, a tiny slip is enough to stop it. The good news is that it never stops silently. It reports what confused it and the line where it noticed - which is usually, though not always, the line with the mistake.

Here is a program with a mistake in it. The second line is missing its closing quotation mark:

console.log("Order received.");
console.log("Thank you for visiting);

When we click Run, instead of two messages we get this:

/usercode/FILESYSTEM/main.js:2
console.log("Thank you for visiting);
            ^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Invalid or unexpected token

Let's read it from the top, because every part is useful:

• The first line names the file, and after the colon, the line number where JavaScript got confused: line 2.
• The second line shows us that line of code, so we do not even have to go looking for it.
• The carets ^^^ point at the part of the line where JavaScript noticed the trouble - usually the mistake itself, sometimes the first thing after it.
• The last line names the kind of error and gives a short description. SyntaxError means "this is not valid JavaScript". The description, Invalid or unexpected token, is JavaScript's way of saying it hit something it could not make sense of.

This is what Node.js prints; the exact wording varies a little between versions, but the shape is usually the same: file and line number first, the offending code, then the error name. The line number is the part to look at first.

Notice one more thing: Order received. did not print, even though that line was fine. A SyntaxError is found before the program starts running, so nothing runs at all. Repairing line 2 brings line 1 back too.

We have just seen this one. Every piece of text needs a quotation mark at both ends. Leave off the closing one, and JavaScript keeps reading, looking for the end of the text, and eventually gives up in confusion.

The repair is to add the missing mark right where the text should end:

console.log("Order received.");
console.log("Thank you for visiting!");

Now both lines are valid, so JavaScript runs the whole file and both messages appear:

Order received.
Thank you for visiting!

A quick habit that prevents this: whenever we type an opening ", type the closing " straight away, then go back and write the text in between.

The parentheses around what we print need a partner too. Here the closing ) has gone missing:

console.log("Thank you for visiting!";

Running this produces another SyntaxError, but read the description on the last line:

/usercode/FILESYSTEM/main.js:1
console.log("Thank you for visiting!";
            ^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: missing ) after argument list

This time the description is wonderfully specific: missing ) after argument list. JavaScript is saying that after the thing inside the parentheses, it expected a ) and found a ; instead. The word argument is just JavaScript's name for whatever we put inside the parentheses; we do not need to worry about it beyond that.

The repair is to put the ) back before the semicolon: console.log("Thank you for visiting!");.

The third mistake looks different. Here console has lost a letter:

console.log("Line 1");
consle.log("Line 2");

This time the output looks a little different:

Line 1
/usercode/FILESYSTEM/main.js:2
consle.log("Line 2");
^

ReferenceError: consle is not defined

Two things stand out. First, this is a ReferenceError, not a SyntaxError: the line is valid JavaScript, it just refers to a name, consle, that does not exist. is not defined means "I have never heard of this".

Second, look at the top of the output: Line 1 did print. A ReferenceError only happens when the program reaches the faulty line while running, so every line before it has already done its job. That is a helpful clue in a longer program - the last line of output we see tells us roughly how far the program got before it stopped.

The repair is to fix the spelling: console.log("Line 2");.

All three mistakes are fixed with the same four steps:

1. Read the line number in the first line of the error message.
2. Find that line in main.js, and read it slowly, character by character. Check that every " has a partner and every ( has a ), and that every word is spelt the way JavaScript expects. If the line looks fine, read the line just before it - a missing mark can only be noticed a little after the place it belongs.
3. Make one repair. Change the one thing that looks wrong, and nothing else.
4. Run again. If the error is gone, great. If a new one appears, it is a different mistake - start the routine again from step 1.

The last step matters more than it looks. Fixing one thing and running again is far faster than staring at the code trying to spot everything at once. Running is free, and the error message will happily guide us to the next problem.

Well done! In this lesson, we learned that errors are a normal part of writing code, and that an error message always tells us the file, the line number, the offending code, and the kind of error. We met the three mistakes we are most likely to make right now - a missing quotation mark, a missing parenthesis, and a misspelt word - and saw that a SyntaxError stops the program before it starts, while a ReferenceError lets the lines before it run.

Most of all, we learned the routine: read the line number, find the line, make one repair, run again. The practice tasks ahead hand us some broken programs on purpose. Let's go and fix them!