How to Resolve an Uncaught Reference Error in Javascript

The Javascript ReferenceError occurs when referencing a variable that does not exist or has not yet been initialized in the current scope. Reference errors in Javascript are of a few different types, with variations of each, that may get triggered in code. Some of these are discussed below.

What Causes Javascript ReferenceError

The Javascript ReferenceError is thrown when an attempt is made to reference a non-existing or out of scope variable. There are a few types of reference errors in Javascript with different variations of each. Some of these are:

• Undefined variables - Not defining a variable before referencing it is one of the most common triggers for reference errors in Javascript.
• Out of scope variables - Variables defined inside a function's scope cannot be accessed outside of it. If an attempt is made to reference an out of scope variable, a ReferenceError is thrown.
• Strict mode - Using strict mode in Javascript can throw a ReferenceError if a variable is not defined using the var, let or const keywords. Here’s an example of such a declaration: foo = true;
• Referencing the variable foo in code would result in a ReferenceError being thrown if using strict mode. The error would not occur if not using strict mode.
• Variable redeclarations - Redeclaring variables using the wrong keywords can also throw a ReferenceError. For example, initially declaring a variable using let, and subsequently redeclaring using let again throws a ReferenceError.

ReferenceError Example

Here’s an example of a Javascript ReferenceError thrown when referencing a variable that is out of scope:

function text() {
    var str = "Hello World";
    return str;
}

console.log(str);

In the above example, the variable str is defined inside the text() function and referenced outside the function. Since str is defined only in the scope of the function, referencing it from outside the function causes a ReferenceError:

Uncaught ReferenceError: str is not defined

How to Fix ReferenceError

Reference errors in Javascript are mainly thrown when an attempt is made to reference a variable that does not exist or is out of scope. Therefore, in the majority of cases, a ReferenceError can be fixed by making sure that the referenced variable is defined correctly and is being called in the correct scope.

The earlier example can be updated to fix the ReferenceError by defining the str variable in the global scope:

var str = "Hello World";

function text() {
return str;
}

console.log(text());

Since the text() function is defined in the global scope, it can access variables defined in the global scope. Therefore, running the above code produces the correct output as expected:

Hello World

Track, Analyze and Manage Errors With Rollbar

Managing errors and exceptions in your code is challenging. It can make deploying production code an unnerving experience. Being able to track, analyze, and manage errors in real-time can help you to proceed with more confidence. Rollbar automates error monitoring and triaging, making fixing JavaScript errors easier than ever. Sign Up Today!