Javascript closure / variable scope question - I know it works, but why?

Question

I've been developing with JS for a while, and while I know that code below works, I don't really understand why it works.

The way I see it, I've defined testString in testClosure function, and I'm expecting that variable to 'go away' when testClosure function is done, since it's local variable.

However, when I call inner function with a timer, it's still aware of testString variable. Why? Isn't that variable gone five seconds ago when testClosure finished executing? Does the inner function get reference to all variables within testClosure, and they stay valid until all inner functions are done?

function testClosure() {
  var testString = 'hai';

  // after 5 seconds, call function below
  window.setTimeout(function() {

    // check if function knows about testString       
    alert(testString);

  }, 5000);         
}

testClosure();

good question... i guess that depends on whether `setTimeout` is asynchronous in nature or not, and whether `setTimeout` has some sort of special property that retains the info it needs when it starts the timeout part and then uses it upon execution... — Jason, Nov 19 '09 at 18:43
dup of http://stackoverflow.com/questions/111102/how-does-a-javascript-closure-work and others — Scott Evernden, Nov 19 '09 at 18:43

score 2 · Answer 1 · answered Nov 19 '09 at 18:42

2

In a word, yes. Spot on.

answered Nov 19 '09 at 18:42

Raithlin

1,764
10
19

score 2 · Accepted Answer · answered Nov 19 '09 at 18:49

2

The function special form creates lexical scope. Any object created within that scope will see the environment (the binding of names to values) lexically in scope at the time of its creation.

Indeed, creating a function is the only way to create lexical scope in JavaScript, which is why you see contortions like this all the time:

return (function() {
    var privateVariable = 'foo';
    return {
        myProp: privateVariable
    };
})();

answered Nov 19 '09 at 18:49

Jonathan Feinberg

44,698
7
80
103

My next stop was: http://stackoverflow.com/questions/1047454/what-is-lexical-scope :) Thanks for the answer! – Rudi Nov 19 '09 at 19:03

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

testString exists within the scope of testClosure, and therefor the testString is a global variable so far as your timer is concerned.

How do JavaScript closures work?

has better answers, as scott mentions.

edited May 23 '17 at 12:06

Community

1
1

answered Nov 19 '09 at 18:49

MikeEL

674
5
13

Javascript closure / variable scope question - I know it works, but why?

3 Answers3

Linked