title: JavaScript : Calling Recursive Functions With Promises
body: <p>Language: JavaScript  </p>
  
  <hr>
  
  <p>Recursion - Not my Favorite Topic.</p>
  
  <p>Promises - They can get confusing.</p>
  
  <p>Recursion + Promises - I need to program in a padded room.</p>
  
  <p>I made this little JS Fiddle puzzle I call <a href="https://jsfiddle.net/npineda/2L9ty8x6/" rel="noreferrer"> The RecursiveFunHouse</a> as comedic way of keeping my sanity by simplifying the issue into something silly. Hopefully yall can get a laugh out of my pain :) </p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>Each recursive call is dependent on the outcome of the previous call, but in order to get the outcome I must run an asynchronous task and use that outcome in other sub tasks.</p>
  
  <p><strong>The "Recursive Fun House" helped me boil down the issue to this - the original recursive loop is continuing on with an undefined value as the sub tasks are still executing.</strong></p>
  
  <p>The Fun House - loops around collecting random numbers between (-99) and 99. Once the last difference between the last number and the new number is positive the fun is over </p>
  
  <p>Printing "Made it here 1...Made it here 6" should indicate that the sub-tasks were handled correctly and we have a value for the next loop. </p>
  
  <p>Current it prints 1,2,3,6,4,5 :(</p>
  
  <p><strong>recursiveFunHouse.js</strong></p>
  
  <pre><code>var recursiveFunHouse = function(num){
      console.log("Made it here 1");
      var newNum = performSideTasks();
  
      console.log("Made it here 6");
      console.log("newNum");
      console.log(newNum);
      if(newNum-num &gt;0 ){
              recursiveFunHouse(newNum);
      }
      else{
          console.log("The FunHouse Generated These Numbers :")
        for(var i = 0; i &lt;numList.length; i++){
           console.log(numList[i]);
        }
      }
  
  };
  
  var performSideTasks = function(){
      console.log("Made it here 2");
      someAsyncTask().then(function(num){
              anotherTask(num);
        console.log("made it here 5");
        return num;
          });
  
  
  }
  
  var someAsyncTask = function(){
    return new Promise (function(resolve, reject) {
      console.log("made it here 3");
      var randNum = Math.floor(Math.random()*99) + 1; 
      randNum *= Math.floor(Math.random()*2) == 1 ? 1 : -1;   
  
      setTimeout(function() { 
        numList.push(randNum)
        resolve(randNum)
      }, 100);
    });
  }
  
  
  
  
  var anotherTask = function(num){
    console.log("made it here 4");
      console.log(num);
  
  };
  
  var numList= [];
  
  recursiveFunHouse(20);
  </code></pre>
  
  <p>Note - Forgive my pathetic return statement <code>return num;</code> It just shows what I wish I could tell my computer. </p>
  
  <p><strong>Questions About Recursion and Promises:</strong></p>
  
  <p>1) Should I be worried in the first place about going into the next recursive loop with a promise not yet resolved?</p>
  
  <p>2) If not, what is a clean way to keep this function decomposition and force each recursive loop to wait for the resolution of the last call?</p>
  
  <hr>
  
  <p>Recursion and Promises can seem wizard-level-95 magical sometimes... that's all I'm saying. Question-Done. </p>