I don't understand the Module Pattern... Please Help!

Let me take a step back from this for a minute and make sure we're on the same page with functions. We can define functions with a name, or we can defined anonymous functions:

function namedFunction() {
    console.log(“this has a name”);
}

function() {
    console.log(“this is anonymous”);
}

Later on, we could call the function namedFunction(), but the anonymous one we have no way of calling somewhere else in the code. Usually, anonymous functions are used in callbacks, since we can just define this function in place, and this is the only place it’s going to be used.

button.addEventListener("click", function(){ 
    console.log(“this is anonymous”);
});

But another use of the anonymous function is in this module pattern, something called an an IIFE (pronounce “iffy”) - Immediately Invoked Function Expression. The function itself is wrapped in parens so that it will be treated as a function expression as opposed to a function declaration (don’t worry about that part too much right now), and then this function is immediately called with parens.

(function() {
    var message = “Hello World”);
    console.log(message);
})()

This is almost the same as if we’d ran the same code, but not wrapped in an IIFE:

var message = “Hello World”);
console.log(message);

But in the first case, the variable message will not exist in the global scope, but in the second case it will be. If we’re concerned about polluting the global namespace, this can solve that problem.

Now in this case:

!(function(something){ 
    something.dothis = function(){ 
        // blablabla; 
    } 
})(something);

Here the assumption is that there is a variable called something that already exists in the global namespace at the time this is run. The anonymous function inside the IIFE takes one parameter - called something. When we immediately invoke it, we pass in the argument something which is already there in the global scope. In the example in the video, they passed in _ which would be the variable holding everything from the lodash/underscore library (there's probably a script tag on the page that imports this library before this JavaScript code is run).

Inside the anonymous function in the IIFE, it takes that existing variable and it adds a new property to it, in this case a method called doThis. Now that method will be available on the variable something along with everything else the was there previously. In the example in the video, it would be like you were using the lodash library but you had your own custom utility function that you wanted to add in to the mix when you use that library in your code.

It’s important for me to point out that the module pattern in this video is out of date, and it’s much cleaner to use modern ES6 modules and a module bundler like webpack. If you’re using create-react-app you’ll get the module bundling from webpack automatically behind the scenes.

In the example in the video, exports isn't a special keyword, it's just an object that we return from the inner anonymous function that contains everything we want it to return and make available in the global scope. In the new ES6 modules, export is a special keyword it works a bit differently. You might have got mixed up by looking at both the older and newer versions of JavaScript modules.