Closure. Why does it work ?

Question

Hello everyone I have a problems with understanding of closures.

This is counter with closure.

function makeCounter() {
let count = 0;

return function (){
return count++;
};
}

let counter = makeCounter();

alert(counter()); //0
alert(counter()); //1
alert(counter()); //2

So why does it work? Why every time when we invoke counter the count variable changes ? I’ve tried to make it without closure.

function makeCounter(){
let count = 0;
return count++;
}

alert(makeCounter()); //0
alert(makeCounter()); //0
alert(makeCounter()); //0

Why this code doesn’t work the same way as code with closure ??? Please help me. I really need to figure out how does it work.

Answer 1

David Carroll there was no reason to remove your comments, it was a nice polite discussion, no insults.
I demonstrated my arguments (although initially exposed in a bad way) providing reliable reference.
Now I'm aware I have to work hard on my exposition skills(and improve my English) if I want to give an appreciable help to the community.
I realized that a bad exposition results in confusing rather than helping!
This is a true lesson for me and I would say thank you!

It's been two years since I've started learning programming and I remember now how it was hard to understand almost everything at the beginning.
Now I am more aware than ever that help people isn't an easy task!

Best regards.

Answer 2

Idk.. now it doesn't seem to be useful to resume this discussion which may seem a dispute although somebody found it funny(just kidding).

I'm glad we met each other, and I understand your intentions, maybe my difficulties in explaining didn't helped.
Also if you feel the same it's better I leave my inappropriate and useless comments.
I'm gonna remove some and edit to save what I hope is good for the community.
Again I'm glad we met each other and this is a good example to all we should be proud of.

Answer 3

Closures aren't magic. They are functions which return a function as in your example.

See, in this line:
let counter = makeCounter();

you're calling the makeCounter.
First, it declares count = 0, then it return an anonymous function which gets assigned to counter variable.

So, now counter is a function. Therefore when you call it inside alert, it "first returns count, and then increments it".

Note that this doesn't mean that count is global. Only, the scope of count is preserved in the counter function.

While in the second one, the count is declared everytime as 0.

Answer 4

Iife are not closures
https://stackoverflow.com/questions/41228824/difference-between-closures-and-iifes-in-javascript

Answer 5

It appears.. it appears a lot!
Hope you take more care of me in the future.
I hate that, I have a good opinion of you, and I esteem your experience.
I put my efforts to help people understand or at least put them in the right way, I can make mistakes, sure, I can explain better, sure, but the way you treated me seems more like a humiliation to me.
We should meet us instead.

Answer 6

Robin R. Let me know if you would like to explore this concept further offline. I think I've over stayed my welcome on this thread. 😉

Apologies max for the distraction cause by my earlier posts.

Answer 7

AZTECCO I truly am glad you feel this way. I do always try to conduct myself as respectful and kind to others as much as possible. 😉

I also try to be mindful of how English isn't everyone's first or even second language in this global community. I wouldn't be able to communicate a fraction of your ability in another language.

I hope to continue engaging with you on various technical topics. There's always new things to learn and contribute.

----
Regarding My Deleted Answers:
----
Again, I felt horrible that my original comments gave the impression that I was trying to embarrass you with such a scrutinized breakdown of what I thought was wrong.

While that wasn't my intention, I now see how it could be perceived to be the case.

If you feel my deleted comments are still worth sharing, I do have a clone of this discussion with the original, unedited text, as it existed, prior to me deleting my answers.

You can DM me for a link or I can post that here for full transparency with the community.

Answer 8

Because in closure, makeCounter() only run once, let counter set to 0 only once. Later counter() ia called would only run the callback function to increment the count.

However in makeCounter() function, everytime the function is called let counter set to zero.

Answer 9

Lol sorry Robin R.
I'm sure you'll come back soon and explain it right!

Answer 10

AZTECCO Every once and a while, I'll come across a profoundly interesting comment that truly piques my interest, especially when it runs counter to my understanding of conventional wisdom. I find these to be quite intriguing as I'm quite often known to go against the status quo myself.

The comment about that ninja article certainly caught my attention, which triggered my initial inquiry for additional context.

What followed was an attempt for me to engage in a friendly dialog designed to explore a technical topic I've become quite familiar with over the years.

However, for various reasons, I completely failed in my approach, which I believe was made worse the more I tried to respond.

Ultimately, my good intentions and genuine desire to enlighten was poorly executed resulting in the opposite effect. While this might work well over voice calls, it fails miserably on this medium.

This left you feeling attacked, an outcome I genuinely regret and apologize for.

All of my comments have been removed.

Answer 11

Robin R. In fact it is clear! This code is a demonstration of the fact that in js functions are objects, and the definition of closure or Functor is function object.
Scope is used to achieve class behaviour, js has no classes.
Everything you return becomes the public interface , the rest is private internal encapsulated stuffs.
Try to return an object..

return{
attempts_count : attempts,
reset : function (){attempts=0;},
....
}
you got a class with public members.

Answer 12

Anyway it's good if it helped you at early stages, but if you want to progress it's really important to distinguish these concepts, that way you will combine them better in the future and achieve great things!

Answer 13

Sorry for the delay Robin R.
Fallen asleep ! 😴 zzZ

https://code.sololearn.com/WjhtA7qHYPqg/?ref=app

Answer 14

Compare example 2. In the article .. and MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

You will see that example 2 in ninja article is an example of lexical scoping and not a closure.

MDN explain what is a closure after..
The subtle difference is that the function is returned..
Because in js a function is an object ad forms a closure.

[At first glance, it may seem unintuitive that this code still works. In some programming languages, the local variables within a function exist only for the duration of that function's execution. Once makeFunc() has finished executing, you might expect that the name variable would no longer be accessible. However, because the code still works as expected, this is obviously not the case in JavaScript.]MDN

Answer 15

1 A closure is the combination of a function and the lexical environment within which that function was declared.

2 Js has "first class functions", you make closures in js and ok this language applies in a very natural way.

A closure is not an anonymous function , but it's made by returning an anonymous function.
You can return a named function but it becomes anonymous outside his lexical context.

We can return a parametrized functions as closures and make partial applications or function factories.

Answer 16

Robin R. Sorry to contradict you but it isn't a good article, it is misleading!
Scope visibility policy is a different thing, a closure is a function object(put extremely simply)which doesn't have to be consumed immediately but can be executed later, and several times.

Answer 17

A different example would be..

let saveState = function (myParam,value){
return function (){
document.style...myparam = value;
};

}

let originalOpacity = new savestate("opacity",document....getOpacity);
let saveMargin("margin",document.style....

...then we change styles in some way...
...
and then we reset
originalOpacity();

Sorry if this is not a real code but I hope i

Answer 18

ok. I almost got it. But can we make a counter without closure ? it will help a lot to me to understand why we have to use closure

Answer 19

Sure @max!
But, then you will have to declare "count" as public, which means that any function can change it. While with closures, the scope is limited only to the counter function ;)

Answer 20

Hey max read this, I helped me understand what it is. Didn't even know what it was before. I think David Carroll shared this.

http://ngninja.com/posts/javascript-closures-made-super-easy