Explain why anonymous functions in Javascript can access variables in the outer function?

Question

Before I begin, I realize that the ECMA script specification will probably answer my question, but I am asking it on SO in hope of a comprehensible answer.

Take the following code:

function test1(param) {
    alert(param);
}

function test2() {
    var testvar = 99;
    setTimeout(function(){ test1(testvar); }, 1000);
}

test2();

If I run this code, I get a popup box showing 99. My question is, in test2, shouldn't testvar be null after test2 finishes running? How does the anonymous function in setTimeout get the value of testvar? Is there some sort of stack copying going on right as setTimeout gets called?

Go grab a bottle of vodka and read this question. I'd try to give you an answer but my office has a no alcohol policy. http://stackoverflow.com/questions/500431/javascript-variable-scope — aehiilrs, Feb 02 '12 at 21:10

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

This is the result of closures. Functions in JavaScript retain references to -- "close over" -- variables defined in their lexical scope. That is, all variables that can be referenced when the function given to setTimeout is created can be referenced long after test2 has returned.

In this way, a closure is both a function and a set of bindings to the variables that were in scope when the function was created. This is why closures are sometimes called poor man's objects (and vice versa).

edited May 23 '17 at 11:58

Community

1
1

answered Feb 02 '12 at 21:08

Wayne

59,728
15
131
126

1

Thanks! I didn't know there was actually a name for this. You would think that in my 4 years as a computer science undergraduate, they would have as least mentioned this. – quuxbazer Feb 02 '12 at 21:22

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

This occurs due to Javascript Closures. Essentially, variables available to a function at the time it is defined will always be available to it, no matter where it is called from.

edited May 23 '17 at 12:22

Community

1
1

answered Feb 02 '12 at 21:07

driangle

11,601
5
47
54

score 0 · Answer 3 · answered Feb 02 '12 at 21:07

0

The feature is called closures. You're basically right about what happens, the variables from the surrounding scope get saved if they're needed in an anonymous function.

answered Feb 02 '12 at 21:07

millimoose

39,073
9
82
134

Explain why anonymous functions in Javascript can access variables in the outer function?

3 Answers3