What does function ($) {$ (function () {})} (window.jQuery) do?

Question

I use twitter bootstrap to create a site and try to initialize tooltips. Besides adding something like:

  $ ("[rel = tooltip]"). tooltip () 

in application.js, if I don’t save, the next piece of code used in bootstrap documents, my tooltips are not initialized.

 ! function ($) {

   $ (function () {  

   })

 } (window.jQuery)

What does the above code do?

Answer 1

Let's explain by breaking the code

function () { }() 

Or is often written as

 (function () { })() 

It is a self-invoking anonymous function, also known as Immediately-Invoked Functional Expressions (IIFE) . Which immediately performs an anonymous inline function.

For more information, see Explain the syntax of an encapsulated anonymous function .

Anonymous functions are a powerful function and have advantages such as scope ("line spacing between variables"), see What is the purpose of the self-execution function in javascript? .

---

Now they use

 function ($) { }(window.jQuery) 

Now skip it ! .

So they pass, window.jQuery to this function as an argument and accept as $ .

What this does is make $ alias of window.jQuery (the original jQuery object) and therefore ensure that $ will always reference the jQuery object inside this closure , regardless of whether the other library has that ( $ ) outside.

So, the code you write inside this closure using $ will always work.

Another advantage is that $ comes as an argument in an anonymous function that brings it closer to the scope chain , and therefore it takes less time for the JS interpreter to find the $ object in closure than if we used global $ .

---

 $(function(){ }) 

This ready-made jQuery document block, as you might already know, guarantees that the code inside this function will work when dom is ready , and therefore all event binding's will work correctly.

More details at http://api.jquery.com/ready/

And what is it ! has been well explained here or What does an exclamation mark do before a function?

In short:

To demonstrate the benefits ! consider the case

 (function() { alert('first'); }()) (function() { alert('second'); }()) 

If you enter the above code in console , you will get two warnings, but then you will get this error

 TypeError: undefined is not a function 

Why is this happening? Let it simulate how JS engines execute the above code block. It performs this anonymous function function() {alert('first');}() shows a warning and as it returns nothing, undefined returns inside () . The same thing happens for the second function. So, after executing this block, he got something like

 (undefined)(undefined) 

and since its syntax is similar to the self-invoking anonymous function, it tries to call this function, but the first one, (undefined) not a function. Thus, you get an error undefined is not a function . ! corrects this type or errors. What is happening with ! . I am quoting the lines from the answer link above.

When you use !, the function becomes the only operand of the unary (logical) NOT operator.

This makes the function evaluate to an expression that allows it to be immediately called inline.

and this solves the above problem, we can rewrite the above block using ! as

 !(function() { alert('first'); }()) !(function() { alert('second'); }()) 

---

For your case, you can simply put your tooltip code inside the finished document block, for example,

 $(function(){ $("[rel=tooltip]").tooltip(); }); 

and it will work fine.

And if you just use $("[rel=tooltip]").tooltip() without a doc ready block , then there is a chance when this code is run, there is no element with rel=tooltip in the DOM yet. Thus, $("[rel=tooltip]") will return an empty set and tooltip will not work.

An example of markup when it will not work without a doc ready block ,

 . . . <script type="text/javascript"> $("[rel=tooltip]").tooltip(); </script> . . . . <a href="#" rel="tooltip">Something</a> <a href="#" rel="tooltip">Something</a> <a href="#" rel="tooltip">Something</a> 

As browsers, sequentially interprets the markup, it will execute js code as soon as it encounters it as. And when he executes the JS block here, he has not yet parsed the tags a rel="tooltip" as it appears after the JS block. Therefore, they are not in the DOM at this point.

So, for the above case, $("[rel=tooltip]") empty and therefore the tooltip will not work. Therefore, it is always safe to put all of your JS code inside a document ready block, for example

 $(function){ // put all your JS code here }); 

Hope all this makes sense to you now.