CODEWITHSUNDEEP
javascriptanonymous-function
hybrid
hybrid

Reputation: 3968

Seeking clarification on anonymous function JavaScript logic

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.

Upvotes: 2

Views: 104

Answers (4)

Lasse Christiansen
Lasse Christiansen

Reputation: 10325

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.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

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

Upvotes: 1

Andrew Hubbs
Andrew Hubbs

Reputation: 9436

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);

Upvotes: 1

therealszaka
therealszaka

Reputation: 453

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

Upvotes: 1

Related Questions