CODEWITHSUNDEEP
javascript
Industrial
Industrial

Reputation: 42788

What does the arguments passed to a javascript closure do?

How do I explain the role of the arguments passed in the beginning vs end of a wrapped Javascript closure as the one shown below? 

(function($, window) {
  return $(function() {
    return alert("js!");
  });
})($, window);

Upvotes: 2

Views: 95

Answers (5)

Ruan Mendes
Ruan Mendes

Reputation: 92314

It may be easier to explain if you change the argument names and name the function

(function init($, win) {
  return $(function() {
    return alert("js!");
  });
})(jQuery, window);

The init function is being passed the parameters jQuery and window immediately as it's defined, they are available as arguments to the init function as $ and win

If you break it out into the equivalent code, that may also be easier to understand

function init($, win) {
  return $(function() {
    return alert("js!");
  });
}
init(jQuery, window);

Upvotes: 1

Sebastian Rosik
Sebastian Rosik

Reputation: 41

In that way you are passing arguments that will be safe in the scope from an overwrite in the future. For example:

var a = 1
(function(a){
    setTimeout(function(){
        console.log('This variable is still safe', a);
    },2000)
})(a)
a = 0
console.log('has changed', a)

So in your example you can be sure that $ and window will be that what you are expecting.

Upvotes: 1

paulodiovani
paulodiovani

Reputation: 1305

When a function returns another function it can be enclosed on parentesis to be immediate executed. The last parenthesis are the passed arguments to it.

You can do some tests do understand:

var a (function(){});
typeof a;
a.toSource()

typeof (function(){});
(function(){}).toSource()

Upvotes: 0

jbabey
jbabey

Reputation: 46657

The set of parameters on top is where the parameters are recieved, and the set of parameters on the bottom is where they are passed.

They're ensuring that their closed copies of the global variables don't get reassigned outside of the closure. It is a way of protecting your code against other (potentially poorly written) code. Consider this example:

var $ = 'foo';

var blah = (function($) {
    return function () {
        alert($);
    };
})($);

var shizzam = (function() {
    return function () {
        alert($);
    };
})();

// someone evil overwrites my $ var
$ = 'bar';

// blah still works
blah();
// but shizzam is now borked
shizzam();

http://jsfiddle.net/xfTcq/

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245459

The first appearance are function parameters, the second is passing values for those parameters when executing the function.

Keep in mind, the parameters to the function don't need to match the names being passed (this could, in fact, cause confusion later on):

(function(jQuery, w) {
    return jQuery(function(){
        return alert("js!");
    });
})($, window);

Would work the same way.

Upvotes: 5

Related Questions