Question

I trying to use the module pattern with JS. But when I call HM.init() in the console, it says undefined. It’s like this.carousel doesn’t exist at all. Why is that?

JS:

(function(window, $){

    var HM = (function (HM) {

        HM.init = function(){
            this.carousel.init();
        }

        return HM;

    })(HM || {});

    window.HM = HM;

    $(function(){
        console.log(HM.init()); // this doesn't work
    });


})(window, jQuery);

//Extending module (this is supposed to be in another file)
(function(window, HM, $){
    HM.carousel = {
        init: function(){
            return 'initialise HM';
        }
    }
})(window, HM, jQuery);.

Many thanks

Answer 1

The reason it prints undefined is because HM.init doesn’t return anything (no return statement, so it defaults to returning undefined).

Either you want to add return before the call to this.carousel.init(), like so:

...
HM.init = function(){
    return this.carousel.init();
}
...

…or you want to use console.log instead inside your HM.carousel.init function, if you want to print ‘initialise HM’ to the console:

...
HM.carousel = {
    init: function(){
        return 'initialise HM';
    }
}
...

(the return value in itself isn’t a good debugging tool, so it probably makes more sense to print it with console.log.)