What Does (Function($) {})(Jquery); Mean

What does (function($) {})(jQuery); mean?

Firstly, a code block that looks like (function(){})() is merely a function that is executed in place. Let's break it down a little.

1. (
2.    function(){}
3. )
4. ()

Line 2 is a plain function, wrapped in parenthesis to tell the runtime to return the function to the parent scope, once it's returned the function is executed using line 4, maybe reading through these steps will help

1. function(){ .. }
2. (1)
3. 2()

You can see that 1 is the declaration, 2 is returning the function and 3 is just executing the function.

An example of how it would be used.

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

As for the other questions about the plugins:

Type 1: This is not a actually a plugin, it's an object passed as a function, as plugins tend to be functions.

Type 2: This is again not a plugin as it does not extend the $.fn object. It's just an extenstion of the jQuery core, although the outcome is the same. This is if you want to add traversing functions such as toArray and so on.

Type 3: This is the best method to add a plugin, the extended prototype of jQuery takes an object holding your plugin name and function and adds it to the plugin library for you.

jQuery newbie: what does jQuery(function($) { ... }) means?

jQuery(function($) {

});

is the safest version of all three. It makes $ the local variable and thus gracefully avoids the conflicts with any other variables which possibly use $ symbol.

I think it was also added fairly recently, don't remember seeing it before.

These function all do the same things - execute some code when DOM is ready. $(document).ready(function(){}) is the original one, and it matches the underlying javascript API.

"$" and "jQuery" which accept function as an arguments were created as shortcuts to avoid repeating such a common construct. Accepting a function which accepts $ as its first argument is a further syntax sugar - now you get convenience of the closures without the need to do it yourself.

What does $(function() {} ); do?

$(function() { ... });

is just jQuery short-hand for

$(document).ready(function() { ... });

What it's designed to do (amongst other things) is ensure that your function is called once all the DOM elements of the page are ready to be used.

However, I don't think that's the problem you're having - can you clarify what you mean by 'Somehow, some functions are cannot be called and I have to call those function inside' ?
Maybe post some code to show what's not working as expected ?

Edit: Re-reading your question, it could be that your function is running before the page has finished loaded, and therefore won't execute properly; putting it in $(function) would indeed fix that!

Meaning of (function(){ in Javascript

The first example is a closure, it's a design pattern commonly used in JavaScript. In the second one you're calling the $ function giving another function as parameter (jQuery will execute it as soon as the document is ready, since it's an alias of $(document).ready(function () {})).

This is an example of closure:

(function () {
    var foo = 'foo';
    var bar = 'bar';
    window.foo = foo;
})();    // Those () mean that you're calling this anonymous function

console.log(typeof foo);    // Logs 'string'
console.log(typeof bar);    // Logs 'undefined', since 'bar' is internal to the closure's
                            // scope and was not exposed like was 'foo'

And this is an example of $(function () {}):

$(function () {
    alert('Document ready');
});

Check these pages:

• How do JavaScript closures work?
• https://api.jquery.com/jquery/#jQuery3

What does (function( $ ){...})( jQuery ); do/mean?

It allows the author to use the $ function within the plugin without exposing it to the global scope - just keeps things a bit cleaner outside of the plugin itself.

I believe this is best practice for developing jQuery plugins - sure I saw it mentioned in the docs somewhere!

What does $(function() {}) mean in javascript

It is document ready handler

$( document ).ready(function() {
  // Handler for .ready() called.
});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

is equivalent to

$(function() {
  // Handler for .ready() called.
});

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

1.Trying to hide an element that is not created yet

2.Trying to get the size of an image that is not loaded yet

The jQuery team has created an shorter method for the document ready event:

$(function(){

   // jQuery methods go here...

});

It is depend upon the developers which syntax is to be used but document ready event is easier to understand when reading the code

For more details : See

What does it (function($) {})(); mean?

Its an Immediately-Invoked Function Expression (IIFE).

It means that the code between the curly braces will be executed as soon as its parsed and inside a closure. This means that any variables declared inside the function body with var will be discarded from memory after the function is finished executing. This is a way to isolate code and prevent namespace polution. You can also use this to rename variables for a particular scope:

For example, consider jquery:

(function($){
  //inside the closure, jquery can be accessed using '$'
  $(...)
})(jquery);

or

(function(customJqueryName){
  //inside the closure, jquery can be accessed using 'customJqueryName'
  customJqueryName(...)
})(jquery);

Check out closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

---

Related Topics