The Javascript error TypeError: "x" is not a function occurs when there is an attempt to call a function on an object, which is not actually a function.
To illustrate using an analogy, imagine you're in a kitchen following a recipe. The recipe says to use a blender to blend certain ingredients together but you accidentally use a juicer. When you try to blend with a juicer, it doesn't work properly since blending is not a function of the juicer. Similarly, in Javascript when you try to call a function (blend) on an object (juicer) that doesn't contain the function, the TypeError: "x" is not a function occurs.
What Causes TypeError: "x" is not a function
A TypeError: "x" is not a function in Javascript generally occurs in one of the following scenarios:
- A typo in a function call.
- Missing script library.
- When a property is called on an object like a function but is not actually a function.
- When calling a built-in function that expects a callback function argument, which does not exist.
- When the called function is within a scope that is not accessible.
TypeError: "x" is not a function Examples
1. Typo
A typical scenario for the TypeError: "x" is not a function to occur is when there is a typo in the called function name:
var elem = document.getElementByID('ID');
Running the above code leads to the following Javascript error:
TypeError: document.getElementByID is not a function
The correct function name is getElementById():
var elem = document.getElementById('ID');
When the function is called using the correct name, the TypeError: "x" is not a function is avoided.
2. Trying to Call a Property As Function
The TypeError: "x" is not a function can also occur when a property is called on an object like a function, but is not actually a function. For example:
var foo = {
bar: 5
};
console.log(foo.bar()); //Attempt to call a property as function
In the above example, the foo object contains a property bar. However, the above code attempts to call the property as a function. Running the above code leads to the following Uncaught TypeError: "x" is not a function:
Uncaught TypeError: foo.bar is not a function
If the Javascript code is modified to access the property correctly (without the parentheses):
var foo = {
bar: 5
};
console.log(foo.bar); //Accessing property name correctly without parentheses
The correct output is produced:
5
3. Object Does Not Contain Function
Another common cause for the TypeError: "x" is not a function is when a function is called on an object that does not actually contain the function:
var foo = {
bar: function() {
console.log("bar called");
}
};
foo.baz(); //Incorrect function name
In the above example, the foo object contains a function bar(). However, the above code attempts to call the function baz(), which foo does not contain. Running the above code leads to the following Uncaught TypeError: "x" is not a function:
Uncaught TypeError: foo.baz is not a function
If the Javascript code is modified to call the correct function bar():
var foo = {
bar: function() {
console.log("bar called");
}
};
foo.bar(); //Correct function name
The correct output is produced:
bar called
How to Fix TypeError: "x" is not a function
The TypeError: "x" is not a function can be fixed using the following suggestions:
- Paying attention to detail in code and minimizing typos.
- Importing the correct and relevant script libraries used in code.
- Making sure the called property of an object is actually a function.
- Making sure objects contain the called function
- Making sure functions passed in as callbacks do exist.
- Making sure called functions are within the correct and accessible scope.
Track, Analyze and Manage Javascript Errors With Rollbar
Managing errors and exceptions in your code is challenging. It can make deploying production code an unnerving experience. Being able to track, analyze, and manage errors in real-time can help you to proceed with more confidence. Rollbar automates error monitoring and triaging, making fixing Javascript errors easier than ever. Try it today!
