Handling Errors
Syntax vs Logic Errors
- Syntax errors
- Errors in the rules of writing JS
- Easiest to debug
- Logic errors
- Code is broken but there are no errors
- Hardest to debug; sometimes takes hours
Is it a syntax or logic error?
- Syntax errors are explicit and usually give you a filename and line number;

- If there's no indication of an error, it's probably a logic error.
Find errors early with "Squigglies"
VS Code is your friend. It will underline errors with red, yellow and blue "Squigglies":

Hover over the squiggly for hints on what's wrong:

Diagnosing Syntax Errors
- Check the console for errors;

- Find the file and line number of the error;
- Look for the "Squiggly" in VS Code:

- If you still can't figure it out, copy and paste the error and search online. You will often find an answer on Stack Overflow.
Common Syntax Errors
Variable declaration and assignment
Problem: Using a variable that does not exist
Chrome

Solutions
Problem: const declared but not assigned
Chrome

Solutions
- When using
const, assign a value with =, ORconst age;
- Declare the variable with
let insteadlet age;
Problem: Re-assigning a const variable
Chrome

Solution
Dealing with the error stack
Sometimes an error will often cascade to multiple errors throughout an application:

- You can ignore most of the extra errors;
- Look for references to your filename;
- Depending on the situation, the real error will either be at the top or bottom of the stack
Debugging Logic Errors
There will be no error message, so these are trickier.
- Understand what you're trying to accomplish.
- Understand what your code is doing.
- Form a hypothesis or two before looking at code.
- Identify key variables or conditions with
console.log().
- When in doubt: find a 2nd pair of eyes;
- If no one is available: try Rubber Duck Debugging
See: How to Resolve JavaScript Logic Errors for more
Tony's most common logic error
- He's editing/running the wrong file.