What is the difference between these two:
$(function () {
// do stuff
});
AND
(function () {
// do stuff
})();
The dollar sign ($) and the underscore (_) characters are JavaScript identifiers, which just means that they identify an object in the same way a name would. The objects they identify include things such as variables, functions, properties, events, and objects.
The $() function The dollar function, $(), can be used as shorthand for the getElementById function. To refer to an element in the Document Object Model (DOM) of an HTML page, the usual function identifying an element is: document.
The dollar sign is treated just like a normal letter or underscore ( _ ). It has no special significance to the interpreter. Unlike many similar languages, identifiers (such as functional and variable names) in Javascript can contain not only letters, numbers and underscores, but can also contain dollar signs.
The $ sign is nothing but an identifier of jQuery() function. Instead of writing jQuery we simply write $ which is the same as jQuery() function. A $ with a selector specifies that it is a jQuery selector.
The first uses jQuery to bind a function to the document.ready
event. The second declares and immediately executes a function.
$(function() {});
is a jQuery shortcut for
$(document).ready(function() {
/* Handler for .ready() called. */
});
While (function() {})();
is a instantly invoked function expression, or IIFE. This means that its an expression (not a statement) and it is invoked instantly after it is created.
They are both anonymous functions, but (function(){})()
is called immediately, and $(function(){})
is called when the document is ready.
jQuery works something like this.
window.jQuery = window.$ = function(arg) {
if (typeof arg == 'function') {
// call arg() when document is ready
} else {
// do other magics
}
}
So you're just calling the jQuery function and passing in a function, which will be called on document ready.
The 'Self-executing anonymous function' is the same as doing this.
function a(){
// do stuff
}
a();
The only difference is that you are not polluting the global namespace.
one is a jquery $(document).ready
function and the other is just an anonymous function that calls itself.
$(function () {
// It will invoked after document is ready
});
This function execution once documents get ready mean, the whole HTML should get loaded before its execution but in the second case, the function invoked instantly after it is created.
(function () {
// It will invoked instantly after it is created
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With