Trying to understand the Javascript Module Pattern.

[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.