Wednesday 6 April 2016

Using anonymous functions might give problems if used recursively in javascript - an example scenario

Recursive functions in javascript

Making a json object that uses anonymous function instead of a named funciton which causes problem in a scenario in which we make another variable ftn2 to point to the same function ftn by assigning ftn2 to ftn. Then we set ftn to null and we lose our reference to the recrusive call to ftn inside the funciton ftn. If we use a named function then the problem gets solved and recursion works.

// Making a json object that uses anonymous function 
var orgChart = {
    name: 'Dilshad',
    subordinates: [{
        name: 'Rafaqat',
        subordinates: [{
            name: 'Sardar',
            subordinates: []
        }, {
            name: 'Shaukat',
            subordinates: []
        }]
    }]
};
//Writing an anonymous function that uses recursion.
var ftn = function(topEmployee) {
    console.log(topEmployee.name);
    console.log('Number of subordinates of ' + topEmployee.name + ': ' + topEmployee.subordinates.length);
    /* 
      Calling itself recrusively for each employee to check it s(he) has subordinates. 
      */
    for (var i = 0; i < topEmployee.subordinates.length; i++){
     console.log(topEmployee.name + "'s subordinate # " + (i + 1) + ": ");
        //Recursive call to ftn in the line below.
        ftn(topEmployee.subordinates[i]);
    }
};
//calling the funciton ftn and passing it the json object representing the organization chart.
//**********************************
//ftn(orgChart);
//**********************************
/*
Here is the output of the function above:
Dilshad
Number of subordinates of Dilshad: 1
Dilshad's subordinate # 1: 
Rafaqat
Number of subordinates of Rafaqat: 2
Rafaqat's subordinate # 1: 
Sardar
Number of subordinates of Sardar: 0
Rafaqat's subordinate # 2: 
Shaukat
Number of subordinates of Shaukat: 0
*/
//The problem with the anonymous function above starts when we do the following two lines.
//**********************************
//var ftn2 = ftn;
//ftn = null;
//ftn2(orgChart);
//**********************************
/*
We get an error after the first top employee of the organization chart as shown as the recursive call fails because we have set ftn to null and we are still calling it in the recrusive call inside the body of the function. 

Dilshad
Number of subordinates of Dilshad: 1
Dilshad's subordinate # 1: 
Uncaught TypeError: ftn is not a function
*/
/*
 The solution is simple - use a named function instead of an anonymous funciton as shown below:
*/

//Writing a named function that uses recursion.
var ftn = function showAllEmployees(topEmployee) {
    console.log(topEmployee.name);
    console.log('Number of subordinates of ' + topEmployee.name + ': ' + topEmployee.subordinates.length);
    /* 
      Calling itself recrusively for each employee to check it s(he) has subordinates. 
      */
    for (var i = 0; i < topEmployee.subordinates.length; i++){
     console.log(topEmployee.name + "'s subordinate # " + (i + 1) + ": ");
        //Recursive call to ftn in the line below.
        showAllEmployees(topEmployee.subordinates[i]);
    }
};

/* Now the code works even if we do the following. */
var ftn2 = ftn;
ftn = null;
ftn2(orgChart);
/* But don't forget to comment the lines above which were causing errors. The lines between 
//********************************** and //**********************************
 should be commented
*/

No comments:

Post a Comment