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

Question

I'd like to know exactly what's going on here. I know what $(document).ready(function() {...}); does and when it comes into effect. Same goes for jQuery(function($) {...}.

But what does this do?

!function ($) {
  $(function(){
    var $window = $(window)
    //normal jquery stuff
  })
}(window.jQuery)

Is it loaded when jQuery is loaded instead of when the document is 'ready'?

My question is a combination of those within the context of jquery so I don't believe it's a duplicate. People will be looking specifically for this. — Archonic, Jan 04 '13 at 18:50
Reopen. This question is specific to jQuery, and doesn't mention exclamation marks. A careful reading reveals the exclamation mark is a red herring and that the asker is looking for an explanation of the jQuery parameters used in the outer function. — gilly3, Jan 04 '13 at 21:33
I know the reference window.jQuery and thought the answers were spot on. — Archonic, Jan 07 '13 at 14:36

score 8 · Answer 1 · answered Jan 04 '13 at 16:36

8

It creates a closure in which the variable $ is assigned the value of window.jQuery.

The intention is to allow the uninformatively named variable $ to be used as a shortcut for jQuery without conflicting with the large number of other libraries and custom functions that also use $ as a variable name.

answered Jan 04 '13 at 16:36

Quentin

914,110
126
1,211
1,335

5

I usually do `(function(a,b){}(p1, p2))`, I guess `!function(a,b){}(p1,p2)` is just less characters. – gen_Eric Jan 04 '13 at 16:37
I think question also goes for `!` before the function body – Misha Reyzlin Jan 04 '13 at 16:39
1

To complete the answer, the `!` at the beginning is a convention used by some programmers to indicate that the function is invoked immediately. You could also use `+`. It does not affect the way that the code runs in this case (it would if you were assigning the function to a variable or doing anything else with it - it has the effect of turning the return value into a boolean). – clinton3141 Jan 04 '13 at 16:50
So that's why my `$ is undefined` error in my page head disappeared :) awesome answers guys! – Archonic Jan 04 '13 at 16:58
3

@iblamefish - Your comment makes it sound like the `!` is optional and can safely be omitted. The `!` turns what would be a function *declaration* into a function *expression*. Without it you would get a runtime error. I think your point is that there's more than one way to do it, which is certainly true. But, to say it's merely a "convention" that "does not affect the way that the code runs" is potentially confusing. – gilly3 Jan 04 '13 at 17:13

score 4 · Answer 2 · answered Jan 04 '13 at 16:37

4

Using the ! operator before the function causes it to be treated as an expression

!function () {}()

answered Jan 04 '13 at 16:37

Gurpreet Singh

20,907
5
44
60

I didn't exactly get what being treated as an expression meant but others' say it has the code execute immediately. – Archonic Jan 04 '13 at 16:56
1

! makes function an expression but still doesn't invoke the function. In the example we are invoking function by adding () at the end. () has higher precedence than !. – Gurpreet Singh Jan 04 '13 at 17:01

score 3 · Accepted Answer · answered Jan 04 '13 at 16:38

The syntax you're looking at is used for setting up a jQuery closure. This is used to ensure that the jQuery $ variable is garuanteed to be available and correct within the code; ie it can't be overwritten in the global scope by anything else (which is possible if you're using multiple libraries, etc).

This technique is often used by jQuery plugin authors -- if you're interested in finding out more, the docs are here, and explain in more detail why you'd want to wrap your jQuery code in a function like this.

The only point of interest that's different in your example is that in the docs, the function is wrapped in brackets, whereas in the example you've given it's preceded by a !

The ! is a not operator, but doesn't actually get used for anything; I think it's just there instead of the brackets to save a single character of code. Probably helpful if you're into minifying javascript.

score 0 · Answer 4 · answered Jan 04 '13 at 16:38

0

Not quite sure but I guess this is somewhat equivalent to (function(){})() approach and it's about js closures. And it ensures $ and jQuery are the same thing

answered Jan 04 '13 at 16:38

kidwon

4,448
5
28
45

score 0 · Answer 5 · answered Jan 04 '13 at 16:44

The '!' is a 'not' operator. It doesn't do anything in the code. The only reason it is there is to signify that the function will execute immediately.

You may also see functions wrapped in parenthesis instead.

(function() {}());

Whatever is used is personal preference.

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

5 Answers5