Trying a closure the wrong way?

Question

I can't figure out what's wrong with the following code and why would it work when I do it using the second way. Can anyone please help me understand this?

I have this following Javascript code:

var clsFunc = function(prefix) {
  var id = 0;
  return function() {
    id = id + 1;
    console.log(prefix + id);
  }
}

First way (did not work):

If I try to call this function like this nothing happens

clsFunc('div')

Second way (worked)

var getId = {'div': clsFunc('div')}

getId.div()

Result:

div1
undefined

getId.div()

Result:

div2

At least related: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — T.J. Crowder, Feb 18 '17 at 14:38
It's basically the difference between `clsFunc('div')` and `clsFunc('div')()` — Bergi, Feb 18 '17 at 15:22

score 2 · Accepted Answer · answered Feb 18 '17 at 14:33

The clsFunc function creates a function and returns it. So just doing

clsFunc('div');

...is pointless, because it creates a function and then just throws it away, because you didn't store it anywhere.

The second way stores the function that was created in an object property. That function has a reference to the context that created it (the call to clsFunc), even though that call has returned, which contains the id variable. When you call the function (getId.div()), it adds 1 to id and then outputs the prefix ("div") followed by the new value if id (1, then 2, then, 3, etc.).

You don't need an object for your second way, you could just use a variable:

var clsFunc = function(prefix) {
  var id = 0;
  return function() {
    id = id + 1;
    console.log(prefix + id);
  }
};

var f = clsFunc('div');
f(); // "div1"
f(); // "div2"

(The undefineds you're seeing are just because you're running this in a JavaScript console that shows you the result of calling the function; since the function doesn't return anything, the result of calling it is undefined.)

I'm guessing revenge DV from the guy who deleted their answer at the same time. — JJJ, Feb 18 '17 at 14:41
Also great to get an answer from someone with 515k+ reputation. — Shibasis Sengupta, Feb 18 '17 at 14:46

Trying a closure the wrong way?

1 Answers1

Linked