Javascript - Why do method variables survive within a callback?

Question

Say you have [Fiddle]

function TestMethod() {
    var lifespan = "blah";

    $.ajax({
        url: "http://www.google.com",
        success: function (data) {
            alert(lifespan);
        },
        error: function (errorData) {
            alert(lifespan);
        },
        dataType: 'html'
    });
}

Why is it that lifespan still exists when the callback fires? What else persists through asynchronous calls? What allows this to happen, is there some kind of "runtime" ,if you will, in javascript that keeps code alive during the process? If so, when does it know when to start letting in memory items die?

It's captured in a closure. See: javascriptkit.com/javatutors/closures.shtml — asawyer
– asawyer, Commented Oct 5, 2011 at 18:46

Kris Krause · Accepted Answer · 2011-10-05 18:45:18Z

5

Javascript has function scope, not block scope (curly brace) like C, C++, C#, PHP, and Java.

Here is the jsFiddle example -

http://jsfiddle.net/Wrz6X/

answered Oct 5, 2011 at 18:45

Kris Krause

7,3162 gold badges25 silver badges26 bronze badges

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

2 Comments

P.Brian.Mackey Over a year ago

+1 This helps, great call on Fiddle. I need to remember to use that site in the future.

P.Brian.Mackey Over a year ago

I see a lot of votes coming in on this answer and not closure. Why? Is the community saying the reason is "function scope" and not closure?

jfriend00 · Accepted Answer · 2011-10-05 18:51:02Z

4

You need to read about javascript closures. All variables within the scope of an embedded function (whether declared in parent functions or not) stay available until all references to the closure inside of the function is done executing.

Since I was originally a C/C++ developer, I think of it like garbage collection for stack frames. The stack frame of any function isn't disposed of when the function is done executing, but rather when all references to it have been released. Embedded/internal functions that are still not yet complete (like your ajax callbacks) hold references to the containing stack frames and thus they are still available until those embedded functions themselves are done, even though the containing function has finished executing.

Once you understand it, it's very, very, very useful and a great feature that other languages like C/C++ don't have. It makes local variables useful in more circumstances.

answered Oct 5, 2011 at 18:51

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

P.Brian.Mackey Over a year ago

+1 I'm still a bit of a js noob, but I have "javascript the good parts" on order.

Aria · Accepted Answer · 2011-10-05 18:51:04Z

3

That's one of the fundamentals of javascript. closures (lambda functions) inherit variables from the scope in which they were defined in.

And it helps overcoming many problems that come with an asynchronous, event based language.

function foo() {
    var privateMsg = 'blah...';

    setTimeout(function(){
        alert('private msg: ' + privateMsg);
    }, 5000);
}

answered Oct 5, 2011 at 18:51

Aria

4161 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript - Why do method variables survive within a callback?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related