Errors & Debugging

There are three useful kinds of failure to distinguish. A syntax error means the code cannot be parsed, such as an unclosed quote. A runtime error happens while executing, such as reading an undeclared name. A logic error runs successfully but gives the wrong result.

Read the error’s name and message, then inspect the indicated line and the line before it. Syntax mistakes are sometimes reported after their cause. For a logic error, write expected versus actual output and reduce the input to the smallest example that still fails. Inspect one changing value at a time with console.log.

A try block lets you handle an exception in catch. Catch a problem when you have a useful response: report invalid imported data, for example. Do not surround everything with an empty catch; that hides defects and makes a broken program look successful. throw new Error("message") deliberately reports a failure: new Error(...) creates an error value containing your message, and throw stops the current work and passes that error to a matching catch. In catch (error), error is a local name for the caught value; error.message reads its message. Without a matching catch, the editor reports the failure and stops that run.

Predict before running

The example throws on purpose and handles it. Which line is skipped? Replace the thrown error with a normal log and compare the order.

try {
  throw new Error("Missing topic");
  console.log("This line is skipped");
} catch (error) {
  console.log(error.message);
}

console.log("Ready for another attempt");

Missing topic
Ready for another attempt

Find the first wrong step

A wrong final total is a symptom. Trace the intermediate values until the first mismatch appears. Text from a form is still text even when it looks numeric. Logging typeof alongside a value helps distinguish 20 from “20”. Fix the conversion at the boundary instead of scattering conversions through every calculation.

const input = "20";
let total = 10;

console.log(typeof input);
console.log(total + input);
total += Number(input);
console.log(total);

string
1020
30

Reduce a failure to the first wrong value

Start debugging at the first value that differs from your expectation, rather than adding random edits near the final output. A program can fail by throwing, by choosing the wrong branch, or by calculating the wrong result while running normally. The last case needs a known expected answer.

A catch is a policy decision, not a way to make the program look successful. Catch a failure where you can produce a meaningful response. After a failed conversion or operation, avoid continuing as if a valid new value had been produced.

const count = 3;
const minutes = "20";

console.log("raw:", minutes);
console.log("joined:", minutes + count);
console.log("total:", Number(minutes) * count);

raw: 20
joined: 203
total: 60

The wrong result begins at the addition of text and a number. The final multiplication demonstrates the intended calculation. Keep a tiny input with a hand-computable answer while fixing the real function.

let title = "Previous plan";

try {
  throw new Error("New plan unavailable");
  title = "New plan";
} catch (error) {
  console.log(error.message);
}

console.log(title);

New plan unavailable
Previous plan

The assignment after throw never runs. Preserving the previous title is different from returning a successful empty title. State the intended recovery behavior before deciding where to catch.

Try the rule on new inputs

Introduce one error at a time: a misspelled variable, a wrong operator and a rejected operation. Identify which is a runtime exception and which needs an expected-value check. Remove temporary logs after the cause is understood.

Your turn

const minutes = [20, 25];

for (const value of minutes) {
  let total = 0;

  total = total + value;
  console.log(total);
}

const minutes = [20, 25];
let total = 0;

for (const value of minutes) {
  total = total + value;
}

console.log(total);

45

What you should be able to explain

• What is the smallest input that reproduces your bug?
• What did you expect, and at which step did reality differ?
• After fixing it, what nearby case will you rerun?