Functions

Hi all, Today I am going to discuss about functions.

First we look at what are functions.

A function is a block of reusable code. It is useful because you can execute it many times. Also we can use the same code many times with different arguments, to produce different results.  A JavaScript function is executed when "something" invokes it (calls it).

To create a JavaScript function we have to do 2 steps. They are,

1. Define a function
2. Invoke a function

Function Syntax

function function_name(parameter1, parameter2){
code to be executed
}

We have to know the difference between parameters and arguments. Parameters are the names listed in the function and arguments are the real values received by the function.

Define a Function
JavaScript functions are defined with the function keyword which is followed by a name and parentheses.
'function' keyword is used To tell JavaScript that we are going to create a function. Defined functions are not executed immediately. They will be executed later, when they are invoked (called upon).

Invoke a Function
The code inside the function will execute when "something" invokes (calls) the function.

There are 3 ways to create a function.

Approach 1 (Function Declaration)
function addNumbers(a,b){
return a+b;
}

We can invoke this function as below
addNumbers(2,5);

Approach 2 (Function Expression)

var x = function(a,b) {

return a+b;

}

we can invoke this function as,

x(4,3);

A function expression can be stored in a variable and variable can be used as a function. As an example

var z = x(4,3);

Approach 3 (Using Function() Constructor)

There is a built in JavaScript function constructor called Function(). Functions can also be defines with using this constructor.

var addNumbers = new Function("a" , "b" , "return a+b");

To invoke this:

var result = addNumbers(2,8);

If you are a beginner to the programming , you may be don't know what the constructor is. The constructor is a special method for creating and initializing an object created with a class. If you don't understand it well, don't confuse , we will meet it again at JavaScript objects. You will be definitely understand what is constructor is at there.

Now let's try to understand these functions using examples.

Approach 1

Example 1

In here we show you how to create a function without parameters.

Figure 1

The result is shown below. First we got the web page with only 'click' button. When the button is clicked, the alert message is popped as shown below.

Figure 2

In here the function is invoked by clicking a button. That means the function is invoked by an event. Also we can invoke this function in usual way, such as 

myFunction();

You can try it on your own and see the result.

Example 2

In here I'm going to show how to use parameters in functions.

Figure 3

In here argument "hello" is passed to the function. By using document.write() , it is shown in web page.

Figure 4

Example 3

In this example I'm going to show how to use numeric values and do the calculations using them.

Figure 5

In here 3 and 7 are passed as arguments. As you can see parameters are a,b . so, a is replaced by 3 and b is replaced by 7. So the result is a+b = 3+7 . So the result is 10.

Here is the result we got,

Figure 6

Approach 2

Example 4

Figure 7

The answer is same as Figure 6.

In here, result(3,7)invokes the function and a,b replaced by 3,7 . The return value is assigned to the variable 'result'. It is shown in web page. Instead using document.write and result(3,7) together, we can also write it in separately. 

var z = result(3,7);

document.write(z);

This will also work. You can try it on your own.

Approach 3

Example 5

Figure 8

In here, Function() constructor is used. Parameters a,b are replaced by arguments 3,7 and the returned value is stored in variable addNumbers. Then this value is assigned to the variable result and it is shown in the web page.

Do these exercises and it will be easy to understand functions. If you have any questions don't hesitate to comment. Thank you.