Is w3schools example about javascript closure practically useless?

Question

I was reading this example on w3schools about Javascript closure applied to the "counter dilemma":

https://www.w3schools.com/js/js_function_closures.asp

In practical use, this example seems almost nonsense. Why should I wrap the variable "counter" into a closure, protecting from accidentally modifications in global scope, when I can't protect the variable "add" containing the function itself?

To be more specific... I have this code:

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

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

// the counter is now 3

W3schools says at start: "The problem is, that any script [in global scope] on the page can change the counter, without calling add()."... the closure above is proposed as a solution. Ok. But what about protecting "add" from subscribing? This make the variable still "vulnerable".

So, what is the advantage of closure implementation?

Answer 1

In the example given by w3schools, the problem they are solving with the above closure is protecting the variable counter from being modified directly. If counter was in the global scope and then you defined a function, such as add to increment the counter by some value, then what you have done is defined an interface for other parts of code to interact with the counter variable.

When you define an interface between some data and other parts of the codebase, it stands to reason that you probably want that interface to be enforced. In other words, if you place counter in the global scope, then there is no way to enforce the use of your add function because I can just do this: counter += 7 right in the global scope.

Wrapping the counter variable in a closure allows you to hide the counter variable from the global scope, meaning that the only way to modify counter is through the add function. This enforces the use of add by preventing the modification of the value of the counter variable directly.

So this is a simple, but good example, of how to use closures to create private variables.

Answer 2

It's not useless because it keeps counter as a property of add. If you need to protect add you could wrap that in yet another closure.

var add = "something";
(()=>{
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    console.log(add());
    console.log(add());
})();
console.log(add);

Of course, in real life, you should avoid using super generic names like add in the first place, and in real life, if you need your methods to have properties you would probably use OOP instead...

class counter{
    constructor(){
        this.counter = 0;
    }
    add(){
        this.counter++;
    }
}

var c = new counter();
c.add();
c.add();
console.log(c.counter);

---

If you just want to make sure the variable name is never reassigned you could use const (a JS "constant") instead.

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

try{
    // this won't work
    add = "something";
}catch(e){
    console.log(e.message);
}

// Add is still a function here
console.log(add());
console.log(add());
console.log(add());

Answer 3

Examples are often made extra simple for educational purposes. To make them less distracting.

The thing the example is trying to show is that you can only increase the counter using this closure. You cannot decrement, you cannot reach the counter variable to do anything else with it. You can of course throw away the whole function but that's not something you'd likely do by accident.

Accidentally changing the value of a variable that is not in a closure is easily done.

Answer 4

Here is an example "less problematic" and "more useful".

Memoization

var fibonacci = (function() {
  var memo = {};

  return function f(n) {
    if (!(n in memo)) {
      memo[n] = n === 0 || n === 1 ? n : f(n - 1) + f(n - 2);
    }

    return memo[n];
  }
})();

Closure allows to access the “memo” object, which stores all of its previous results.