Javascript closures and recursion

Question

I've been reading more specifically into the closure concept of programming, particularly pertaining to Javascript. I'm not quite there yet in understanding how it's any different from the Javascript code I've been writing for years though. I understand the concept of recursion as well, but I'm wondering, how are closures and recursion similar? Do I understand correctly that recursion, in and of itself, is a type of closure?

Closure:

function init() {
    var name = "Stack Overflow";
    function displayName() {
        alert(name);
    }
    displayName();
}
init();

Recursion:

function factorial(num) {
    if(num < 0)
        return -1;

    else if(num == 0)
        return 1;

    else
        return (num * factorial(num - 1));
}

alert(factorial(8));

I think I'm beginning to understand that a closure is nothing more than having a function within a function, with the inside function having access to the outside function via scoping. Could there be a recursive closure? I mean, while my example of recursion isn't exactly an example of closure as well, could it at least happen? I'm trying to understand how recursion and closures are similar, different, or if they're even comparable by all. Are there any examples to maybe describe this?

Answer 1

A closure is simply a function or procedure that "closes over" an environment (it's body). In your code, init, displayName, and factorial are all closures. You use JavaScript function keyword (or now we have => arrow functions in ES6) when you want to create a closure.

Recursion is the effect of a procedure repeating itself

---

I've been reading a new book and it talks about some relevant topics. I thought I'd just share some notes here in case you were interested.

Here's a recursive function for calculating factorials. It does the same thing as yours but in a very different way. Let's see!

function factorial(x) {
  if (x < 0) throw Error("Cannot calculate factorial of a negative number");
  function iter(i, fact) {
    return i === 0 ? fact : iter(i-1, i*fact);
  }
  return iter(x, 1);
}

factorial(6); // 720

Compare it to the one you defined above ^.^. Notice that even though it's recursive, it doesn't call itself (factorial) again. This uses a linear iterative process that consumes linear space and time. The evaluation of the function looks something like this

factorial(6);
  iter(6, 1);
  iter(5, 6*1); 
  iter(4, 5*6);
  iter(3, 4*30);
  iter(2, 3*120);
  iter(1, 2*360);
  iter(0, 1*720);
// => 720

Compare that to the process of your function. Here's what yours would look like

factorial(6);
(6 * factorial(5));
(6 * (5 * factorial(4)));
(6 * (5 * (4 * factorial(3))));
(6 * (5 * (4 * (3 * factorial(2)))));
(6 * (5 * (4 * (3 * (2 * factorial(1))))));
(6 * (5 * (4 * (3 * (2 * 1)))));
// => 720

Notice that as n increases, n! adds another stack call. This is a linear recursive process. For large values of n, this method uses significantly more space to calculate the same result.

Answer 2

I've tried writing about closures before here (no mention of recursion, though):

http://hangar.runway7.net/javascript/guide

But with regards to recursion, I'd say closures can come in to play when recursion happens, but they are not necessarily related. I'd actually recommend that you do not use closures in recursion at all, because that can cause unintended bugs. Recursion often depends on each function call executing with only the knowledge of the arguments explicitly passed in to it, and closures violate this principle.

In practice, closures are a way to share information between functions when defining them, especially when you know that they are going to be executed in unknown contexts.

Recursion, on the other hand, is the process of execution for a function that's structured in such a way that it accomplishes it's job by repeatedly calling itself.

Both concepts can be learned much better by Googling them, but just know that they aren't usually related.