Uncaught TypeError: 'undefined' is not a function
This is a common JavaScript error that happens when you try to call a function before it is defined. You get this error when you try to execute a function that is uninitialized or improperly initialized . It means that the expression did not return a function object. So you have to figure out what you are trying to execute isn't a function.Reverse the order

For instance, while this code works as expected:
var greetings= function () {
return 'Good Morning..!!'
};
alert(greetings());
If you reverse the order of the statements the Uncaught TypeError: undefined is not a function error will occur:
alert(greetings());
var greetings= function () {
return 'Good Morning..!!'
};
So, It's better you double check that your scripts are being loaded correctly.
This weird behaviour depends on how you define the functions and when you call them. examples
myFunc(); //This won't throw an error
function myFunc() {}
myFunc(); //This will throw an error
var myFunc = function() {}
myFunc();
function myFunc() {
foo(); //This will throw an error
}
var foo = function() {}
myFunc();
function myFunc() {
foo(); //This _won't_ throw an error
}
function foo() {}
function myFunc() {
foo(); //no error
}
var foo = function() {}
myFunc();
This is because of something called hoisting! JavaScript Function
In Javascript , when you execute a function, it's evaluated like the following:- expression.that('returns').aFunctionObject(); // js
- execute -> expression.that('returns').aFunctionObject // what the JS engine does
File order (library)

Sometimes the error happened because the library wasn't loaded (correctly). In case of jQuery , first you need to load in the jQuery library to be able to perform jQuery functions. It should be something like:
- jQuery.min.js
- jquery-ui.js
- any third party plugins you loading
- your custom JS
bind() method
This is an error that occurs in Chrome when you call an undefined function. You can test this in the Chrome Developer Console and Mozilla Firefox Developer Console . Consider the following example:
function myMessage(){
alert("Hello, World!!");
}
document.addEventListener("click", function(){
this.myMessage();
});
When you execute the above code and then click on the page, it output the following error Uncaught TypeError: this.myMessage is not a function . It is because the anonymous function being executed is in the context of the document , whereas myMessage is defined on the window.
You can fix this issue by using the bind() method to pass the proper reference:
document.addEventListener("click",this.myMessage.bind(this));
Uncaught TypeError:
Uncaught means the error was not caught in a try-catch block . The TypeError object represents an error when a value is not of the expected type. Also, Undefined is the property of the global object. If you don’t assign any value to a variable is of type undefined .
Related Topics
- XMLHttpRequest cannot load no 'access-control-allow-origin'
- TypeError: null is not an object
- Uncaught RangeError: Maximum call stack size exceeded
- Uncaught TypeError: Cannot set property
- SecurityError: Blocked a frame with origin from accessing a cross-origin frame
- Unable to get property undefined or null reference
- SyntaxError: Cannot use import statement outside a module
- What is UnhandledPromiseRejectionWarning