Key Concepts

Review core concepts you need to learn to master this subject

ReferenceError

MDN JavaScript error documentation

SyntaxError

TypeError

Javascript error stack trace

Javascript documentation

Runtime Error in JavaScript

The throw Keyword in JavaScript

See more

ReferenceError

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

A ReferenceError is a type of error thrown when a variable is used that does not exist.

To prevent this error, all variables should be properly declared beforehand.

MDN JavaScript error documentation

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

The MDN JavaScript error documentation contains information about JavaScript error types, properties, and Methods. The document shows how to prevent and create these errors. This document is most helpful when developers come across an error they are not familiar with.

SyntaxError

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

A SyntaxError is a type of error that is thrown when there is a typo in the code, creating invalid code - code which cannot be interpreted by the compiler.

Some common causes of a SyntaxError are:

  • Missing opening or closing brackets, braces, or parentheses
  • Missing or invalid semicolons
  • Misspelling of variable names or functions

TypeError

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

A TypeError is a type of error thrown when an attempt is made to perform an operation on a value of the incorrect type.

One example of a TypeError is using a string method on a numerical value.

Javascript error stack trace

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

An error stack trace tells a developer that it has detected an error within the code. Along with, which line to find the error, what type of error has occurred and a description of the error.

Javascript documentation

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

Many times we can track down bugs, but still, be confused about how to solve it. During these situations, we can look at documentation. For JavaScript, the MDN JavaScript web docs is a powerful resource. If we are still confused after looking at this we can go to StackOverflow - a question and answer forum where programmers post issues and other programmers discuss and vote for solutions.

Runtime Error in JavaScript

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

A JavaScript runtime error is an error that occurs within code while its being executed. Some runtime errors are built-in objects in JavaScript with a name and message property. Any code after a thrown runtime error will not be evaluated.

The throw Keyword in JavaScript

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

The JavaScript throw keyword is placed before an Error() function call or object in order to construct and raise an error. Once an error has been thrown, the program will stop running and any following code will not be executed.

Javascript Error Function

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

The JavaScript Error() function creates an error object with a custom message. This function takes a string argument which becomes the value of the error’s message property. An error created with this function will not stop a program from running unless the throw keyword is used to raise the error.

javascript try catch

// Example of a ReferenceError in JavaScript let firstName = "John"; // Here, we get a ReferenceError because lastName has not been declared console.log(firstName + lastName);

A JavaScript try…catch statement can anticipate and handle thrown errors (both built-in errors as well as those constructed with Error()) while allowing a program to continue running. Code that may throw an error(s) when executed is written within the try block, and actions for handling these errors are written within the catch block.

Chevron Left Icon
Debugging JavaScript Code
Lesson 1 of 2
Chevron Right Icon
  1. 1
    Any programmer will tell you that it is incredibly common to be making great progress working through a coding problem when all of a sudden an error like this gets thrown at you: /home/ccuser/work…
  2. 2
    We’ll start this lesson by taking a closer look at the most straightforward way to know your code isn’t working as expected: errors! You might recognize errors as the scary red text that appears …
  3. 3
    Now that we know what information we can get from an error stack trace, let’s take a look at an example. /home/ccuser/workspace/learn-javascript-debugging-code/app.js:1 myVariable; ^ ReferenceErr…
  4. 4
    Now that you can identify the type of error from an error stack trace, you might be wondering what the different types of errors mean. Here are three common error types: * SyntaxError: This er…
  5. 5
    Here’s a process for efficiently working through your code’s errors one by one: 1. Run your code. Using the first error’s stack trace, identify the error’s type, description, and location. 2. Go t…
  6. 6
    Errors thrown by the computer are really useful because they identify the bug type and location for you right away. However, even if your code runs error-free, it is not necessarily bug-free. You …
  7. 7
    Let’s synthesize our workflow from the previous exercise into a reusable set of debugging steps. 1. Go to the beginning of the malfunctioning code. Print out all starting variables, existing value…
  8. 8
    Sometimes once you’ve tracked down a bug, you might still be confused on how to fix it! Whenever you want to know more about how JavaScript works and what it can do, the best place to go is **docum…
  9. 9
    At this point, you might be thinking to yourself, documentation is good and all, but there’s no way it will solve all of my issues! And we totally agree. All programming languages have difficult pr…
  10. 10
    You just learned a lot of techniques for helping you get unstuck in all debugging situations. Congratulations! Let’s synthesize everything you learned into one debugging process. 1. **Is your code…
  1. 1
    There are two categories of programming mistakes: those that don’t prevent our code from running and those that do. Sometimes, we’ve written code that successfully returns a value but a different…
  2. 2
    Errors contain useful messages that tell us why our program isn’t working or why the error was thrown. When an error is thrown, our program stops running and the console displays the error messag…
  3. 3
    JavaScript errors are objects that have a name and message property. Previously, we’ve seen how built-in errors alert us about common mistakes in our code. But, what if we need an error message tha…
  4. 4
    Creating an error doesn’t cause our program to stop — remember, an error must be thrown for it to halt the program. To throw an error in JavaScript, we use the throw keyword like so: thro…
  5. 5
    Up to this point, thrown errors have caused our program to stop running. But, we have the ability anticipate and handle these errors by writing code to address the error and allow our program to…
  6. 6
    In the previous exercise we caught an error that we threw, but we can also use a try…catch statement to handle built-in errors that are thrown by the JavaScript engine that is reading and eval…
  7. 7
    Great job with handling errors! In this lesson we went over: How mistakes in programming leads to errors. Why errors are useful for developers. * Errors will prevent a program from executing u…

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo