Closure Example - Recursion

closure_with_recursion_naive.js

var incrementUntil = function(max) { 
   if(num >= max) return num 
   num++
   incrementUntil(max)
}
 
var num = 0
incrementUntil(3)
num //> 3

Let’s try a couple of things based on the function we created from the previous example:

num = 0
var myFun = function() { 
 incrementUntil(3)
 return num 
}
myFun() //> 3
num //> 3

So far so good…

num = 0
var myFun2 = function() { 
 var num = -1
 incrementUntil(3)
 return num 
}
myFun2() //> -1 …….Why?
num //> 3

…Uh oh what happened?

Observation: closure is tied to the scope in which it is first created, not where it is called.

Although incrementUntil is being executed to myFun2, it didn't modify the num in myFun2's scope because incrementUntil only recognizes the num that was inside of its parent's scope when it was first created. It doesn't recognize the num inside of the caller, myFun2 because it doesn't maintain a closured reference to its caller's scope.

How do we fix myFun2?

var myFun2 = function() { 
   var num = -1
	
   function incrementUntil(max) { 
      if(num >= max) 
         return num 
	 num++
	 incrementUntil(max)
   }
   
   incrementUntil(3)
   return num 
}
	
myFun2() //> 3

ok