Seeking clarification on anonymous function JavaScript logic

Question

I'm a little confused with what's going on with a common pattern I keep seeing. It usually looks like this.

(function( w ){
    w.functionName = function(){

      // Function stuff, blah blah blah

    };
  }( this ));

Another common one I see looks like:

(function( $ ){
    $.fn.functionName = function(){

    // Function stuff, blah blah blah

    };
}( jQuery ));

I'm some what familiar with anonymous functions, though I'm curious, what is w, and what is it being used for?

What is the reason for this/jquery at the end of the anonymous function.

Thanks for all the feedback on this! I appreciated all the responses.

`w` is `window`, most likely. `this` at the global scope is `window`. What you see are IIFEs (immediately invoked function expressions). — Cᴏʀʏ, Jan 05 '13 at 23:34
The pattern is called `immediate function`. Functions are the only way to create a scope in javascript, that's why immediate functions are useful. — bennedich, Jan 05 '13 at 23:36
possible duplicate of [How does an anonymous function in JavaScript work?](http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work) — Cᴏʀʏ, Jan 05 '13 at 23:37
Also you can read about currying: http://stackoverflow.com/questions/113780/javascript-curry-what-are-the-practical-applications — therealszaka, Jan 05 '13 at 23:39

score 1 · Accepted Answer · answered Jan 05 '13 at 23:36

1

w is just being the formal name of parameter of a function(normal thing, and it this example, actual parameter is this or jQuery). I don't know why jQuery in this given example is doing thing, probably it is considered as kind of nice initialization.

Example:

var obj={'x':1};
console.log(obj.x);//1

(function(p){
    p.x=5;
})(obj);

console.log(obj.x);//5

answered Jan 05 '13 at 23:36

therealszaka

453
4
20

First you define anynomous function. Lets consider it as `function a(...){...}`. `a` has one parameter: `w`. So this function actually looks like: `function a(w){...}`. Then, you call it like `a(this)`, and if this=window, than yes, w=window. – therealszaka Jan 05 '13 at 23:42
And btw, anynomous functions needs to be called in place of its definition, because later you can't refer to it. – therealszaka Jan 05 '13 at 23:44
So in the first example, w.functionName = function(){ // Function stuff, blah blah blah }; is the same as window.functionName = function(){ // Function stuff, blah blah blah }; since this is passed as the paraemter, and this in the global scope is window. And in the second example, $.fn.functionName = function(){ // Function stuff, blah blah blah }; is just the same as jquery.fn.functionName = function(){ // Function stuff, blah blah blah }; Interesting – hybrid Jan 05 '13 at 23:46

score 1 · Answer 2 · answered Jan 05 '13 at 23:42

1

This pattern is used to create a scope in JavaScript. It is called an Immediately-Invoked Function Expression (IIFE). The parameters are passed to guarantee they have the correct values in case the global references are redefined later on.

Another common way this pattern is used is with an undefined parameter as well.

(function ($, undefined) {
   // ...
})(jQuery);

answered Jan 05 '13 at 23:42

Andrew Hubbs

9,338
9
48
71

It is done for the same reason. Technically, you can redefine undefined on the global namespace to have a value. In my example above you are protecting against that. Kind of a crazy, but still something to consider if you are writing code that other may use. – Andrew Hubbs Jan 05 '13 at 23:58

charlietfl · Answer 3 · 2013-01-05T23:49:34.687

One of the main reasons you see this with jQuery plugins is to insulate $ from other libraries that use it such as Mootools or prototype

In the jQuery case.. there is an argument named $ and (jQuery) passes the jQuery object into the self executing function.

Then when you use $ within the function it has already been defined as the jQuery object allowing you to write $.doStuff()

Using this insulated instance of $ is not the global $ that jQuery creates when loaded so if another library that uses $ alias is in place, the $ within the self executing function is insulated from the global $ avoiding conflicts. The same holds true if you use jQuery.noConflict() elsewhere within your code

Lasse Christiansen · Answer 4 · 2013-01-05T23:51:02.587

This is an example of "Immediately-invoked Function Expressions" (IIFE).

In the online book Learning JavaScript Design Patterns by Addy Osmani the section Namespacing Patterns covers IIFE.

To answer what this common pattern is used for, I have included a couple of quotes from the book:

Earlier in the book, we briefly covered the concept of an IIFE (immediately-invoked function expression) which is effectively an unnamed function, immediately invoked after it's been defined.

In JavaScript, because both variables and functions explicitly defined within such a context may only be accessed inside of it, function invocation provides an easy means to achieving privacy.

IIFEs are a popular approach to encapsulating application logic to protect it from the global namespace but also have their use in the world of namespacing.

I recommend you take a look at the book - it covers other useful patterns such as the Module Pattern as well.

Thanks for the recommendation, I'll have to check it out! – hybrid Jan 05 '13 at 23:53 — hybrid, Jan 05 '13 at 23:53

Seeking clarification on anonymous function JavaScript logic

4 Answers4