Ways to declare functions in jQuery

Question

I do not understand the difference between the methods of declaring functions in jQuery, and several times I have lost time trying to call a function, and it does not work properly, because it does not exist in context. I don’t even know if these are different ways of declaring functions in jQuery or is there another way. Can anyone here explain to me? I am completely noob.

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

Answer 1

 $(function() { }) 

... exactly equivalent ...

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

This will run the function when the DOM is ready (DOMReady event).

 jQuery(function($) { }); 

Same. In most settings $ : = jQuery (only in case of NoConflict environment). The first closure parameter you pass to jQuery will return a jQuery object. Thus, this function simply re-maps $ in jQuery in addition to doing exactly what the other did.

The third statement is a simple function declaration that has nothing to do with jQuery.

Answer 2

NOTICE . It really is too long, but I hope someone finds it useful.

To begin with: $ (or jQuery , they are usually the same thing) is a function. In the first two examples, you call this function, passing it a link to an anonymous function. This is a jQuery shortcut for adding a function to be passed as the event listener "document.ready" (the actual name of the DOMContentLoaded event in compatible browsers).

JavaScript has three ways to create functions:

1. Function declaration

 function foo() { // code } 

In a declaration, a function should always be named. In this case, the function name is "foo".

2. Function expression

Can be called or not. They are usually anonymous. They will be considered invalid syntax depending on the position that they appear in the code. For example, this is a syntax error:

 // syntax error function() { // code } 

But this is not so:

 // passing a function expression is fine foo(function() { // code }); 

This is also true:

 // parentheses make it an expression too (function() { // code }); 

It is too:

 // the negation operator also makes it be interpreted as an // expression, instead of a syntax error !function() { // code } 

The two previous examples are commonly used to call a function immediately:

 !function() { alert('invoked') }(); (function() { alert('invoked') }()); 

Isolated, without calling parentheses, they are almost useless, since links to a newly created function are immediately lost if we do not assign it to anything.

This, on the other hand, is very useful:

 // function expressions are fine on the right-hand-side of an assignment var fn = function() { // code } 

3. Using the Function constructor

 // This is similar to 'eval' // the string you pass will be the body of the function var fn = new Function("return true"); 

---

You also said that you are confused by functions and variables that do not exist in a particular context. This is because of scale: in JavaScript, every function creates a new scope. If you create a variable (declared using var ) or another function (using any of the valid options above), this variable or function will not be visible outside the function in which it was declared. But they will be visible inside other nested functions defined in the same area (nested functions are “closed”, they are an external area and therefore are usually called “closures”).

Answer 3

Remember that characters in javascript can be variable names. So there is something similar to this definition in the jQuery source:

 var $ = jQuery = windw.jQuery; 

Where are all the same variables. I point this out because $() and jQuery() are the same thing.

---

This is actually a shortcut to jQuery.ready (), where the argument passed is a callback when the document loaded according to jQuery. When you put function(){} as an argument, you create an anonymous function, and that is what is executed when the callback is called.

 $(function () {//passing anonymous function // Your code }) 

---

This is really invalid code because it must have a name. It will throw an exception "SyntaxError: Unexpected token (".

 function () { // Your code } 

Answer 4

The third is a function declaration that serves nothing as a function and is not called, while the first two are equivalent ($ is an alias for jQuery), the methods for jQuery requesting a function call when the DOM is ready. It is also equivalent

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

See http://api.jquery.com/ready/

Answer 5

The first two methods of calling a function are the shortcut to the $(document).ready() function. This means that if you call a topic inside $ or jQuery , they will execute like this. See http://api.jquery.com/ready/ ! The third relates to calling a normal function. The difference between using $ or jQuery is in conflict with other libraries.

Answer 6

In JavaScript, you can pass functions to other functions. When you see something like

 $('div').click(function() { alert("clicked"); }); 

you pass an anonymous function as an argument to the click() method, which simply performs the function that you provide it.

This way you can achieve the same result with

 function runOnClick() { alert("clicked"); } $('div').click(runOnClick); 

Answer 7

jQuery is not a programming language. This is a library written in JavaScript for Javascript. JavaScript function declaration rules are the only ones you need to follow. jQuery does not provide any new way to define functions.

These are invalid function definitions:

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

This is the correct function definition:

 function myFavoriteFunction() { // Your code }