Checking if jQuery Is Loaded With JavaScript

Modern browser consoles have a built-in dollar sign operator ($()) that is an alias for the commonly-used function document.getElementByID(), which selects an HTML element on the page using its ID attribute.

“The dollar sign is commonly used as a shortcut to the function document.getElementById().” — Stephen Chapman at ThoughtCo

Of course, most JavaScript programmers are familiar with the $() function from jQuery, not as an alias of document.getElementByID().

Since any browser console is going to have a $() function, how can you tell if that function is the built-in version or the jQuery version?

The $() function in jQuery is also an alias — this time, for the function jQuery(), which is a selector function more similar to document.getElementsByTagName() than document.getElementByID().

“jQuery() […] can also be written as $()” — jQuery Docs

For information on how the $() function actually works in jQuery, please see my recent article on selecting all <div> elements on a page:

In order to check if jQuery is loaded on a page, you have several different options, including checking for undefined, using the typeof keyword, or catching a TypeError or ReferenceError.

In the following code example, jQuery has not been loaded, and the commands are being entered into Firefox’s developer console:

One gotcha to look out for here is that the typeof null is "object" — so you can’t just check the typeof $(), which returns null by default in the browser’s console window, as you can see in the snippet above.

One of the best ways to check if jQuery is loaded is to check for the .jquery property of a jQuery object — usually accessed as $().jquery — in order to get the current jQuery version.

“The .jquery property is assigned to the jQuery prototype, commonly referred to by its alias $.fn. It is a string containing the version number of jQuery, such as "1.5.0" or "1.4.4".” — jQuery Docs

If jQuery has been loaded, using $().jquery is very useful both to check if jQuery is loaded and to find out exactly which version has been loaded.

In the next section, we’ll look at what will be returned from the above code example when jQuery has already been loaded on the page.

When jQuery Has Already Been Loaded

If jQuery is loaded on the page, then you’ll see a significantly different result when running the above code example.

Here is an updated code snippet that shows the differences:

Basically, the most reliable way to check if jQuery has been loaded is to check typeof jQuery — it will return "function" if jQuery was already loaded on the page, or "undefined" if jQuery hasn’t been loaded yet.

In the above code example, I loaded jQuery on the page using the browser console, a topic I discussed in another recent JavaScript article:

If you’d rather try out that code snippet without running into a Content Security Policy error — as you will on many sites, including Firefox’s new tab and gist.GitHub.com, but not Medium.com — you can play with a CodeSandbox with jQuery loaded instead:

The CodeSandbox above has jQuery loaded as a dependency and imports it using ES6 syntax with the import keyword.

Conclusion

Because modern web browsers have a built-in dollar sign function $() already available in the web console, it can be difficult to tell if you’re using the built-in $() function (an alias of document.getElementByID()) or the jQuery selector function (an alias of jQuery()).

When jQuery has already been loaded on the page, you can call $().jquery to see which version has been loaded. But watch out — if jQuery isn’t loaded, that same call will result in a TypeError, because the built-in $() function returns null when provided no argument.

To avoid needing to catch an error, you can check typeof jQuery — it will return "function" if jQuery is loaded, and "undefined" if it is not.

Hopefully this helps you see how you can use JavaScript to check if jQuery is loaded and available for use on a website or in the browser console.

Happy coding! 😁💻🔥🖥️😄💯

Join my email list to get free access to all of my Medium articles.