Why error "$ is not defined" occurred in jQuery ?

One of the most common errors faced by jQuery developers is the '$ is not defined' error. At first, it may seem like a small error, but considering the fact that more than 70 percent of the website uses jQuery in some form or other, this may turn out to create a huge mess.

Reason behind this error: 
This error basically arises, when the developer is using a variable, before declaring it in the script. 

Example:  

// ReferenceError: num is not defined
num; 

declaration
var num; 

// No more errors
data; 

Output: 
 

In the above example, we see that 'num' has been called before it was declared. This is why ReferenceError: num is not defined was thrown in the first line. In the third line, 'num' is called again. However, no error will be thrown this time, as the variable has already been defined in the second line of the script.

This is a very common error. The best way to avoid this is to hoist all the variables and functions before calling them. Have a look at another example. 

Example:  

//reference error
process(); 

process = function(){
var a = 2;
console.log(a);
}

// no error
process(); 

Output: 
 

Most common reasons for this error: 

• Embedding jQuery plugin before the jQuery script file 
  '$' is used to declare any variable in jQuery. A plug-in is basically a code chunk written beforehand. These chunks use predefined jQuery functions and methods. Therefore, it is necessary to embed the jQuery script file before the plugin file. Otherwise, the application won't understand the jQuery coding.

Correct Order: 

<script src="/lib/jquery.min.js"></script>
<script src="/lib/jquery.plugin.js"></script>

• CDN hosted jQuery problem: 
  It is possible that the CDN hosted jQuery version, used for the website, might have been blocked on the customer's connection. This type of issue is generally observed on IP addresses originating from countries like China, Indonesia, Korea, etc. 
  To avoid this issue, it is better to provide a locally-hosted fallback version of jQuery.

Example: 

//an external CDN link
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

//fall back to local jQuery
<script>
window.jQuery || document.write('
<script src="http://www.mywebsite.com/jquery.min.js"><\/script>'))
</script>