The Five Kinds of Bug

Bugs come in a small number of shapes. Recognising the shape tells you where to look.

What you will learn

Name the common kinds of bug
Read an error message calmly
Find a bug by checking your assumptions

The idea

A bug just means the computer did exactly what you wrote, and what you wrote was not what you meant. There is nothing mysterious happening, and it is not a sign you are bad at this. Debugging is a search, and searches have a method.

Why does this matter?

You will spend more of your career reading and fixing code than writing new code. Being unhurried and systematic with errors is one of the biggest differences between a beginner and a professional.

A real-world analogy

A blown fuse. You do not rewire the house. You check one thing at a time until you find the section that is dead.

See it in code

Five shapes of bug

// 1. Syntax: a typo the computer cannot even read
// console.log("hi"

// 2. Reference: using a name that does not exist
// console.log(totl);

// 3. Type: the value is the wrong kind
console.log("5" + 5);

// 4. Logic: it runs, but the answer is wrong
function average(a, b) { return a + b / 2; }

// 5. Off-by-one: nearly right, one step out
const items = [1, 2, 3];
for (let i = 0; i <= items.length; i++) { /* runs one time too many */ }

Line by line

return a + b / 2;
Division happens before addition, so this is a + (b/2). The fix is brackets: (a + b) / 2.
i <= items.length
Positions go 0, 1, 2 for three items, so the last valid index is length minus one. Use < not <=.

Worth knowing

Read the error message properly before changing anything. It usually names the file, the line, and the kind of problem. Beginners often skip past it because it looks intimidating — it is actually the best clue you get.

What do you think happens?

average(4, 6) returns 7 instead of 5. What kind of bug is that?

Have a guess before you read on. Guessing wrong is part of learning it.

Try it yourself

Fix the average function so it returns the real average, then check it with two easy numbers you can work out in your head.

The proper words for it

Syntax error: The code cannot be read at all — usually a missing bracket or quote.
Runtime error: It started running, then hit something impossible.
Logic error: It runs happily and gives the wrong answer.
Stack trace: The list of function calls that led to the error, newest first.

Where you'll meet this

On a real team, the first question about any bug is: what did you expect, what happened, and what is the smallest example that shows it? Answering those three usually finds the cause.

Lesson recap

A bug means the instructions did not match your intention
Read the error message first
Check one assumption at a time
Logic errors are silent, so test with values you can verify
Getting bugs is normal, not a verdict on you