Handling 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

1. Check the console for errors;
2. Find the file and line number of the error;
3. Look for the "Squiggly" in VS Code:
4. 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

• Declare a variable with const or let before use.
• Double-check spelling of the variable name

  const fullName = 'Buffy the Vampire Slayer';
  console.log(fullname); // error

Problem: const declared but not assigned

Chrome

Solutions

• When using const, assign a value with =, OR

  const age; // error

• Declare the variable with let instead

  let age; // Totally fine!

Problem: Re-assigning a const variable

Chrome

Solution

• Declare the variable with let instead:

  const age = 46;
  age = 47; // error

  let age = 46;
  age = 47; // Totally fine!

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.

1. Understand what you're trying to accomplish.
2. Understand what your code is doing.
3. Form a hypothesis or two before looking at code.
4. Identify key variables or conditions with console.log().
5. When in doubt: find a 2nd pair of eyes;
6. 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.

Further resources

• MDN: What went wrong? Troubleshooting JavaScript
• 15 Common Beginner JavaScript Mistakes
• Video: Best Debugging Tips For Beginners
  • Companion Video