Uncaught TypeError: ānā is not a function:
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object. So you need to understand that what you are trying to achieve is not a feature.
Message:
TypeError: Object doesnāt support property or method {n} (Edge)
TypeError: ānā is not a function
Error Type:
TypeError
What Causes TypeError: ānā is not a function:
Example 1: This scenario occurs when there is a typo in the method name :
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā let n = document.getElementByID('GFG');Ā Ā Ā Ā Ā Ā Ā Ā document.write(n);Ā Ā Ā Ā </script></body></html> |
Output: While running the above example, it throws a JavaScript error.
TypeError: document.getElementByID is not a function
The correct function name is getElementById:
Example 2: This case occurs when an object doesnāt contain a function when itās called.
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā let num = {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā foo: function () {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā console.log("foo called");Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā Ā Ā };Ā Ā Ā Ā Ā Ā Ā Ā num.fo();Ā Ā Ā Ā </script></body></html> |
Output:
TypeError: num.fo is not a function
Explanation: In the above example, the num object contains a foo () function. However, the above code will try to call the foo () function, which does not include num. So, while running the above example, it throws a JavaScript error
The correct function call is foo():
Example 3: Certain methods need to provide a function that works only for a particular object.
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā let arr = { a: 1, b: 2, c: 3 };Ā Ā Ā Ā Ā Ā Ā Ā arr.map(function (num)){Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā return num;Ā Ā Ā Ā Ā Ā Ā Ā });Ā Ā Ā Ā </script></body></html> |
Output:
TypeError: arr.map is not a function
Explanation: In the above example, Array.prototype.map() is used, which will work with Array objects only. So, while running the above example, it throws a JavaScript error.
The correct way is to declare the array properly like arr=[35,42,90]
Example 4: Sometimes when you create a class, you may have properties and functions with the same name. When a function is called, the compiler assumes that the function no longer exists.
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā var Boy = function () {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.age = 15;Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.color = "white";Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.name = "John"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā return this;Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā Ā Ā Boy.prototype.name = function (name) {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.name = name;Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā return this;Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā Ā Ā var myNewBoy = new Boy();Ā Ā Ā Ā Ā Ā Ā Ā myNewBoy.name("Harry");Ā Ā Ā Ā </script></body></html> |
Output:
TypeError: myNewBoy.name is not a function
Explanation: In the above example, the name is the pre-existing property. So, this code throws the error.
The correct way to define the property is:
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā var Boy = function () {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.age = 15;Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.color = "white";Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.boyName = "John"Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā return this;Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā Ā Ā Boy.prototype.name = function (name) {Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā this.boyName = name;Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā Ā return this;Ā Ā Ā Ā Ā Ā Ā Ā }Ā Ā Ā Ā Ā Ā Ā Ā var myNewBoy = new Boy();Ā Ā Ā Ā Ā Ā Ā Ā myNewBoy.name("Harry");Ā Ā Ā Ā </script></body></html> |
Note: Make sure to import the module correctly. Suppose we have a āhelpers.jsā file. So, we have to import the app.js:
import helpers from './helpers'
Example 5: In this case, the brackets are used as multiply But they are like calling a function. So the error has occurred.
HTML
<!DOCTYPE html><html><head>Ā Ā Ā Ā <title>Type Error</title></head>Ā
<body>Ā Ā Ā Ā <script>Ā Ā Ā Ā Ā Ā Ā Ā const n = 4(4 + 5);Ā Ā Ā Ā Ā Ā Ā Ā document.write(n);Ā Ā Ā Ā </script></body></html> |
Output: This code throws the error.
TypeError: 4 is not a function
The correct way is ā4*(4+5)ā.
