Closure and anonymous function in javascript

Question

i am trying to understand closure.How would you explain behavior of these two scenarios.

Scenario 1

<input type="button" value="Click me" onclick="alert(handle())"/>
<script>
var handle = (function(){
  var count = 0;
  return function(){
    return ++count ;
  }
})();
</script>

Scenario 2

<input type="button" value="Click me" onclick="alert(handle()())"/>
<script>
var handle = function(){
  var count = 0;
  return function(){
    return ++count ;
  }
};
</script>

aren't both scenarios same? why in first scenario outer function is called only one time and after first click, on every click inner function is called.

What is the (function() { } )() construct in JavaScript?

adeneo
– adeneo

2017-09-09 16:53:37 +00:00
Commented Sep 9, 2017 at 16:53 — adeneo
– adeneo, Commented Sep 9, 2017 at 16:53

Garrigan Stafford · Accepted Answer · 2017-09-09 17:56:45Z

1

In the first case you create function handle that returns a function, and then you call that function so the handle method being used is the closure inside handle, which keeps track of the variables inside the closure scop(count). The second case you are returning a new closure each time because calling handle() returns a new closure. Therefore you are resetting the scope on each button click since you are creating a new closure to be called with handle().

answered Sep 9, 2017 at 17:56

Garrigan Stafford

1,4131 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario F · Accepted Answer · 2017-09-09 19:31:22Z

0

in the first case, you are evaluating the function, so what you are getting is the inner function, which will increment the counter every time it is called.

In the second case however, handle contains the outer function, so if you call that, you will get the inner function, which in turn will increment the counter when called.

So both snippets are called handle, when they are actually doing different things.

edited Sep 9, 2017 at 19:31

answered Sep 9, 2017 at 16:58

Mario F

47.5k6 gold badges39 silver badges39 bronze badges

2 Comments

VivekT Over a year ago

in first case, everytime i click button, count value increases by 1.

Mario F Over a year ago

you are right @VivekT my explanation was incorrect. I edited the answer and now I think it reflects reality

Collectives™ on Stack Overflow

Closure and anonymous function in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related