Different Ways To Declare Function In JQuery

In JavaScript / jQuery we can define a function in several ways. We can also create a user defined function just like other jQuery functions for DOM elements. In this article I will explain some methods to declare a function and also explain how to create a user defined function.

Method 1: Basic JavaScript Function

This is a basic way to define a function in JavaScript.

Syntax

functionFunction_Name(Para1,Para2,…..)

Now we create a function that will calculate the interest for given Principal, Rate and Time.

Example

Output



Method 2: Declare Function as Variable Name

A JavaScript function can also be defined using an expression. This function expression can be stored in a variable. After storing the expression in a variable, this variable can be used as a function.

Syntax

Varvariable_name=function(Para1,Para2,….){
//function expression
}

Now we take previous example and declare function expression in a variable.

Example
Output



Method 3: Self Invoking Function

A self-invoking expression is invoked automatically, without being called. We can’t call a self-invoking function. We have to add parentheses around the function to indicate that it is a function expression. Self-Invoking function do not contain any name.

Example
Method 4: Create own jQuery Function

jQuery provide an excellent way to create a user defined function and use this function just like other jQuery function for DOM elements. The “jQuery.fn.extend” method is used to create user defined function. Here, jQuery.fn is just an alias for jQuery.prototype.

Syntax

uery.fn.extend({
//function implementation
return;
})

Example
In the above code we create a function that reverse the string . We will use this function to reverse the value of a textbox.
In the above code we called the “Reverse_String” method on button click event. Let us take a demo.


Method 5: Extend Existing jQuery Function

In jQuery, we can extend any existing function by adding some extra functionality. Now we extend the functionality of “jQuery.size()” function. We know that the “size” function return the number of elements in the jQuery object.

Let us take an example.

Html Code