Oh, no, errors! (And how to deal with them) — Programming fundamentals

• Lesson notes
  • 4 types of errors
• Lesson transcript

Lesson notes

4 types of errors

1. Syntax Error. Incorrect use of the language. Often — extra or missing brackets or qutation marks. What to do? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.
2. Reference Error. Using a name that doesn't really exist. What to do? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.
3. Type Error. Using the wrong type, e.g. trying to call a number constant like a function. What to do? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.
4. Logic Error. Your code does the wrong thing, but the program runs and does not produce errors of types 1-3. Logic is broken. What to do? Review your code, make sure it does what it supposed to do.

Lesson transcript

You're having a party, and you're out of snacks, so you ask your friend to get some.

— Hey, could you go to the store and get some snacks, please?

And she says:

— What exactly?

And you say:

— You know, chips or something. We're out of snacks.

And she says:

— How many bags of chips do you want me to get?

And you start feeling funny already:

— Whatever, like, 5 bags.

— What kind of chips?

And you do this thing with your eyes and say "ah forget it", or go full on and describe the task in detail: "Go get 5 medium sized bags of bacon-flavored potato chips."

And 10 minutes later she comes back empty handed and says "they didn't have medium sized bags".

There are certain stereotypes about "computer people", and being this precise and kind of ridiculously explicit is one of them. Many think of people like that as being good at math or something.

The reality, of course, is more complex than that. There are no two types of people, there's a virtually infinite specter of personalities. And for certain people, computer programming comes a little bit more naturally because computers are absolutely precise and ridiculously explicit. This doesn't mean that if you don't see yourself as a "math person" you won't become a good developer. It only means you have to actively recognize and understand the way computers work.

This kind of behavior of computers leads to many errors. If you type console,log console comma log instead of console dot log, JavaScript will say "I have NO idea what you mean".

You will make mistakes and your programs will have errors. That's life. Every single computer programmer makes mistakes, and it doesn't really matter. What matters is how you deal with errors. Dealing with them is the essential skill. This makes programming unlike most other jobs: mistakes are guaranteed, you cannot avoid them completely, and dealing with mistakes is part of your job.

This "comma instead of dot" kind of mistake is the easiest to spot and to fix. It's a "syntax error" because incorrect symbol like this breaks the syntax rules of the language.

When you run a program with that kind of a mistake, JavaScript interpreter — the thing that runs your JavaScript programs — will complain: SyntaxError, and will point you to the place where it thinks the problem is.

const cube = (num) => {
  return num * num * num;
})

→ node test.js
/Users/rakhim/test.js:3
})
 ^
SyntaxError: Unexpected token )
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

Here we have a function definition, and in the end, there is a bracket. It shouldn't be there and it breaks the program, so JavaScript says: "SyntaxError: Unexpected token )". That bracket was unexpected.

Syntax error is like shouting nonsense. Nobody understands you.

The next kind of error is similar to syntax, but instead of breaking the syntax laws of the language you sort of break the syntax laws of your own code. Last time we've created a function called abs which returns an absolute value of a number.

→ node test.js
/Users/rakhim/test.js:1
 ads(12);
 ^
ReferenceError: ads is not defined
    at Object.<anonymous> (/Users/rakhim/test.js:1:63)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

If you call ads instead of abs, JavaScript interpreter will complain: ReferenceError: ads is not defined. You used a name that you think exists — but it doesn't really exist.

Multiple lines after that might seem intimidating, but they are actually there to help you. This is a stack trace — a sequence of function calls that lead to the error. When you run your program, even if it's tiny, it actually becomes a part of something bigger — a complex system of JavaScript programs that run to make your program alive. So, here you can see that the problem was in my file, the next line is the place where my code was called from, the third line is where that second place was called from, and we can go deeper still. It's like tracing footsteps backward — there's a problem, but we can go back one step at a time and see if we can find the reason.

We assume that this whole underlying system works fine, so the problem is in our code. When one of your functions calls another one, then you'll see that sequence of calls in the stack trace.

ReferenceError might occur with other constants too: for example, if your code has 10 * pi, but pi doesn't exist — you didn't create this constant with this exact name beforehand, then you'll get a ReferenceError.

Reference Error is like calling someone by a wrong name.

The next kind of error is when you confuse one thing for another. Look at this code:

const length = 12;
const num = length(54);

First, we create a constant. Remember, it's like giving a name to something, in this case — giving a name length to a number 12. Then, on the second line, we call a function length and pass an argument — number 54. But wait! length is not a function! It's a number. Numbers are not functions, not boxes that do stuff. And this is exactly how JavaScript will complain:

→ node test.js
/Users/rakhim/test.js:2
const num = length(-54);
            ^

TypeError: length is not a function
    at Object.<anonymous> (/Users/rakhim/test.js:2:13)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

This is a Type Error — the type of the thing you've used is wrong. JavaScript interpreter wouldn't tell you what the thing is, but it will tell you what it isn't. length is not a function.

Type Error is like asking your cat to do the laundry. You probably wanted to ask your roommate.

All of these errors — syntax, reference and type errors — are about wrong words. And all of them are explicit — you will see the error message and it will be clear what happened. And it's usually clear how to fix them:

1. Syntax Error? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.
2. Reference Error? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.
3. Type Error? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.

The final type of error we'll talk about today is the worst: Logic error. Say, we're writing a function that converts Fahrenheit into Celsius. To convert temperatures in degrees Fahrenheit to Celsius, subtract 32 and multiply by 5/9. For example: (50°F - 32) x 5/9 = 10°C.

const fahrToCelsius = (fahr) => {
  return fahr - 32 * 5/9;
}

Looks good, right? Let's run it, convert 50 degrees and print it:

console.log(fahrToCelsius(50));

And we get 32.22222222222222. Not 10. What happened? JavaScript didn't complain, there were no errors when running this code. The computer doesn't know what we're doing, so it just does the calculation as we asked it to. But the calculation is wrong — we made a mistake. We need to subtract 32 first, then multiply by 5/9. But we didn't put any brackets, so 32 got multiplied by 5/9 first, and then the result was substracted from the Fahrenheit temperature.

This is a Logic error. We didn't break any rules, we just did the wrong thing. This particular example was simple — we wrote a function, we ran it, and we see the incorrect result. But imagine if this function is just a small piece of a large system. A budgeting app at a large organization reports to the accounting department that they need to allocate additional $300,000 next month for the upcoming electricity bill. Emergency meetings gather, people get fired, the CEO starts drinking again. What happened?

It might be hard to find the problem: the air conditioning system expects the January temperature to be 32 degrees Celsius instead of 10 degrees because someone forgot to put brackets in their function.

Fighting logic errors is your responsibility 100%. It's sometimes hard, but expect a great relief and satisfaction in the end: ooooh, so THAT was the problem!

Now it's your turn to make mistakes! Continue to the the quiz and the exercise to feel the pain yourself.