Syntax, Runtime and Logic Errors

When code does not work, the first question is: what kind of problem is it? Each kind is found differently.

1. Syntax errors: the code cannot be read

The code is written incorrectly (a missing bracket, a stray comma), so the engine cannot even parse it. Nothing in that file runs.

1

const items = [1, 2, 3;      // SyntaxError: Unexpected token ';'

How to spot them:

• The console shows SyntaxError as soon as the page loads, with a file and line number.
• Your editor usually underlines them before you run anything.
• Common causes: missing ) } ], an extra comma, mismatched quotes, using a reserved word as a name, await outside an async function.

Fix: go to the line, and look at the line just before it too (the real mistake is often an earlier missing bracket).

2. Runtime errors: it breaks while running

The syntax is fine, but something throws an error while running. Execution stops at that line (unless you catch it).

1
2

const user = null;
console.log(user.name);   // error on purpose: TypeError: Cannot read properties of null

How to spot them:

• The console shows an error with a stack trace: TypeError, ReferenceError, RangeError…
• Read the message and go to the line (Reading Console Errors).

Typical causes: a value is undefined or null when you did not expect it, a typo in a variable name, calling something that is not a function, a failed network request.

3. Logic errors: it runs but gives the wrong answer

The hardest kind. No error appears, but the result is wrong.

1
2
3
4
5
6

function average(numbers) {
  const sum = numbers.reduce((a, b) => a + b, 0);
  return sum / numbers.length + 1;     // bug: an extra "+ 1"
}

console.log(average([2, 4, 6]));       // → 5   (should be 4)

How to find them:

• Print the steps: log inputs, intermediate values and outputs.
• Use the debugger: step through and compare each value with what you expect.
• Test with simple data where you know the right answer.
• Check assumptions: is that variable what you think it is? console.log(typeof x, x).
• Look at edge cases: empty arrays, zero, null, very large values, off-by-one at the ends of loops.

Common logic bugs

Compare the three kinds

Prevent logic errors

• Write small functions that do one thing.
• Name things clearly.
• Test with a few examples, including the edge cases.
• Use a linter (ESLint) to catch suspicious code.
• Read your code out loud, or explain it to someone (or a rubber duck). You often spot the bug mid-sentence.