Thursday, October 15, 2015

JavaScript Function Definition

You can define a function with a:
  • function (definition) expression
  • function (declaration) statement

How to Define/Declare Functions

  • Function Expression
    function [funcName]([arg1, ... [, argn]]){
      statements
    }
    
    • A function expression produces a function object
    • A function expression is like an object literal: in this case it produces an object that inherits from Function.Prototype
  • Function Statement
    function funcName([arg1, ... [, argn]]){
      statements
    }
    
    • A function statement expands into a var statement which declare a variable and assigns a function value to it.
    • Unlike ordinary var statement, both pieces of function statement are hoisted up to the start of script or function

Function Statement VS Function Expression

How do you distinguish a function expression from a function statement ?
If the first token of a statement is function, then it's a function statement, otherwise it's a function expression.

Function Expression Examples

// Ex.1 An anonymous function is a function expression without name. 
var sum = function(num1, num2) { // declare a variable named sum and assign
   return num1 + num2;          // the variable with a function expression 
};

// Ex.2 Named function expression. 
// Since it's difficult to debug an anonymous function it's best to add a name.
var sum = function sum(num1, num2) {
   return num1 + num2;
};

// Ex.3 Function expression for defining a recursive function. 
// When the name is present that name can be used by the function to call itself recursively
var factorial = function recursiveFactorial(x) {
   if(x<=1) return 1;
   else return x * recursiveFactorial(x-1);
};

// Immediately Invoked Function Expressions (IIFE) are anonymous functions wrapped 
// in parentheses and auto-invoking.

// Ex.4 Use an IIFE to invoke a function and store result of the invocation in a variable
var twoPlusTwo = (function sum(num1, num2) { return num1 + num2; }(2,2));

// Ex.5 Use an IIFE as a namespace to avoid local variable conflicting with global variable.
// Variables i and k will never clash with other variables with same name
(function(i) {
   for(var k=0;k<i;k++) {
      console.log("k = "+k);
   }
}(3));

// Ex.6 Function expression as argument. 
// a function expression is used as argument to array's sort method
var array = [0,1,10,2,20,3,30];
array.sort( function(num1,num2) { return num1 - num2; } );

Function Statement Examples

// Ex.1 Function statement 
function sum(num1, num2) {
   return num1 + num2;
}

// Ex.2 Function statement as argument. 
// a function statement is used as argument to array's sort method
function compare(value1,value2) {
   if(value1 < value2) return -1;
   else if (value1 > value2) return 1;
   else return 0; 
}
var array = [0,1,10,2,20,3,30];
array.sort(compare);
---------
Note 1. Variables Hoisting
// before hoisting
var myVar = 0;
// after hoisting
var myVar = undefined; // declaration is hoisted up
...
myVar = 0; // initialisation stands here
JavaScript variables have global or function scope, they are defined throughout the scope, because their declaration is "hoisted up" to the beginning of the script or function. However, initialization occurs at the location of the var statement and the value of the variable is undefined before that point in the code.
---------
Note 2: to call up chrome browser's web console hit F12 on Windows machines or Alt+Command+I on mac machines

No comments :

Post a Comment