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
– Jason, Commented Nov 19, 2009 at 18:43

Jonathan Feinberg · Accepted Answer · 2009-11-19 18:49:15Z

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, 2009 at 18:49

Jonathan Feinberg

45.5k7 gold badges83 silver badges103 bronze badges

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

1 Comment

Rudi Over a year ago

My next stop was: stackoverflow.com/questions/1047454/what-is-lexical-scope :) Thanks for the answer!

Raithlin · Accepted Answer · 2009-11-19 18:42:03Z

2

In a word, yes. Spot on.

answered Nov 19, 2009 at 18:42

Raithlin

1,77410 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:06:37Z

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Nov 19, 2009 at 18:49

MikeEL

6745 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related