All in JS

If you are using a function in Javascript, it is crucial to check if it exists.
With all the async or deferred js libraries nowadays, you do not know if a script is
even loaded. So before calling any function, it's nice to ensure if it exists.
So here is a basic example of the if statement before calling a function to really
any undefined errors:

        if(typeof yourFunctionName == 'function') {
  yourFunctionName();
}
        
    

Some of the most common use cases is by checking a popular library like jQuery.

How to check if jQuery is available?

Basically you can use the code above, it looks like this:

        if (typeof jQuery == 'undefined') {
  // jQuery is not available, so what not?
}
    

Or you can check if it exists in the window Object, like this:

        window.onload = function() {
 if (window.jQuery) {
       // jQuery is available
 }
}
    

To go further, if you use an old version of jQuery that has not a specific function
implemented, you should always check.

        window.onload = function() {
    if (window.jQuery) {
        if (typeof jQuery.escapeSelector == 'function') {
             //jQuery is loaded and the 'escapeSelector' function exists
        }
    }
}
    

So when the object or the function is defined, we can freely use it. But what happens if there is an 404 error or the depended script like jQuery is not loaded yet.

How to execute a script when jQuery is loaded?

When you are using an external javascript library, you could simply use order the
your script after jQuery.

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="https://yourdomain.com/yourscript.js"></script>
    

So the browser will first load jquery and than your script. It is not the perfect solution because now we have to render blocking scripts. But for the purpose of development it should be enough.
The other scenario that we should consider is if the jquery is never loaded.

jQuery is not loading/working

In this case our whole functionality of the website won't work. Especially, if all other libraries depend on jquery.
The solution is to make a fallback. For example of you load jquery from cdn and it does not respond, you can use a fallback like this:

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
    if (typeof jQuery == 'undefined') { 
       document.write('<script src="https://yourdomain.com/jquery.js"><\/script>'); 
    } 
</script>
<script src="https://yourdomain.com/yourscript.js"></script>
        
    

So you get the idea. When jQuery isn't loaded from the public cdn, it should be loaded from your own server. This way you can save some bandwidth and also have a backup.
Again we did not optimize any of the js requests.

Summary

A good practise is to check if a function exists/is defined to avoid errors. Also testing your website or app when a resource is not loaded is really important. You should probably avoid to many dependencies of js scripts because it could destroy your whole website.