function inside of IIFE not recognized

Question

I have an IIFE that I am trying to make into a bookmarklet. I would like to have the modal the bookmarklet will pop up have some buttons that will call a function. However, when I have a structure like this:

(function(){

   var __myFn = function(str){ //also have tried function __myFn(){..}
      alert(str);
   }

   //some AJAX that builds HTML with the `result`s

   document.getElementById("resultDiv").innerHTML = "<span onclick='__myFn(" + result.someData+ ")'>test</span>


}());

I get Uncaught ReferenceError: __myFn is not defined

How can I make this function recognized? Is there another way?

Answer 1

When you use the var keyword, you're creating a variable that is local to the scope of the enclosing context. Since the enclosing context is a function, __myFn is local to the function itself and not known outside (ie, not known in the global context).

If you want to use something that is inside, you would have to return a reference to it. You can use something like the module pattern for this:

var myModule = (function(){

   var __myFn = function(str) { 
      alert(str);
   }

   return {
       myFn: __myFn
   };

})();

Then you can do:

//some AJAX that builds HTML with the `result`s

document.getElementById("resultDiv").innerHTML = "<span onclick='myModule.myFn(" + result.someData+ ")'>test</span>

However, I recommend not binding your event handler this way. Use jQuery or use DOM methods ( addEventListener ) to bind event handlers. This way you could even do it inside the IIFE itself, which means you don't even have to return something from the IIFE. This means your global context is not polluted. Right now, the only reason you have to return something from the IIFE is because you are binding an event-handler inline via HTML.

Here are two examples. The first one assumes that the IIFE returns a reference to __myFn :

var resultDiv = document.getElementById("resultDiv");
resultDiv.addEventListener("click", myModule.myFn, false);

Here is the second example that does it within the IIFE itself:

(function(){

   var __myFn = function(str) { 
      alert(str);
   }

   var resultDiv = document.getElementById("resultDiv");
   resultDiv.addEventListener("click", __myFn, false);

})();

Answer 2

For reasons I don't understand, I have found that taking the "var" off the declaration makes it work.

Example 1 (fails):

(function() {

    var counter = 0;
    var init = function() { console.log("init called"); }
})();

init(); // regardless of whether I named the function or not, this fails.

HOWEVER: Example 2 (works):

(function() {
    var counter = 0;
    init = function() { console.log("init called"); }
})();

init(); // this calls the function just fine.

Note you can add any number of functions inside the iife this way just fine.