Scope and Asynchronous JavaScript

Question

I recently ran into an issue at work in which, at least according to my knowledge of JavaScript, I got back an impossible result. I'm hoping someone can explain whats going on here and why the actual results differ from my expected results.

Expected results in console

id: a , x: 1
id: b , x: 1
id: c , x: 1

Actual results in console

id: c , x: 1
id: c , x: 2
id: c , x: 3

Code

function MyClass(id)
{
    var x = 0;

    return function()
    {
        return function()
        {
            x += 1;
            console.log("id: ", id, ", x: ", x);
        }
    }
}


function DoStuff(id)
{
    var q = MyClass(id);
    response_callback = q();
    setTimeout(function(){ response_callback(); }, 50);
}

DoStuff("a");
DoStuff("b");
DoStuff("c");

Answer 1

response_callback = q();

This. You didn't declare response_callback in any scope, so it's implicitly in the global scope...

Which means you're overwriting it every time you call DoStuff(). You think you're getting three different functions captured and called, but there's only one...

 var response_callback = q(); // should set you back on track

Of course, the way you have this structured right now kinda wastes MyClass's ability to return a function that returns a function. You could actually write:

function DoStuff(id)
{
  var q = MyClass(id);
  // ... do other strange and horrible things with q ...
  setTimeout(q(), 50);
}

...and see the same results without an unnecessary closure.