How is this pair of JavaScript functions different?

Question

I’m having a hard time discerning how exactly JavaScript closures work. Please take a look at these two functions and tell how they are different that they produce entirely different results when called multiple times:

Function 1

var add = (function() {
  var counter = 0;
  return function() {
    return counter += 1;
  }
})();
console.log(add()); // result is 1
console.log(add()); // result is 2
console.log(add()); // result is 3

Function 2

function add() {
  var counter = 0;
  function() {
    return counter += 1;
  }
  plus();
}
console.log(add()); // result is 1
console.log(add()); // result is 1
console.log(add()); // result is 1

Answer 1

In the first example, counter is declared and the function being called when invoking add is essentially:

function (){
    return counter += 1;
}

This is important because counter isn't being redeclared every time add is being called.

In the second example, counter is being redeclared each time add is called.

Answer 2

In case 1 you are returning a function which has a Closure over the outer IIFE. As a result the returned function is able to store the values of count even after it has been returned (i.e. Closure) and hence gets an updated values everytime you call add()

Your case 2 seems to be incorrect. You don't have the plus function defined. And even if you define it you will get undefined because you are not returning anything from add()

function add() {
  var counter = 0;
  function plus () {
    return counter += 1;
  }
  plus();
}
console.log(add()); // result is 1
console.log(add()); // result is 1
console.log(add()); // result is 1

When you return plus() from it you will get only 1, because you are actually returning the result of executing counter += 1 every time and everytime counter is reset to 0 when you invoke add()

Answer 3

How is this pair of JavaScript functions different?

In each example you are declaring two functions, one nested inside the other.

In the first example, you are calling the outer function once, return the inner function and assigning it to add. That means that calling add will only execute the inner function.

In the second example, add refers to the outer function. Hence calling add will always execute the outer and the inner function.

---

Maybe you see the difference better if we rewrite the first example slightly (it still produces the same result):

// Example 1
function add() {
  var counter = 0;
  return function plus() {
    return counter += 1;
  }
}

var plus = add();
console.log(plus());
console.log(plus());

Note how add is only called once, which means that var counter = 0; is only executed once, and plus is the function we are actually calling. Because plus was defined inside add, it has access to counter.

Answer 4

You cannot access any variables defined within the enclosure outside that enclosure. That helps you avoid conflicts, like if the same variable name is used by several functions.

Answer 5

In the first example, the outer function is run once, which sets up the counter variable to zero. The outer function returns the inner function, and assigns it to the variable add. When you call add(), the inner function runs in the context it was declared in, so it can increment the counter variable.

In the second example, the outer function is declared, with the name add. You run this outer function each time you call add. This outer function is setting the counter to zero every time, then runs the inner plus function, which increments the counter to 1 and returns it.

Answer 6

Here is what exactly happen in the first snippet.

var add = (function() {
  var counter = 0;
  return function() {
    return counter += 1;
  }
})();

In the above statement you are assigning the variable add a function that increases the counter.

Things to notice:

1. You get this function by executing an enclosure function. (please note what the enclosure function returns)

2. You execute the enclosure function by placing () right after it.

Now the variable add is a function which just increases the counter. Here the environment is set to make a closure - so inner function always remember the previous value of the counter.

Thus, you see the increased number every time you execute the inner function via add variable.