Truly Bizarre behaviour from coffescript/javascript array of functions

Question

My code seems to bring about some kind of quantum duel state in chrome, invoking a universe where functions turn into undefined upon being pushed to an array... spooky

I'm building an array of functions using the following code, in order to callback chain them together using this function https://gist.github.com/3609831

console.log "creating stack"

ids = (id for id of @s3) # an array of integers

stack = [callback]
console.log stack

for ssid of @s3
  new_func =  ((cb) => @idb.load_s3(ssids.shift(),cb))
  console.log new_func
  stack.push new_func
  console.log stack

console.log "stack done"

What's bizarre is that although it actually seems to work; all the function calls with the right arguments seem to be happening, it also get this in the console (with my formatting and comments)

> creating stack

# callback added to array correctly
> [function () { return _this.start(true); }]

# function generated correctly
> function (cb) { return _this.idb.load_s3(ssids.shift(), cb); } 

# but the function doesn't get added to the array !!!!!!!
> [function () { return _this.start(true); }, undefined × 1]

> stack done

# and the undefined from the array can't be executed of course, verified my line number
> Uncaught TypeError: undefined is not a function 

which seems to mean that although it worked... it also didn't work... because... the new_func turns into undefined upon being pushed to the array...

WTF???

Anyone got any clues as to what might be happening here?

I'm using chrome v21

...

EDIT: fyi the @idb.load_s3 function IS in scope and I know it's working because it loads data from indexedDB which doesn't load if any part of this is broken, (and because the callback does fire).

...

EDIT2: here's the javascript, nothing very different or odd about it, just harder to read

var id, ids, new_func, ssid, stack,
  _this = this;

console.log("creating stack");

ids = (function() {
  var _results;
  _results = [];
  for (id in this.s3) {
    _results.push(id);
  }
  return _results;
}).call(this);

stack = [callback];

console.log(stack);

for (ssid in this.s3) {
  new_func = (function(cb) {
    return _this.idb.load_s3(ssids.shift(), cb);
  });
  console.log(new_func);
  stack.push(new_func);
  console.log(stack);
}

console.log("stack done");

...

EDIT 3: Just realised that part of the problem is because Chrome's console is presumably asynchronous so it seems the last item is popped off the stack (in code not shown here) AFTER the call to console.log but BEFORE console.log has actually output the array contents!!! So when I don't call the function (see referenced gist) to execute the stack then the rest seems to work fine.

HOWEVER this doesn't solve the mystery of the exception complaining about undefined not being a function (like it's trying to pop undefined from the array and execute it)... still weird!

...

EDIT #4: load_s3 function is here: https://github.com/gnatters/neuroanatomist/blob/master/app/assets/jax/models/asset_loader.js.coffee.erb#L118 the real life version of the code being questioned here is in the same file in load_everything at #L145

Answer 1

I worked it out! There are two parts to the problem which look like the same thing. Firstly, as in edit 3, the array looks like it contains an undefined item in the place where the function was pushed. However this would seem to be a quirk (bug?) in chrome's asynchronous console, whereby the function is removed from the array in the time between the console.log call and the actual logging of the array.

The second part of the problem was also deceptive in appearance, and sorry I didn't think this was so important when asking the question. In the linked gist (which has now be revised) the function was trying to pop and execute an extra function from the array which of course amounts to trying to all undefined. Not an easy one to spot...

All is well. Thanks for playing ;)