Web Programming TutorialsJavascript Functions

Javascript Functions

Today we are going to learn a new topic called functions in javascript. Functions are mostly used to reduce a programmer’s most of the work by just writing a code snippet once in a function and giving it a call wherever needed in the program. Functions also help to reduce a program size.
Functions are always used with two steps.

  1. Function definition
  2. Function call
  • Function definition means the code written once which can be used many times.
  • Syntax of function definition is shown below:
  • function sampleFunction()
    {
      --------          // code here
    }
    
  • Here, function is a keyword and sampleFunction is the function name followed by parenthesis. The curly braces with the code inside it is the function body.
  • Function will execute only when it is given a call. Syntax for calling a function is just its name with parenthesis.
  • Syntax for function call to above function is shown below:
  • sampleFunction();
  • This will call the above function and execute the code inside it.
  • Parenthesis indicates that it is a function.
  • Naming convention used for function in javascript is start the function name with small alphabet followed by capital letter for every second word in the function name.

Let’s learn the function by trying it practically. Follow the steps one by one.

  1. Create a new folder on desktop naming it as “sec3_ch5”.
  2. Open a new notepad++ document and save it as “functions.html” inside the newly created folder “sec3_ch5”.
  3. Now write the following code in “functions.html” document:
  4. <!DOCTYPE html>
    <html>
    <head>
    <title>Javascript Functions</title>
    </head>
    <body>
    </body>
    </html>
    

    When we open the page “functions.html” in the browser, it will look like this:

    initial_output_before_javascript
    fig 1

  5. Let’s learn different forms of functions.
    • Simple Function:
      • Write a simple function in the head section as shown below inside the script tag:
      • <script>
        function sayHello()
        {
        	document.write("<b><i>simple function output</i></b><br><br>");
        	document.write('Hello');
        }
        </script>
        
      • This is a simple function called sayHello(). It performs the task of printing Hello on the browser.
      • The statement, document.write(“simple function output

        “); is for the viewer’s information.

      • For any function in javascript, it is a common practice to write the function name starting with small letter followed by capital initial letter for every next word in the function name.
      • Function definition is written above. But it is of no use unless and until the function is called.
      • Let us call the function in the body section inside the script tag:
      • <script>
          sayHello();
        </script>
        
      • Calling a function is very easy; we just have to write the function name, parenthesis and semicolon.
      • The output after calling the function is shown below:
      • sayHello_function_output
        fig 2

      • Here, when the function sayHello(); is called and executed, Hello is printed on the browser.
    • Function with parameters:
      • We had seen a simple function before. Now we will learn a function with parameters.
      • Parameter means a value passed to a function in the function call.
      • Write the following function sayIt() in the head section below the simple function sayHello().
      • function sayIt(word)
        {
        	document.write("<br><br><b><i>function with one parameter output</i></b><br><br>");
        	document.write("<br><br>" + word);
        }
        
      • This function sayIt() contains a parameter word in the parenthesis.
      • The statement, document.write(“

        function with one parameter output

        “); is for viewer’s information.

      • This parameter accepts the information passed to the function during function call and then uses it in the function.
      • Parameter of a function is nothing but a variable that stores value passed to it.
      • Here, in the above function we have a parameter named word whose value is printed in the function.
      • This value is not going to be printed unless and until the function is executed.
      • It will be executed only after it is called. So function call is shown below, it is written in the body section.
      • sayIt(‘This is my function’);
      • Output of it is shown below:
      • sayIt_function_output
        fig 3

      • Here, in the above output, we can see that The text This is my function is the value passed to the parameter word of function sayIt(word); which is then printed after execution of the function.
    • Function with multiple number of parameters:
      • You can pass any number of parameters you wish to a function.
      • Let us see an example of this kind.
      • Write the following function in the head section below sayIt() function.
      • function sayAll(word1,word2)
        {
        	document.write("<br><br><b><i>function with multiple parameters output</i></b><br><br>");
        	document.write(word1 + " " + word2);
        }
        
      • sayAll() function contains two parameters named as word1 and word2. These will accept the values passed in the function call and use them in the function when it is executed.
      • Multiple parameters are added by separating them with comma.
      • The statement, document.write(“

        function with multiple parameters output

        “); is for viewer’s information.

      • This function will print the values of the two parameters with a space left in between.
      • This sayAll() function will be executed when it is called. So call this function in the body section as shown below:
      • sayAll('Hello','World');
      • Here, in this function Hello is the value which will be assigned to the first parameter word1 and World is the value which will be assigned to word2 respectively.
      • Output of the above function is shown below:
      • sayAll_function_output
        fig 4

      • Here, in the output of function with multiple parameters, Hello World is printed output.
    • Absence of any one parameter in the function call:
      • There is one important concept of multiple parameters in a function.
      • Consider you have 4 parameters in a function and you have passed only 3 parameters in the function call.
      • In this situation, undefined word will be printed in the place of fourth parameter.
      • Let us experience it practically.
      • We will use our sayAll() function.
      • Keep your function definition as it is, only remove the value of the second parameter from the function call.
      • Our original function call is like this:
      • sayAll('Hello','World');
      • Just remove World from it, will look like this:
      • sayAll(‘Hello’);
      • Now, see the output below:
      • sayAll_function_with_undefined_output
        fig 5

      • Here, we can see the output of function with multiple parameters.
      • You can notice that in the output Hello undefined is printed.
      • This is because our second parameter is absent in the function call to sayAll() function. In the absence of any parameter undefined is printed in its place.
    • Giving a default value to a parameter in a function:
      • In some languages like PHP we can give default value to the parameters in a function as shown below:
      • function sayAll(word1,word2=’World’)
        {
        	-----         //some code here
        }
        
      • But this syntax doesn’t work in javascript.
      • We can create defaults in javascript as shown in the code below:
      • function sayDefault(word1,word2)
        {
        	document.write("<br><br><b><i>output of function with default value for parameter</i></b><br><br>");
        	word2=word2||'Brad';
        	document.write(word1 + ' ' + word2);
        }
        
      • The function above is same as sayAll() function seen before.
      • The only difference is the statement, word2=word2||’Brad’;
      • This statement indicates that if a value for word2 is passed in the function call, the function should use that value or else the default value Brad.
      • Now if you run this function by passing only one value, it will use the default value Brad .
      • Now, just make a function call as shown below to experience it practically.
      • sayDefault(‘Hello’);
      • The output is shown below:
      • sayDefault_function_output
        fig 6

      • Here the output for function with default value for parameter is Hello Brad.
      • In this case, value for only one parameter is passed in the function call and hence the function has used the default value “Brad” for the second parameter.
      • But if we pass two values to the function sayDefault() instead of one, the second value will override the default value and print whatever is passed in the function call.
      • For example, if the function call is as follows:
      • sayDefault(‘Hello’,’Qwerty’);
      • The value Qwerty will override the default value Brad and the function will use Qwerty instead of Brad.
      • Output is shown below:
      • Actual_value_overriding_default_value
        fig 7

      • You can see here, The default value Brad is replaced with Qwerty, which is the actual value passed for second parameter in sayDefault() function.
  6. Creating a function for addition of two numbers.
    • You can write any logic you want in the function.
    • We will try to write a function for addition of two numbers.
    • So write the following function in the head section below sayDefault() function:
    • function add(num1,num2)
      {
      	sum = num1 + num2;
      	return sum;
      }
      
    • This function takes two parameters. Addition of the two parameters is stored in a variable “sum” and is returned to the function call using the return statement. If you don’t write return statement, you cannot show your output. So either you print the output in the function itself or you return the output using return statement.
    • This function is executed when it is called as shown below:
    • add(5,5);
    • But in this case, no value will be printed, because when you return any value from the function it should be accepted in a variable or should be directly printed.
    • Both the ways are shown below:
    • First way:
    • A=add(5,5);
      document.write(“Addition = ” + A);
      
    • Second way:
    • document.write(“Addition of two numbers = ” + add(5,5));
    • The output of addition of 2 numbers is shown below:
    • additon_of_2_nos_output
      fig 8

    • Addition of numbers is shown above.
    • But if we pass string values in the add function. The code is given below:
    • document.write("<br><br><b><i>addition of 2 strings</i></b><br><br>");
      S = add('10','10');
      document.write("Addition = " + S);
      
    • It will concatenate both the string values passed in the function.
    • Here, we have stored the value returned by the function in variable S and then displayed it.
    • Output is shown below:
    • Addition_of_2_strings
      fig 9

    • Here, in the above output you can notice that when we passed integer numbers to the function add() for addition, the result given was (5+5) = 10. But when we passed values 10 and 10 in string format the result of addition given was 1010. This is because strings are not added but they are concatenated.

This was all about functions in javascript. We have learned many different concepts of function in this tutorial.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -