TypeError: callback is not a function

The error message “TypeError: callback is not a function” occurs when JavaScript attempts to execute something as a function, but the value provided is either undefined, null, or another non-function type (such as a string, object, or number). This issue often arises when working with asynchronous functions, event listeners, higher-order functions, and built-in APIs that expect a callback function.

1. Understanding the TypeError

A TypeError in JavaScript occurs when an operation is performed on a value of an unexpected type. The specific message “callback is not a function” suggests that a function call was attempted on something that is not a function.

Example of the issue:

function doSomething(callback) {
    callback(); // Attempting to call a function
}

doSomething("Hello"); // TypeError: callback is not a function

Here, "Hello" is passed instead of a function, which leads to a TypeError.

2. Common Causes and Solutions

Case 1: Callback Argument Not Provided

If a function is expecting a callback but receives undefined, this error will occur.

❌ Incorrect:

function greet(callback) {
    callback(); // TypeError: callback is not a function
}

greet(); // No function is passed

✅ Solution:

Provide a default function or check for the argument before calling it.

function greet(callback) {
    if (typeof callback === "function") {
        callback();
    } else {
        console.warn("Callback is not a function");
    }
}

greet(); // Warns instead of throwing an error

Case 2: Passing a Non-Function Argument

If a non-function value (e.g., string, number, object) is passed where a function is expected, JavaScript will throw this error.

❌ Incorrect:

function executeCallback(callback) {
    callback(); // Attempting to call a string
}

executeCallback("not a function"); // TypeError: callback is not a function

✅ Solution:

Validate that the argument is a function before invoking it.

function executeCallback(callback) {
    if (typeof callback === "function") {
        callback();
    } else {
        console.error("Error: Expected a function but got", typeof callback);
    }
}

executeCallback("not a function"); // Error message instead of TypeError

Case 3: Forgetting to Pass a Function to a Built-in Method

Some JavaScript methods, such as setTimeout, setInterval, and Array.prototype.map, expect a function as an argument.

❌ Incorrect:

setTimeout("console.log('Hello')", 1000); // TypeError: callback is not a function

✅ Solution:

Pass a function instead of a string.

setTimeout(() => console.log("Hello"), 1000);

Case 4: Accidentally Overwriting a Function with a Non-Function

If a variable that originally held a function is reassigned to a different value, this error may occur.

❌ Incorrect:

let callback = function () {
    console.log("Hello");
};

callback = "Now a string"; // Overwriting function with a string
callback(); // TypeError: callback is not a function

✅ Solution:

Ensure the variable retains its function type.

let callback = function () {
    console.log("Hello");
};

// Do not overwrite the function unless necessary
callback();

Case 5: Callback Function Not Being Returned Properly

In cases where the callback function is expected to be returned but isn’t, the calling code might attempt to invoke undefined.

❌ Incorrect:

function getCallback() {
    return; // Implicitly returns undefined
}

let cb = getCallback();
cb(); // TypeError: cb is not a function

✅ Solution:

Make sure the function returns a valid function.

function getCallback() {
    return function () {
        console.log("Valid function");
    };
}

let cb = getCallback();
cb(); // Works correctly

Case 6: Misusing Callbacks in Asynchronous Code

If a function expects a callback but it is misused in asynchronous operations, it can lead to this error.

❌ Incorrect:

function fetchData(callback) {
    setTimeout(() => {
        callback(); // If callback is not a function, this will throw an error
    }, 1000);
}

fetchData("Not a function"); // TypeError: callback is not a function

✅ Solution:

Ensure a function is always passed.

function fetchData(callback) {
    setTimeout(() => {
        if (typeof callback === "function") {
            callback();
        } else {
            console.warn("Provided argument is not a function");
        }
    }, 1000);
}

fetchData(() => console.log("Data received!")); // Works fine

3. Debugging Techniques

To debug and fix this error, follow these steps:

Step 1: Check the Argument Type

Use console.log or typeof to inspect the callback before calling it.

function test(callback) {
    console.log("Type of callback:", typeof callback);
    callback();
}

test(42); // TypeError

Step 2: Use Default Parameters

Set a default function in case no function is provided.

function test(callback = () => console.log("Default function executed")) {
    callback();
}

test(); // No error

Step 3: Handle Errors Gracefully

Use try...catch to prevent unexpected crashes.

function safeExecute(callback) {
    try {
        if (typeof callback === "function") {
            callback();
        } else {
            throw new Error("Invalid callback provided");
        }
    } catch (error) {
        console.error(error.message);
    }
}

safeExecute(123); // Outputs: Invalid callback provided

4. Summary

Cause	Solution
Callback argument is missing	Provide a default callback or check before calling
Passing a non-function	Validate argument type before executing
Forgetting to pass a function to built-in methods	Ensure correct function usage
Overwriting function variables	Avoid overwriting function variables with other types
Returning `undefined` instead of a function	Make sure function returns a valid callback
Asynchronous callback misuse	Ensure the callback is always a function before calling

By following these best practices, you can prevent “TypeError: callback is not a function” in JavaScript and make your code more robust!