Javascript - what does this line mean? !function ( $ )

Question

Javascript: what does this line mean?

!function ( $ )

Nothing, without context. It's not a standalone expression. Show us the rest! — Cameron, Jan 23 '12 at 03:12
Can you give some context, like a link to the file where it comes from, or at least the few lines above and below? — Simon, Jan 23 '12 at 03:12
It looks like the beginning of a self-executing function that will not return a value. — Havvy, Jan 23 '12 at 03:18

nnnnnn · Answer 1 · 2012-01-23T03:32:35.670

I'll bet a slightly more complete version would look like this:

!function ( $ ) {
   // some code
}(jQuery);

Basically the above uses the ! operator to have the anonymous function be interpreted as a function expression that can then be immediately called. Take away the ! and you have an invalid function declaration (or function statement, depending on your prefered terminology) - invalid because it has no name. The more usual way to do this is by putting it in parentheses:

(function ( $ ) {
   // some code
})(jQuery);

But some people like to save a character by using ! rather than parentheses.

One reason why you might use code like this is so that you can create some working variables that don't end up in the global scope. Or, from within the anonymous function, to create an object that is in the global scope but that has methods which can access private variables in the anonymous function's scope.

Regarding the $ argument, I'm just guessing that jQuery would be passed as a parameter to the function since this is common when using the argument name $. One reason you might do that is so that you can use another library that defines $ at the same time as using jQuery, yet use the $ for jQuery within this block.

score 2 · Answer 2 · answered Jan 23 '12 at 03:18

2

I think we're missing some data, but I'm betting the piece is from a closure in a conditional statement or ternary.

var test = 'Testing!';
(!function ( $ ) {
   alert($);
   return false;
}(test) ? alert("bad") : alert("good"));

http://jsfiddle.net/MattLo/WpqfN/3/

answered Jan 23 '12 at 03:18

Matt Lo

5,442
1
21
21

1

@Havvy: Sure it is. All functions create closures in JS. – Jan 23 '12 at 03:25
Matt Lo: You're certainly right about the IIFE, but the `!` is more likely being used in place of the `()` to force the function to be evaluated as part of an expression. [See this question](http://stackoverflow.com/q/8611700/1106925). So the return result of the function is probably ignored. – Jan 23 '12 at 03:27
Interesting, man this silly question has definitely got the brains moving from a lot of people. – Matt Lo Jan 23 '12 at 03:31
1

@am not i am Except that no values are being closed over at all, and the function is not callable after it's initial execution. – Havvy Jan 23 '12 at 03:43
@Havvy: `$` is in the local variable environment, and the variable environment of the enclosing environment is bound to the environment record of the current lexical environment. Doesn't matter if the function isn't referenced, and therefore isn't callable again. Though short lived, the closure does exist. – Jan 23 '12 at 03:52
...I know this is in contrast to some highly voted answers here on SO. [Like this one](http://stackoverflow.com/a/111200/1106925) – Jan 23 '12 at 03:54
@amnotiam - However, this answer seems to use the term "closure" as if it was synonymous with "immediately executed anonymous function", which is not correct (though again confusing the two is common here on SO). – nnnnnn Jan 23 '12 at 03:59
@nnnnnn: I see what you're saying. The verbiage doesn't sound so much like it, but the example may suggest that a "closure" is *specifically* an IIFE, which isn't the case. Not sure what was intended. But you're right, people do seem to use "closure" as though it distinguishes an IIFE from other functions. – Jan 23 '12 at 04:04
@Havvy So lets make aware of the standard. A closure must be reusable? – Matt Lo Jan 23 '12 at 04:05
1

@MattLo: Havvy thinks so, but I don't. Lexical scoping is made possible via closure. In JavaScript every function has access to its enclosing variable environment. – Jan 23 '12 at 04:24
Okay, time to ask it to SO, because I know about both points but simply left it ambiguous – Matt Lo Jan 23 '12 at 04:31
The function doesn't make usage of lexical scoping either. It could be placed anywhere, and as long as it was given the same input, it would give the same output. – Havvy Jan 23 '12 at 04:32
@amnotiam: I agree with your last comment; functions indeed have access to their parent scope's variables. But we could be here all night arguing whether the inner function actually *closes over* (and hence is a closure) those variables when it leaves it's natural scope (e.g. by being returned), or rather as soon as it's created. The function in this answer is stateless, so technically it doesn't need to close over anything (though the implementation may automatically make it a closure anyway). At this point, the definition of a closure becomes hard to pin down and open to interpretation. – Cameron Jan 23 '12 at 04:35
@Cameron: I'd suggest that a function that doesn't need to, and therefore doesn't, reference its enclosing variable environment is a matter of optimization of an implementation. I certainly don't doubt that modern implementations optimize such things away when possible. But that's really another matter IMO. – Jan 23 '12 at 04:49
@Havvy: Lexical scoping is part of the language irrespective of whether or not a specific function makes of it, or a specific implementation can optimize some of it away. – Jan 23 '12 at 04:52

Javascript - what does this line mean? !function ( $ )

2 Answers2