This question already has answers here:
What does the exclamation mark do before the function?
(8 answers)
Closed 9 years ago.
I have been searching, but no clues... or I haven't search the proper way (so please excuse me if duplicate)
Does the following code, mean: If there is no jQuery defined, or no document ready?
!function ($) {
///
!function ($) {
$(function(){ // I know this is an alias to $(document).ready()
.....
}(window.jQuery) // Ending of !function
I'm asking, because I saw it here: http://twitter.github.io/bootstrap/assets/js/application.js and have no I really don't know what it means.
In this case, ! is being used because it's an operator, so the rest of the line will be treated as an expression rather than a statement. This is a way of writing an immediately invoked function expression. The more common idioms can be found here:
Javascript immediately invoked function patterns
! on a function(){}() simply flips (or negates) the value that's returned after immediately calling the function that's defined. Notice that immediately after the function definition, at the very last line, it says (window.jQuery) — that's passing jQuery as the argument to the function and calling it immediately.
But in this case it doesn't appear to do anything important since the return value won't be used anyway. The function will still be executed though.
Also, it says this at the top of the file:
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
So that's evidence further that it's not meant to serve any real purpose.
Related
This question already has answers here:
JavaScript plus sign in front of function expression
(4 answers)
Closed 5 years ago.
I had look at this question to know about what this means.
(function($) {
})(jQuery);
I am looking at different bootstrap plugins, which have +function ($), while defining the function.
What does + does here, does it appends this function to other functions ?
To guide the javascript parser, that the thing written near the unary operator + is an expression.
EDIT: You can create javascript functions anonymously. This is one of the syntaxes to create the same. By doing so, when they are called (i.e evaluated), they act like a returning a function value. You can read more from the second link which provides a good description of it.
This link explains it well
Once declared, if not named, these can be executed inline like IIFE (Immediately invoked function expressions) as well. And in this form, they can then be used to create plugins or used as namespaces and attached to window object or jquery object for use later.
Good sample file to see anonymous function code in action
http://www.programering.com/a/MTMwITMwATk.html
It's a bang function
the + operator is faster than usual !
see more at
javascript function leading bang ! syntax
This question already has answers here:
What does the leading semicolon in JavaScript libraries do?
(6 answers)
What does this JavaScript/jQuery syntax mean?
(6 answers)
Closed 9 years ago.
I'm trying to understand an unusual library for controlling 3D CSS navigation. I'm reviewing the code, but I just don't understand the style.
The javascript code starts
;(function($) {
'use strict';
. . .
})(jQuery);
1) I'm really baffled by the leading semicolon, is there a reason for that?
2) I've never seen the format: (function($) { What am I looking at? Is this some sort of obtuse jquery format? I've seen lots of other formats relating to jquery.. e.g..
$(function() { // as shorthand for $( document ).ready()
but I've never seen (function($) before.. am I missing something?
3) Why is the 'use strict'; code there, if this is a jQuery code. Seems unusual.
4) Finally why is the {jQuery) code at the end of the function?
Oh, and for reference the code I'm looking at is http://www.jqueryscript.net/demo/Easy-jQuery-3D-Side-Menu-Plugin-with-CSS3-Box-Lid/
Many thanks, Zip.
1) This semicolon is here to make sure there will be no conflict when using minifiers, which adds all Javascript after each other. When combining multiple Javascript files it sometimes happens that a certain file has an error and "forgot" to end the last line with a semicolon. The semicolon makes sure the previous code line is ended.
2,4) (function($) { starts an anonymous function which is directly executed. What happens is the following. First we make an anonymous function like we always e.g.:
function($) {
}
In this function the $ is a function parameter. Now if we want to execute this function we need to enclose it in parentheses so it becomes:
(function($) {
});
Since we want to add the jQuery object as parameter for this functions we give it as a parameter like we do in every function:
(function($) {
})(jQuery);
3) Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
Read more information about strict mode at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode and http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
This question already has answers here:
Immediate function invocation syntax
(3 answers)
Closed 9 years ago.
In order to use the $ symbol in jquery and not have to use jQuery.functionname, we use this
(function($) {
})(jQuery);
(In drupal, you actually have to specify this implicitly).
I don't understand this javascript syntax, why is there an initial parentheses? How is the (jQuery) at the end used?
It's just an anonymous function with an argument that's automatically invoked.
For example, if we were to expand it out a bit you'd end up with something like this:
var anon = function($) {
...
};
anon(jQuery);
The $ is a valid identifer in JavaScript and we pass in the existing jQuery object into the function for use through $, as it could be replaced later.
All that's doing is declaring an anonymous function and executing it immediately, passing in one argument (jQuery) into the function. That argument is given the name $ which can be used throughout the scope of the function.
The brackets around the function aren't strictly necessary in all contexts; see the comment under this answer for details. The gist is that they're needed here to make the function behave like an expression instead of a statement (function declaration).
This question already has answers here:
What does the exclamation mark do before the function?
(8 answers)
Closed 5 years ago.
Sorry for posting this but !function is not google-able and I did not find it in my JavaScript code.
Here is how Twitter uses it:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
from https://twitter.com/about/resources/buttons#
It is short-hand or alternative of self-invoking anonymous function:
(function(){
// code
})();
Can be written:
!function(){
// code
}();
You can also use + instead of !.
If you simply did:
function(){
// code
}();
That will create problems, that's why you need to add ! before it which turns the function declaration into function expression.
Quoting docs, section 12.4:
An ExpressionStatement cannot start with the function keyword because
that might make it ambiguous with a FunctionDeclaration.
To better understand the concept, you should check out:
Function Declarations vs. Function Expressions
they're negating the result, not the function itself:
!function( x ){ return x }( true );
!true
false
In reality, it's a slightly compressed form of:
(function(){}())
since it requires 1 less character. The reason it's needed is that you can't call a function declaration directly, e.g. this is invalid:
function(){}()
but adding the ! at the beginning turns it into a function expression and makes it work.
It's usually used to work around a quirk in the JavaScript syntax. This gives a syntax error:
function() {
}();
It's read as a function declaration (like function foo () {}), rather than a function expression. So adding the ! before it, or wrapping it in parentheses, forces the parser to understand that it's an expression.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Location of parenthesis for auto-executing anonymous JavaScript functions?
I'm curious now that I have seen these two similar examples:
(function ($) {
// code
}(jQuery));
and
(function ($) {
// code
})(jQuery);
Is there any difference and if so what?
There's no difference, they do the same thing. You need the parens around the anonymous function, but whether you put the parens triggering the call within those or outside them doesn't matter. Some feel the former is more "correct" (though I've never heard a strong rationale, just Crockford's assertion that it's more clear, which I contest). The latter (in my experience) is much more common.
having a pair of bracket out side the function definition makes no sense, for now, there's no diff.
these 2 equals function(){}(jQuery);