Question

I have the below code.

(function($) {

    var myFunction = function(element) {

        var myCallerFunction = function() {
            var functionName = 'myInternalCallFunction';
            myFunction[functionName]();
            console.log(2);

        }

        var myInternalCallFunction = function() {

            console.log(1);
        }

        myCallerFunction();

    }

    $.fn.myfunction = function(options) {
        var func = new myFunction();
    }

})(jQuery);

Inside myCallerFunction I created a variable which holds the function name I want to call. I then try to call it, however it returns that it can’t find the function. It finds the namespace myFunction okay as if I change:

myFunction[functionName]();

to

myFunctionTest[functionName]();

It returns it can’t find “myFunctionTest” instead of not being able to find “myInterncalCallFunction”.

Any ideas why it can’t find the function?

Answer 1

By calling myFunction['myInternalCallFunction']() you are actually calling myFunction.myInternalCallFunction(). Of course, it is undefined since myInternalCallFunction is not a property of myFunction, it is its private variable. One way of solving this while not turning private variables to properties:

(function($) {

    var myFunction = function(element) {
        var cache = {};
        var myCallerFunction = function() {
            var functionName = 'myInternalCallFunction';
            cache[functionName]();
            console.log(2);

        }

        cache.myInternalCallFunction = function() {

            console.log(1);
        }

        myCallerFunction();

    }

    $.fn.myfunction = function(options) {
        var func = new myFunction();
    }

})(jQuery);