6. javaScript: Functions

javaScript can help you to add different lines of code in one block. You can assign some meaningful name to your code block and the block can perform one particular task for you. This block is called Function.


Declaration of the Function

Function declaration is as follows:

function nameOfTheFunction(){
     your code here
}

Write the word function and assign some name to the function with two small brackets (). After these small brackets add curly start bracket and end bracket { }. All your required code will come in between two brackets.

Once you are done with writing your code block, you can call this function from anywhere by using name with ( ) small brackets.

Copy the following code and add in your html file and execute in your browser.


Function with parameters

Function also provides more features which you can use to achieve your task, for example function with parameters.

function myFunction(myvalue){
    alert("Hello from my function and my value is " + myvalue);
}
myFunction("awesome");

As you can see myFunction takes one parameter myvalue. It is not required to use var keyword for parameter declaration. Variable type will be decided when you will call this function and pass some value to it. It will work with myFunction("awesome") as well as myFunction(1234).

You can have more than one parameters to the function.

function myFunction(myvalue1, myvalue2){
    alert("Hello from my function and my first value is " + myvalue1 + " and my second value is " + myvalue2);
}
myFunction("awesome",1234);

One thing is very important to mention that when you are calling your function, make sure you are passing your parameters in correct order. See following example:

function myFunction(myvalue1, myvalue2, myname){
     var result = myvalue1 + myvalue2;
    alert("Hello my name is " + myname + " and my result is " + result);
}
myFunction(12,23,"Khan");

You want to add two numbers and you want to display your name. If you will call this function with following order, it will work as per your expectations,
myFunction(123,123,"Khan")

but if you will call
myFunction("Khan", 123,123).

javaScript will not generate any error but you will not get your desired result. So be careful about your variables order while passing to the function.


Function with return type

When you want your function to do some calculation and return this result back, use return keyword. Add the return keyword at the end of the function with the variable which you want to return.

// function with parameters and return value
function myAddFunction(value1 , value2){
var result = value1 + value2;
return result
}
var value = myAddFunction(5 , 6);
alert(value);

Function will return the result after calculation and you can assign this result to your variable "value".


Function with argument list

javaScript provides some very great features which can make your life very easy. One feature is argument list to the function. Declare a function with no parameter

myAddFunction( ){
// your code here
}

Call this function with more than one parameters myAddFunction(1,2,3,4,5), javaScript will automatically convert these values into the array.
Check this example:

// function with argument list
function myAddFunction(){
   var temp = 0;
   for (var i = 0; i < arguments.length ; i++) {
      temp += arguments[i];
   }
   return temp;
}
var value = myAddFunction(1,2,3,4,5);
alert(value);

These types of functionalities make this language very famous and powerful.


Anonymous function

Another very interesting feature of javaScript is called anonymous function or unnamed function. Create a function for temporary purposes and call it at the same time.

Convert normal function to unnamed function.

function myAddFunction(value1 , value2){
var result = value1 + value2;
return result
}

Remove the name myAddFunction and cover this function with small brackets ( ).

(
function(value1 , value2){
var result = value1 + value2;
return result
}
)

you can pass values to these functions very after this closing bracket and catch the return value into the your local variable.

var myvalue = (
function(value1,value2){
return value1 + value2;
}
)(5,3);

alert(myvalue);

now variable myvalue contains value from unnamed function which is 8. In coming articles you will see the benefits and good use of unnamed functions especially with jQuery.

 

Download file from GITHub