How To Solve TypeError: [function] Is Not A Function In JavaScript

In this article, you’ll learn how to solve "TypeError: [function] is not a function" in JavaScript by checking for typos, checking if the value is a function or checking if the function exists.

How does this error happen?

Errors are issues in your code that can throw a TypeError object. Errors are split up into 2 types:

• Syntax error: Code that are written incorrectly or pointing to variables or functions that does not exist
• Logical error: While technically will not throw an error, the error comes in an incorrect result from what you intended

The TypeError object represents an error when a syntax error has occurred. And is generally thrown when:

• An argument of a function’s type is not compatible with what is required
• When an attempt to change constant value is made (i.e. with a const variable)
• When a value is used inappropriately

Some examples of errors:

const elm_id = document.getElementByID("id");
    // Typo;
const elm_class = document.getElementByClassName("class");
    // Typo;
const obj = {
    val: 0,
    func: () => {}
}
obj._function();
    // Does not exist;
obj.map();
    // Not a function of the Object class;

Output:

TypeError: document.getElementByID is not a function
TypeError: documnet.getElementByClassName is not a function
TypeError: obj._function is not a function
TypeError: obj.map is not a function

Solving error “TypeError: [function] is not a function” in JavaScript

So when you have TypeError: [function] is not a function error, we are looking for these syntax errors:

• The function might be written incorrectly
• The function is not actually a function
• The function literally does not exist

Some fixes:

// const elm_id = document.getElementByID("id");
const elm_id = document.getElementById("id"); // Fixed Typo

// const elm_class = document.getElementByClassName("class");
const elm_class = document.getElementsByClassName("class"); // Fixed Typo

const obj = {
    val: 0,
    func: () => {}
}
// obj._function();
obj.func(); // Changed to a function that exists

There are many other cases of this happening, most likely by having a type or two in your document, though that’s usually very easy to solve. Occasionally some functions might not exist due to not being imported or the importing of the script into the HTML file sits before the script file containing the function. Additionally, if you use a function that belongs to a class (maybe the Object, Date or Array class) and you know that it isn’t misspelled, check documentation sites like W3School or Mozilla to make sure it belongs to the correct class.

Summary

The TypeError: [function] is not a function in JavaScript error occurs when you either use the have a typo on the function name, the value is not a function, or the function does not exist. You can learn about a way to check for an error here.

Maybe you are interested:

• TypeError: Cannot read property ‘appendChild’ of Null in JS
• TypeError: Cannot read property ‘classList’ of Null in JS
• TypeError: Cannot read property ‘top’ of Undefined in JS

Davis Cole

Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.

---

Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP