1

Suppose I declare a variable called foo in the ready function. Normally, locally declared variables are deleted when the function ends right?

I want to use this variable in the event listener of #someid. I tried this and the foo variable is still accessible when a click-event occurs on #someid.

Why isn't this variable destroyed and still accessible, when the ready function ends? Is it safe to declare a variable and use it this way? I don't want to declare the variable globally, as I didn't.

EDIT: Where are these event listeners and their variables stored?

Here is my js:

$(document).ready(function() {
var foo = 0;

//random event listener
$('#someId').on('click', function() { foo++; }); //increment foo

});
Benjistep
  • 25
  • 5
  • 3
    Related: [How do JavaScript closures work?](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) – James Thorpe Apr 19 '16 at 11:11
  • `foo` is in the local `scope` of `$(document).ready` which is parent scope for `click-handler` variables in the `outer-scope` of the `function` are accessible in the `function` – Rayon Apr 19 '16 at 11:12
  • Welcome to SO! Also, there are no global variables in the code you have provided. – evolutionxbox Apr 19 '16 at 11:13
  • few things for you to look for ,a) when to use function/event in dom ready/outside. b) declaring variable globally,but initializing in function c) Closures – Shekhar Pankaj Apr 19 '16 at 11:13
  • I know I did not declare foo globally. But after the execution of the ready function, all local variables are deleted. The event listener will be executed multiple times and it uses a deleted variable, or am I wrong? When the event listener is defined, is the foo variable copied or something? – Benjistep Apr 19 '16 at 11:23
  • The local variables are *not* deleted in this case even though the ready function has finished: read up on "closures". – nnnnnn Apr 19 '16 at 11:37
  • Coming from a c++ background it was kind of confusing, but now I totally understand it. Thanks all! – Benjistep Apr 19 '16 at 11:59

1 Answers1

5

I want to use this variable in the event listener of '#someid'. I tried this and the foo variable is still accessible when a click-event occurs on '#someid'.

This is correct, your variable foo is still in scope, and therefore accessible.

Why isn't this variable destroyed and still accessible?

Because both are in the scope of the ready function.

I don't want to declare the variable globally.

You haven't, so don't worry. You have declared a variable which is local to the ready function, and not global.

Jamiec
  • 133,658
  • 13
  • 134
  • 193
  • Yes, but the ready function is executed only once. And after the execution of a function, all local variables are deleted. But the event listener will be executed multiple times and it uses a deleted variable, or am I wrong? When the event listener is defined, is the foo variable copied or something? – Benjistep Apr 19 '16 at 11:19
  • **please learn closures**. closures are exactly that, that variables will **not be deleted** after the function-call is terminated, as long as there is **still a reference** to them. like an other function that utilizes them, and is itself referenced by the event-listener, wich itself is referenced by the node it is attached to, wich is referenced by the DOM. So as long as there's such a chain from the global-object to your variable it won't be deleted. Aaaaaand this variable is *not static*, it belongs to this particular function-call. – Thomas Apr 19 '16 at 11:39