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

That expression may be complex. So when you get undefined is not a function it means that expression did not return a function object. So you have to figure out what you are trying to execute isn't a function.

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 .

Next : XMLHttpRequest cannot load no 'access-control-allow-origin'

Related Topics