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.