JavaScript Callback Error Prevention Utilities

These utility functions help you fix undefined is not a function error in JavaScript callbacks and create more robust callback-based code.

Safe Callback Executor #

A utility that safely executes callbacks with validation:

function safeCallback(callback, ...args) {
    if (typeof callback === 'function') {
        try {
            return callback(...args);
        } catch (error) {
            console.error('Callback execution error:', error);
            return null;
        }
    }
    console.warn('Invalid callback provided:', typeof callback);
    return null;
}

Usage:

// Safe to use even with undefined callbacks
safeCallback(undefined, 'data'); // Won't crash
safeCallback(() => console.log('Hello'), 'data'); // Executes safely

Callback Validator #

Validates and normalizes callback parameters:

function validateCallback(callback, defaultCallback = () => {}) {
    if (typeof callback === 'function') {
        return callback;
    }
    
    if (callback !== undefined) {
        console.warn(`Expected function, got ${typeof callback}`);
    }
    
    return defaultCallback;
}

Usage:

function processData(data, callback) {
    const validCallback = validateCallback(callback, 
        (result) => console.log('Default:', result)
    );
    
    // Process data
    validCallback(processedData);
}

Async Callback Wrapper #

Handles asynchronous operations with safe callback execution:

async function asyncWithCallback(operation, callback, errorCallback) {
    const validCallback = validateCallback(callback);
    const validErrorCallback = validateCallback(errorCallback, 
        (error) => console.error('Async error:', error)
    );
    
    try {
        const result = await operation();
        validCallback(result);
    } catch (error) {
        validErrorCallback(error);
    }
}

Context-Preserving Callback #

Utility to maintain this context in callbacks:

function bindCallback(obj, methodName, ...args) {
    if (typeof obj[methodName] === 'function') {
        return obj[methodName].bind(obj, ...args);
    }
    
    throw new Error(`Method ${methodName} not found on object`);
}

Usage:

const user = {
    name: 'John',
    greet(message) {
        console.log(`${message}, ${this.name}`);
    }
};

// Safe context binding
const boundGreet = bindCallback(user, 'greet', 'Hello');
setTimeout(boundGreet, 1000); // Preserves context

Callback Chain Utility #

Safely chain multiple callbacks:

function chainCallbacks(...callbacks) {
    return function(data) {
        let result = data;
        
        for (const callback of callbacks) {
            if (typeof callback === 'function') {
                try {
                    result = callback(result);
                } catch (error) {
                    console.error('Callback chain error:', error);
                    break;
                }
            }
        }
        
        return result;
    };
}

Usage:

const processChain = chainCallbacks(
    data => data.trim(),
    data => data.toUpperCase(),
    data => `Processed: ${data}`
);

console.log(processChain('  hello world  '));
// Output: "Processed: HELLO WORLD"

Event Callback Manager #

Manages event listeners with callback validation:

class EventCallbackManager {
    constructor() {
        this.listeners = new Map();
    }
    
    on(event, callback) {
        if (typeof callback !== 'function') {
            throw new Error('Callback must be a function');
        }
        
        if (!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        
        this.listeners.get(event).push(callback);
    }
    
    emit(event, ...args) {
        const callbacks = this.listeners.get(event) || [];
        
        callbacks.forEach(callback => {
            safeCallback(callback, ...args);
        });
    }
    
    off(event, callback) {
        const callbacks = this.listeners.get(event) || [];
        const index = callbacks.indexOf(callback);
        
        if (index > -1) {
            callbacks.splice(index, 1);
        }
    }
}

Interactive Demo #

These utilities provide a solid foundation for handling callbacks safely and preventing the "undefined is not a function" error in your JavaScript applications.