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

i'm using twitter bootstrap create site , trying initialize tooltips. apart adding like:

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

in application.js , unless retain, following piece of code used in bootstrap docs, tooltips don't initialize.

 !function ($) {    $(function(){      })  }(window.jquery) 

what above code do?

lets explain breaking code

function () { }() 

or written

(function () { })() 

is self-invoking anonymous function, known immediately-invoked func­tion expres­sions (iifes). executes anonymous function inline immediately.

read more @ explain encapsulated anonymous function syntax.

anonymous functions powerful feature , have benefits scoping ("variable name spacing"), see what purpose of self executing function in javascript?.

---

now using

function ($) {  }(window.jquery) 

let's skip ! now.

so passing, window.jquery function argument , accepting $.

what making $ alias window.jquery (original jquery object) , hence ensuring $ refer jquery object inside closure, no matter if other library has taken that($) outside.

so code write inside closure using $ work.

another benefit $ comes argument in anonymous function, brings closer in scope chain , hence takes less time js interpreter find $ object inside closure otherwise took if used global $.

---

$(function(){    }) 

it's jquery's document ready block might know, ensures code inside function run when dom ready, , hence event binding's work properly.

read more @ http://api.jquery.com/ready/

and ! has been explained here or @ what exclamation mark before function?

in short:

to demonstrate benefits of !, lets consider case,

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

if paste above code in console, 2 alerts, error

typeerror: undefined not function 

why happens? let's simulate how js engines executes above code block. executes anonymous function function() {alert('first');}() shows alert , returns nothing undefined returned inside (). same happens second function too. after execution of block, ends having like

(undefined)(undefined) 

and it's syntax self-invoking anonymous function, tries call function, first, (undefined) not function. undefined not function error. ! fixes kind or errors. happens !. quoting lines above answer link.

when use !, function becomes single operand of unary (logical) not operator.

this forces function evaluated expression, allows invoked inline.

and solves above problem, can rewrite above block using ! like

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

---

for case can put tooltip code inside document ready block this

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

and work fine.

and if use $("[rel=tooltip]").tooltip() without doc ready block, there chance when code run, there isn't element rel=tooltip in dom yet. $("[rel=tooltip]") return empty set , tooltip won't work.

an example markup when won't work without 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, interprets markup sequentially, execute js code face as. , when executes js block here, hasn't yet parsed a rel="tooltip" tags yet, appears after js block, not in dom @ moment.

so above case $("[rel=tooltip]") empty , hence tooltip won't work. it's safe put js code inside document ready block like

$(function){     // put js code here }); 

hope makes sense now.