Using Javascript functions

What is Javascript function.

Javascript function syntax.

  • A function will consist of a block of statements which can be performed several times by calling the function at different locations in the Javascript program.
  • A function can perform a piece of work with or without any outside influence.
  • If a function need any outside influence, then the function will get these as arguments.
  • A function can return a value (perhaps as a result of the work it has done) or not return any value. The latest variant is often referred to as a procedure in other programming languages​​.

    Example:
    <script type="text/javascript">
      // Add is the name of the function
      function Add(p1,p2,p3,p4,p5) {  // p1,p2,p3,p4,p5 are arguments to the function
        return p1+p2+p3+p4+p5;  // return the sum of all arguments
      }
      // To perform a function you must specify function name followed
      // by comma separated arguments within parentheses
      document.write(Add(1,2,3,4,5)+"<br>");
    </script>

Javascript functions are objects.

  • All the functions you create in Javascript are function-objects with inheritance from the built-in 'Function' object.
  • Function name or reference can be used to access methods and properties inherited from the 'Function' object.

    Example:
    <script type="text/javascript">
      function show(p1,p2,p3,p4,p5) {  // 5 arguments to the function
    // 'length' is an inherited characteristic, which is made ​​unique for the function
    // 'length' is the expected number of arguments to the function
        return show.length; 
      }
      document.write(show()+"<br>");
    </script>
  • Since functions are objects you can use functions as data.

Javascript function as data.

  • Javascript functions are not only a defined syntax to use in other parts of the Javascript program, as in many other programming tools, but also to be regarded as data.
  • This means that functions can be assigned to variables, disposed of as arguments to functions, be assigned to properties of object or to be elements of arrays with more.

    Example:
    <script type="text/javascript">
      function Add(p1,p2,p3,p4,p5) {
        return p1+p2+p3+p4+p5;  // return the sum of all arguments
      }
      var myAdder=Add; // myAdder has now the same function reference as Add
      // call the function through the myAdder reference variable
      document.write(myAdder(1,2,3,4,5)+"<br>");
    </script>

Javascript function without any name.

  • JavaScript allows functions to be defined with function literals, which is the same as defining functions unnamed. This may seem somewhat strange, but is widely used within Javascript.
    function(p1,p2,p3,p4,p5) {
        return p1+p2+p3+p4+p5;
      }
  • As you already know; functions can be assigned to variables, passed as arguments to functions and so on. In those cases you do not need a function name.

    Example:
    <script type="text/javascript">
      // assigned to a variable; myAdder
      var myAdder=function(p1,p2,p3,p4,p5) {return p1+p2+p3+p4+p5;}
      // to execute the function; you uses the variable, 
      // which is a reference to the function
      document.write(myAdder(1,2,3,4,5)+"<br>");
      // assign to an array location
      var myarr=[function(p1,p2,p3,p4,p5) {return p1+p2+p3+p4+p5;}];
      // to execute the function; you uses the array location as a function
      document.write(myarr[0](1,2,3,4,5)+"<br>");
      // assign to an object
      var myobj={"Adder":function(p1,p2,p3,p4,p5) {return p1+p2+p3+p4+p5;}};
      // to execute the function; you uses the object member as a function
      document.write(myobj.Adder(1,2,3,4,5)+"<br>");
    </script>

Passing arguments to functions.

  • Primitive data types are sent as arguments to functions by value​​. This means that you will receive a copy of the original data and can not make any changes to the original data in such functions.
  • Object types are sent as arguments to functions by reference​​. This means that you can make changes to the original data in such functions.

    Example:
    <script type="text/javascript">
      // first - passing primitive numbers to function
      var k1=4, k2=3;
      var hypotenuse1=function(p1,p2) {
        p1*=p1; // updates the argument, but only the local argument is changed
        p2*=p2; // updates the argument, but only the local argument is changed
        return Math.sqrt(p1+p2);
      }
      document.write(hypotenuse1(k1,k2)+"<br>");
      document.write("Orignal data after function call: "+k1+" "+k2+"<br>");
      // second - passing an object to function
      var ks=[4,3];
      var hypotenuse2=function(obj) {
        obj[0]*=obj[0]; // updates the original data value through the argument
        obj[1]*=obj[1]; // updates the original data value through the argument
        return Math.sqrt(obj[0]+obj[1]);
      }
      document.write(hypotenuse2(ks)+"<br>");
      document.write("Orignal data after function call: "+ks[0]+" "+ks[1]+"<br>");
    </script>
  • Javascript does not require that the number of arguments used in a call of a function is consistent with what the function expects.
  • If a function requires a specific number of arguments, so can 'arguments' object to be in good stead. Remember that the "arguments" object exists only inside a function.
  • The 'arguments' object is an array-like object containing all the argument values received.
  • The 'arguments' object has two properties, length (number of argument received) and callee (a reference to the current function).

    Example 1:
    <script type="text/javascript">
    // Here is a function defined with no arguments (don't expect any),
    // but accepts any number of arguments  
      function Add() {
        var sum=0;
        for (var i=0 ; i< arguments.length ; i++)
          sum+= arguments[i];
        return sum;  // return the sum of all arguments
      }
      document.write(Add(1,2,3,4,5,6,7,8)+"<br>");
    </script>

    Example 2:
    <script type="text/javascript">
    // Here is a function defined with 3 arguments,
    // and accepts only the same number of arguments  
      function Add(p1,p2,p3) {
        var sum=0;
        if (Add.length== arguments.length) {
          for (var i=0 ; i< arguments.length ; i++)
            sum+= arguments[i];
         }else {
           alert("This function requires exactly three arguments.");
         }
         return sum;  // return the sum of all arguments
       }
      document.write(Add(1,2,3,4,5,6,7,8)+"<br>");
      document.write(Add(6,7,8)+"<br>");
    </script>

Returning data from functions.

  • Primitive data types are returned from functions by value​​. This means that a function returns a copy of the internal primitive value.
  • Object types are returned from functions by reference​​. This means that a function returns the original object, that is may be created in the function.

    Example:
    <script type="text/javascript">
      function getSelection(minRadius, maxRadius, step) {
         var arr= new Array();
         for (var r=minRadius; r<=maxRadius ; r+=step) {
           var a = Math.PI *r*r;
           arr.push(a);
         }
         return arr; // returning an array object
      }
      var res=getSelection(2, 10, 1); // res is the returned array object
      for (var i in res)  document.write(res[i]+"<br>");
    </script>
  • If you call a function that does not return anything you get "undefined" in return.

© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.