Javascript Function Basics

Posted on by
  1. Function is represented as Object in Javascript
  2. Has 2 phases – Function Definition and Function Execution
  3. Two ways of defining function
    Function Declaration / Named Function – Function object would get created at scope creation phase
    Function Expression / Anonymous Function – Function object would get created at execution phase – Interepreter would throw error incase the function is called before anonymous definition.

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    //Named Function
    displayAge();
     
    function displayAge(){
     console.log('My Age is 33')
    }
     
    //Anonymous Function
    var age = function(){ //Context/scope execution phase
      console.log('My Age is 33')
    }
    age();
  4. No concept of function overloading. Function with near matching argument would be called.In the below code getSum has 2 arguments but still it gets called.
    1
    2
    3
    4
    function getSum(num1, num2) {
      console.log('Function overloading is not possible');
    }
    getSum();
      Function overloading is not possible
  5. Function namespace context would be created with the samename as the function namespace
  6. In the below code the getLunch appears to be overloaded but there would be only one namespace in context with name getLunch
  7. So you may expect the output to be different but all the times getLunch(buffey, paid) would be called in below code
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    function getLunch() {
      console.log('Free Lunch');
    }
     
    function getLunch(paidLunch) {
      console.log('paidLunch');
    }
     
    function getLunch(buffey, paid) {
      console.log('paidLunch buffey');
    }
    getLunch();
    getLunch(5);
    getLunch(5,10);

    Output

    paidLunch buffey
paidLunch buffey
paidLunch buffey
  8. So what would be the workaround. Check the code as below
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    function getLunch() {
    if(arguments.length === 0)
      console.log('Free Lunch');
     
    if(arguments.length === 1)
      console.log('paidLunch');
       
    if(arguments.length === 2)
      console.log('paidLunch buffey');
    }
     
     getLunch();
     getLunch(5);
     getLunch(5,10);

    Output

    Free Lunch
paidLunch
paidLunch buffey
  9. Using Restparameter feature from ECMAScript6
    1
    2
    3
    4
    5
    6
    7
    function getLunch(bill, space, ...menu) {
      console.log(bill);
      console.log(space);
      console.log(menu);
    }
     
    getLunch(150, 'Open Terrace', 'idly', 'dosa', 'vada');

    Output

    150
Open Terrace
["idly", "dosa", "vada"]
Posted in JS.

Comments are closed.