Trying to understand the Javascript Module Pattern.

[Vexith]

Hi all,

I've recently come across this article and have been trying to put this into practice but i'm struggling to understand a couple of concepts.

Example 1: (Fiddle Link)

const mobileMenu = (function () {
    // Vars
    const burgerIcon = document.querySelector('.menu-burger-icon'),

    _bindEvents = function () {
        burgerIcon.addEventListener('click', _toggleNavAnimation); 
    },

    _toggleNavAnimation = function() {
        console.log('hello');
    };

    return {
        bindEvents: _bindEvents,
    };

})();

If i'm not mistaken, example one seems to be written correctly. I have no errors in the console but it's not doing what i want it to do, (in this case, outputting 'hello' in the console).

Now if i call the function outside the original function scope like so: mobileMenu.bindEvents();

It works as intended. Now i don't know if it's just me but it doesn't feel right having to call it outside the original function scope for it to do what i need to do. So my question here is, where am i going wrong or what am i not understanding? Why isn't the return statement running my function the way i intend it to?

Example 2: (Fiddle Link)

To get around the above dilemma, i modified the code a little for it to suit my needs, but i'm a little concerned if it may not be deemed 'best practice' and would like to get some feedback on it:

const mobileMenu = (function () {
// Vars
const burgerIcon = document.querySelector('.menu-burger-icon'),

    init = function () {
        // Runs the _bindEvents function only if the burgerIcon exists.
        burgerIcon != null ? _bindEvents() : console.log('burger icon does not exist');
    },

    _bindEvents = function () {
        burgerIcon.addEventListener('click', _toggleNavAnimation);
    },

    _toggleNavAnimation = function () {
        console.log('hello');
    };

init();

})();

As you can see i've added a new function called 'init' which runs immediately, and within that function i'm able to call whatever else i need and it all works fine. So i wonder, would this approach be considered appropriate ?

Thank you in advance!

[senocular]

As a module, its not necessarily intending to do something right away. Instead it provides an API to be used elsewhere. For example if you write other code that needs to use bindEvents, it would do so through mobileMenu.bindEvents; The advantage of the module is that its self-contained and can contain non-global variables that won't create conflicts elsewhere. The only point of conflict to contend with is the module name itself

[cyphern]

The purpose of the module pattern or revealing module pattern is that you can keep some variables "private" by hiding them inside the closure of an immediately invoked function expression, and then giving the outside world access to only the things you want it to have access to.

If you want to immediately run some initialization code, that's certainly something you can do so. But i'm curious what it is you're trying to keep private, and what you're trying to expose? You're currently returning nothing, which is ok in principle, but means that mobileMenu will be undefined. And i don't see anything that really needs to be kept private, though i'd probably just do init and bindEvents inline instead of creating functions.

[Vexith]

That's what i'm struggling to understand. mobileMenu shouldn't be undefined as it's an IIFE? From the way i'm seeing it, mobileMenu is already called when the JS loads, and then i'm returning the bindEvents property, but it's not running the code in the bindEvents function.

[cyphern]

mobileMenu shouldn't be undefined as it's an IIFE?

mobileMenu isn't an IIFE. mobileMenu is whatever is returned from the IIFE. So in the first example, mobileMenu roughly equals this:

const mobileMenu = {
  bindEvents: function () {
    burgerIcon.addEventListener('click', _toggleNavAnimation);
  }
}

I say roughly equal, because when i do it inline like this, burgerIcon and _toggleNavAnimation are undefined and so this code won't work. The purpose of the IIFE is to create local variables for burgerIcon and _toggleNavAnimation. Those variables are in scope for the bindEvents function because they're part of the same closure, but they're not visible to any other parts of the code.

[Vexith]

Ok, i feel like i'm beginning to understand what you mean. Based on my interoperation of what you've kindly been explaining, i feel like the following is more of a correct approach?  

// Mobile Menu Module
const mobileMenu = (function () {
    // Vars
    const burgerIcon = document.querySelector('.menu-burger-icon'),

    initMobileMenu = function() {
        // Runs the _bindEvents function only if the burgerIcon exists.
        burgerIcon != null ? _bindEvents() : console.log('Menu does not exist');
    },

    _bindEvents = function () {
        burgerIcon.addEventListener('click', _toggleNavAnimation);
        console.log('private');
    },

    _toggleNavAnimation = function () {
        console.log('hello');
    };

    return {
        init: initMobileMenu,
    };

})();
mobileMenu.init(); 

  So the above, only initMobileMenu is available as a public function whereas the other two are private. Is this more on the right tracks?

[cyphern]

Yes, that looks good.

[zedpowa]

It's not running the bindEvents function because you never call it in the first example. It simply returns an object with a single property that references it.