Functions in JavaScript

Functions in JavaScript are one of the most important building blocks to know to become a master of JavaScript. Yesterday when I was teaching function in JavaScript to one of my batch then I thought to write something on it.

I think understanding of JavaScript becomes more important in JavaScript than any other programming in the world because JavaScript supports prototypical architecture of doing programming and prototypical approach can only be managed if you know JavaScript's functions in depth.

JavaScript can be written in a HTML page as browser understands it very well. You can make a separate JavaScript file and attach that in HTML using <script type="text/javascript" src=""></script> tag too.

Have a look on the following given JavaScript code please: 

function main(){

    alert('hello Ravi');

}

    //calling the function

    //main(); //you will get an alert when you will refresh your html page.

    //calling main() function on onclick event

    document.getElementById('mydiv').onclick = main;

Note: Don't use parenthesis () after the main function when you are calling a function on onclick event because function will not wait for the onclick event and it will be executed as you will load the html page.

How to pass parameters to a Function

Function's parameter is a way to make a function reusable and flexible. In the following example of code I have passed a parameter to main function and after that I have called twice and you can notice that you will get two different results while we have one function.

Function's parameter is a way to make a function reusable and flexible. In the following example of code I have passed a parameter to main function and after that I have called twice and you can notice that you will get two different results while we have one function.

Example 1:

function main(param){

    alert(param);

}

main('hello Ravi');// hello Ravi

main('hello admec multimedia institute');//hello admec multimedia institute

Example 2:

function main(param1, param2){

    return 'Hello '+param1+'\n Happy to meet you '+param2;

}

alert(main('Ravi', 'again'));

confirm(main('admec multimedia institute', 'first time'));

//document.getElementById('mydiv').onclick = main;// you will get error here*

//document.getElementById('mydiv2').onclick = main;// you will get error here*

*Why Error: As I set two parameters in main function and when you will call the function then surely you need to pass their values too and if I will pass the values then I need to add the parentheses () just next to the main function. But when I will add them then function will not wait for the onclick event as I said earlier and it will be called automatically as you will refresh the page. So the best way to handle this situation is the use of anonymous function. See the example below

document.getElementById('mydiv').onclick = function (){

    alert(main('Ravi', 'again'));

}

document.getElementById('mydiv2').onclick = function (){

        this.innerHTML = main('admec multimedia institute', 'first time');

}

Use of return in Function

return makes a function more flexible and reusable. If you want to display the results coming from a function on multiple locations then always use return in your function. See the below given example please: 

function main(param1, param2){

    return 'Hello '+param1+'\n Happy to meet you '+param2;

}

document.getElementById('mydiv').onclick = function (){

    alert(main('Ravi', 'again'));

}

document.getElementById('mydiv2').onclick = function (){

        this.innerHTML = main('admec multimedia institute', 'first time');

}

Managing Scope in Functions

Scopes in JavaScript are two types of: 

1. Global 

2. Local. 

When you declare any variable and function inside a function then that is in local scope of that function meaning you can only and only access those variables and functions inside that function only.

See the following example; the function nested is accessing all the variables and parameters whether they are inside its parent function or outside of that.

var global = 5;

function main(param1, param2)

{

    var parentLocal = 6;

    function nested(arg1){

        var childLocal = 3;

        return     param1 + param2 + arg1 + global + parentLocal + childLocal;

    }

    return nested(30);

}

alert(main(10,20));

Note: Scope in JavaScript runs from bottom to top.

Interested students can complete JavaScript training online from ADMEC Multimedia Institute.