3

I've seen the same code written both ways and wonder if there's any tradeoff between them.

Method 1:

(function(i) {
    // Do something to i now
}(global_variable))

Method 2:

(function() {
    // Do something to global_variable now
}())

Why would you pass a global variable to a function if it's going to exist in that scope anyway?

CamJohnson26
  • 1,119
  • 1
  • 15
  • 40

3 Answers3

3

In this case, it gives clear instructions that this function uses a global and creates an easier to type alias. Also, it makes accessing the variable a little faster because it doesn't need to search all the scopes until it finds it in the global scope.

In the case of regular functions, not an iife as in your example, it makes your function more testable because you can mock the global that is passed in more easily.

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
1

for aliasing purposes for example:

(function(leeloo){

    //inside here you can use the short term

})(LeeloominaiLekataribaLaminaTchaiEkbatDeSebat)

//this would be similar, it's a matter of preference
(function(){
    var leeloo = LeeloominaiLekataribaLaminaTchaiEkbatDeSebat;

    //...
})()

or to enclose a value, like this example:

(function($){

    //in here, $ preserves the passed/injected value, 
    //even if the global value changes

})(jQuery.noConflict())

this way you could even use multiple versions of jQuery in the same page.

Thomas
  • 11,958
  • 1
  • 14
  • 23
  • 1
    note that in your second case, it would only be beneficial to do this if you were performing something asynchronous within the iife, otherwise there would be no reason to preserve it. But, that's almost always the case with jquery anyway. – Kevin B Feb 16 '17 at 22:12
  • @KevinB `performing something asynchronous within the iife` ... like pretty much that includes user interaction, one of the main use-cases for jquery ;). yeah, jquery is not the best example for this, but the best that comes to my mind without making to much stuff up *(staying generic)*. It's just using a iife as a closure to encapsulate and preserve the passed value, regardless of what happens to the global variable. – Thomas Feb 16 '17 at 22:23
  • Exactly. with jquery you're most likly binding events, thus performing asynchronous actions. so it's a good example to use (even though the same can be accomplished using `$(function ($){...})`) – Kevin B Feb 16 '17 at 22:25
1

You might want to use the first example when you don't want to permanently change the value of global_variable, for some reason. E.g. after executing this code the local copy will be changed but the global variable will be unchanged.

global_variable=true; (function(i){ i=false; return i; }(global_variable));

This code however, obviously alters global_variable:

global_variable=true; (function(){ global_variable=false; }());

Edit: somewhat tangentially, this variation looks like it alters the global variable, but it doesn't because calling the function creates a shadow copy of the global variable. You should probably avoid this pattern since it's likely to create confusion:

g=true; (function(g){ g=false; return g; }(g));
david25272
  • 976
  • 6
  • 12