Analysis and Resolution of Uncaught TypeError: (intermediate value)(...) is not a function in JavaScript

Problem Background and Error Phenomenon

During JavaScript development, developers often encounter various type errors, among which Uncaught TypeError: (intermediate value)(...) is not a function is relatively common but easily confusing. This error typically occurs during function calls or expression evaluation, indicating that the JavaScript engine is attempting to call a non-function value as a function.

Specific Case Analysis

Let's understand the generation mechanism of this error through a specific code example. Suppose we have the following initial code:

(function(win){
   // Main logic code
   win.expose1 = function() { /* ... */ };
   win.expose2 = function() { /* ... */ };
})(window)

This code uses an Immediately Invoked Function Expression (IIFE) to encapsulate the main logic and works correctly. However, when we add a logging function before the IIFE:

window.Glog = function(msg){
    console.log(msg)
}

(function(win){
   // Original main logic code
})(window)

At this point, the Uncaught TypeError: (intermediate value)(...) is not a function error occurs.

Root Cause Analysis

The fundamental cause of the problem lies in JavaScript's Automatic Semicolon Insertion (ASI) mechanism. According to ECMAScript specifications, the JavaScript engine automatically inserts semicolons in certain situations, but ASI is not triggered in all cases.

Without explicit semicolons, the above code is parsed by the JavaScript engine as:

window.Glog = function(msg){
    console.log(msg)
}(function(win){
   // Original main logic code
})(window)

This parsing method means:

• window.Glog is assigned an immediately executed anonymous function
• This anonymous function receives function(win){...} as the msg parameter
• Then attempts to call the return value of this function (i.e., the (window) part)
• Since the return value is not a function, a type error is thrown

Solution

The solution to this problem is simple - add a semicolon after the function expression:

window.Glog = function(msg) {
    console.log(msg);
}; // <--- Add semicolon

(function(win) {
    // Original main logic code
})(window);

Deep Understanding of Automatic Semicolon Insertion

JavaScript's automatic semicolon insertion follows specific rules, mainly including:

• When encountering a line terminator and the next token cannot be parsed
• When encountering }
• At the end of the program

However, in lines starting with (, [, /, +, -, ASI is usually not triggered because these characters may indicate continuation of an expression.

Extended Related Error Patterns

Similar error patterns also appear in other scenarios. Referring to the Node.js example in the reference article:

const sql = require('mssql');
// ... Configuration code
(async function () {
    try {
        let pool = await sql.connect(config);
        let qry_getPlayers = await pool.request()
            .query("SELECT * FROM players p WHERE p.event_id = 5188");
        console.dir(qry_getPlayers);
    } catch(err) {
        console.log(err);
    }
})()

If the preceding code lacks semicolons, it may also cause similar intermediate value errors.

Best Practice Recommendations

To avoid such errors, developers are advised to:

• Always use semicolons at the end of statements
• Use code formatting tools (such as Prettier, ESLint) to unify code style
• Ensure clear separators before function expressions and IIFEs
• Understand how ASI works, but don't rely on it excessively

Conclusion

Although the Uncaught TypeError: (intermediate value)(...) is not a function error may seem complex, its root cause is often simple - missing necessary semicolons leading to parsing ambiguity. By understanding JavaScript's parsing rules and automatic semicolon insertion mechanism, developers can effectively avoid and fix such issues, writing more robust code.