Self-invoking function

ok so im not getting a simple concept in this code below

const add = (function () {
  let counter = 0; // line 2
  return function () {counter += 1; return counter}
})();

add();
add();
add();

When we call add() function 3 times why is counter value 3 and not 1?

  let counter = 0; // line two

shouldn’t this line in the code initialize counter to 0 everytime we call the function? so even after calling add() ten times the counter should stay 1? but I don’t get it.

2 Likes

This is a great question, and a pretty advanced topic. You got this!

So, when we see this:

(function(){

})()

This is a function that immediately runs. The function body, wrapped in the first () is the functions definition, and the last () tells our function to immediately execute. This is often referred to as an IIFE, an immediately invoked function execution. It just means we define and run the function all at once.

And when we do that, our function starts running. First thing it does, it creates a “scope,” a private space for its variables to live. Those variables are only available to things that are defined within that scope, and those variables are thrown out as soon as everything that refers to them stop. So normally, the function ends and its internal data is erased.

Unless… What if we couple somehow return something from our function, *that could keep a line into that function? It’s still observing those values, so they never get erased! And they’re still private, only available to things created within that function!

That is what happens here. The outer function creates a variable, and then returns a function that can continue to interact with and tell us about that variable. This is called a closure: a closed scope, with some way to access it.

Each time you run add(), you are running the inner function, which can increment and share that value of counter inside that scope. nothing else can see or touch that counter inside the outer function, it is truly private.

For more, i might Google MDN closures.

2 Likes

Thanks for the info.

1 Like