Two Solutions for “JavaScript Reference Error Is Not Defined”

If you’re working on any type of web site or web application that has any other dependencies either for its front-end framework – such as Bootstrap and Foundation – or from the site’s foundation – such as Rails or WordPress – there’s a chance that your own JavaScript sources may result in the following:

Reference Error [variable] is not defined.

In some cases, this can be simply referring to a variable that isn’t defined (perhaps the most popular is when jQuery’s $ function has been dereferenced and you’re trying to use $) and simply needs a definition.

But, in other cases, there are times where it may not be as simple.

“JavaScript Reference Error is Not Defined”

As mentioned, there are times in which simply defining a variable will resolve the issue. For example, given the example with jQuery above, we can make a call to noConflict() to restore the variable.

Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

But that’s getting beyond the point of this article.

The thing is, simply restoring a variable or giving it a definition especially when it’s related to a third-party dependency is not as easy.

Instead, the problem can usually be resolved in one of two ways.

1. Load the Libraries in Proper Order

Arguably, the most popular reason for seeing a ReferenceError has to do with the fact that our script is referencing a variable that has yet to be defined.

To fix this, it’s generally a problem of the files being loaded out of order and this is especially true if the error is being thrown in the context of a site or web application that has its own libraries, then the scripts are probably loading later than your own.

This means that either the scripts are placed after yours in the head element of the page or they are being loaded in the footer of the page. If that’s the case, most frameworks and applications provide an API for setting the order in which files are loaded, setting dependencies, and then defining where, in the page, they are loaded.

2. Leverage Undefined Values

Another more slightly involved example involves calling a function with an optional parameter and then checking to see if that argument is defined when the function is called.

For example, let’s say that we know that the function in question will be called at two points within the page lifecycle:

  1. When the DOM is ready, and likely when a dependent variable is not defined
  2. When the page is loaded and ready, and likely when a dependent variable is already defined.

To do this, we can take advantage of variable definitions in JavaScript by doing something like this:

Note, however, that we are not checking for whether is the variable is true or false but if the variable is actually defined.

Given that, we can then setup a conditional to do whatever work needs to be done given the presence of the variable or not.

Finally, the way you go about invoking the following function would be like this:

  • Assuming that you’re calling the function before the value is defined `acmeReferenceError();`.
  • If you’re calling the function after the value is defined, then you would call `acmeReferenceError( foo );` where `foo` is the value that’s defined.

Most likely, the first case will be called when the DOM has loaded, but the page isn’t ready, and the second case will be called when the page has fully loaded and is ready.

The First Is Optimal, the Second Less So

When it comes to working with JavaScript, it’s always a better idea to load your scripts in dependent order. With that said, I always recommend the first option as being the proper, more optimal one.

Not only does it work the way ordering of scripts should work, but it requires less documentation and JavaScript-based code because the order of the scripts at the application layer shows – and controls – exactly how things are working.

However, there can be a few times where it’s not possible or something about the environment doesn’t give you the control that you need, and if that’s the case, then the second option is a workable solution.

If you end up going that route, though, I highly recommend including very clear code comments at the function level to explain that the optional parameter is used for, why it’s present, and what aspects of the application necessitate the need for doing something like that.

Leave a Reply

Name and email address are required. Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>