JavaScript: Uncaught TypeError: n is not a function

0 0 2 minutes read

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>