JavaScript Revealing Module Pattern global variable is undefined

Question

I'm trying to use the Revealing Module Pattern to scope the JavaScript on my page so that I don't pollute the global namespace.

<script type="text/javascript">
  var myModule = (function(){
    function windowLoad() {
       // window onLoad things
       return;
    }

    function otherFunc(){ 
      // otherFunc things 
    }

    window.onload = windowLoad;

    return { otherFunc: otherFunc };
  })();

  myModule.otherFunc(); // myModule is undefined here
</script>

For some reason, as shown in the comment above, myModule is undefined when I go to use it. Why?

"myModule is undefined here". What makes you think so? It's **not** `undefined`. — Ram, May 20 '15 at 19:39
The only thing that is undefined is the result of `myModule.otherFunc` which is expected since you are not returning anything. See http://jsfiddle.net/4065yLcv/1/ — Ruan Mendes, May 20 '15 at 19:41
@Juan This was not OP's question, as `otherFunc` may do some stuff but not return any value. The issue was that `myModule` is undefined, while it actually is defined. You clearly did not understand OP's issue. — MaxZoom, May 20 '15 at 20:06
@Vohuman do you think I would have made the question if I wasn't getting an `undefined or null reference` error when I called `myModule.otherFunc()`? — ToastyMallows, May 20 '15 at 20:24
@JuanMendes Unfortunately I cannot display the code I'm writing, but the way I have it written myModule is definitely `undefined`. I think it is because the `windowLoad` being assigned to `window.onload` takes too long to complete, and thus `myModule` is still undefined. Moving it outside of the module made it run to completion, and return the object. — ToastyMallows, May 20 '15 at 20:41
@MaxZoom You meant to say that the OP did not explain his problem clearly... Yes, maybe there was some code inside `otherFunc` that relied on code from from `window.onload`, but the OP didn't mention any relationship... I can't answer based on guesses, just what the question his. — Ruan Mendes, May 21 '15 at 12:25

score 3 · Answer 1 · answered May 20 '15 at 19:45

myModule is not undefined. It is the object you returned from within your immediately invoked function; What is undefined is the result of calling myModule.otherFunc because that function doesn't return anything.

See the following snippet for an explanation.

  var myModule = (function() {
    function windowLoad() {
      // window onLoad things
      return;
    }

    function otherFunc() {
      return 1;
    }

    window.onload = windowLoad;

    return {
      otherFunc: otherFunc
    };
  })();

  console.log(myModule); // object {otherFunc: function otherFunc(){...}}
  console.log(myModule.otherFunc()); // 1

score 0 · Answer 2 · answered May 20 '15 at 19:55

As others have mentioned, your code works as written. As you've written it, otherFunc returns undefined since it doesn't have a return statement to explicitly return a value.

When you're debugging something like this, it's best to examine both the object and function you're calling separately:

console.log(myModule); // should print [Object object]
console.log(myModule.otherFunc); // should print a function definition

You could also try adding a return to otherFunc:

function otherFunc() {
    return "This is otherFunc's return."
}

JavaScript Revealing Module Pattern global variable is undefined

2 Answers2