JavaScript: Functions

JavaScript Functions

A function is a group of reusable code which can be called anywhere in your programme. This eliminates the need of writing same code again and again. Functions help programmers to write modular code. We can divide our programme into a number of small and manageable functions. Like any other advance programming language, JavaScript also supports all the features necessary to write modular code using functions.

Functions that are provided by JavaScript are called built-in functions and those defined by the user are called user-defined functions. alert(), confirm() etc. are examples for built-in functions.

Function Definition

Before we use a function we need to define that function. A function is defined as a code block (inside curly { } braces), preceded by the function keyword and name of the function.

A function can receive a list of values on which it can operate, known as the parameters of the function.

 The basic syntax is:

<script type="javascript">

      function functionname(parameter-list){

                              statements

      }

</script>

Example:

<script type="javascript">

      function helloWorld(){

                              alert("Hello World");

      }

</script>

Calling a Function

The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from anywhere by JavaScript code.

To invoke a function we should simply write the name of that function as follows:

<script type="javascript">

      helloWorld();

</script>

Function Parameters

JavaScript allows the programmers to pass different parameters while calling a function.

These passed parameters can be captured inside the function and any manipulation can be done over them.

A function takes multiple parameters specified as a comma separated list.

<script type="javascript">

      function sayHello(name){

                              alert( "Hello "+name);

      }

</script>

Example:

<script type="javascript">

      sayHello("Vinod");

</script>

When the function is called as shown, it displays an alert dialog box with message 'Hello Vinod'.

Returning values

A JavaScript function can have an optional return statement. This is required if we want to return a value from a function. This statement should be the last statement in a function.

For example we can pass two numbers as parameters to function sum() and we can expect the function to return their sum to the point where it is called.

<script type="javascript">

      function sum(x, y){

                              var s;

                              s = x + y;

                              return  s;

      }

</script>

Now we can call this function as follows:

<script type="javascript">

      var result;

      result = sum(8, 6);

      alert("Sum:"+result );

</script>

The output of the above code will be an alert dialog box displaying 'Sum:14'

Scope of Variables

With respect to their scope variables can be classified into two as local variables and global variables.

A variable declared within a JavaScript function becomes local variable and can only be accessed from within that function. It is said to have local scope. We can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are deleted as soon as the function is completed.

Variables declared outside a function, become global variable, and all scripts and functions on the web page can access it. They are deleted only when the page closes

Example:

<script  type="javascript">

      var x;

      function sum(a,b){

                              x=a+b

      }

      function displaySum(){

                              alert("Sum:"+x)

      }

</script>

In the above example x is a global variable while a and b are local to the function sum(). So x can be easily accessed by the function displaySum() which displays the sum calculated in sum().