socket.io Using a for loop to add socket.on method

Question

Assume

socketMethods:{
    update:function(data){
        this.emit("test", data);
        console.log("socket.update");
    },
    test:function(data){
        this.emit("test", data);
        console.log("socket.test");
    }
}

This below is possible, and allows me to emit "test" and "update", and "test" and "update" will be called

socket.on("test", function(data){
    dummy.socketMethods.test.call(socket, data);
});
socket.on("update", function(data){
    dummy.socketMethods.update.call(socket, data);
});

These below are NOT possible... EACH one will instead call "test", if I emit "test" OR "update". If I use a FOR loop, all methods will become the "last" method called.

That is: If I switched update and test so that test is first, and update is second in the socketMethods object. "update" would always be called, regardless of whether I asked for "test" or "update"

for(key in dummy.socketMethods){
    socket.on(key, function(data){
        dummy.socketMethods[key].call(socket, data);
    });
}



var methods = ["test", "update"];
while(methods.length !== 0){
    var method = methods.pop();
    console.log(method);
    socket.on(method, function(data){
        dummy.socketMethods[method].call(socket, data);
    });
}



var methods = ["test", "update"];
for(var i = 0; i < methods.length; i++){
    console.log(i);
    socket.on(methods[i], function(data){
        console.log(i);
        dummy.socketMethods[methods[i]].call(socket, data);
    });
}

CLUE : The for loop using 'i', has two console.logs. The second console.log returns "2"

Why does this happen? And how could I use a for loop to attach my socketMethods?

Answer 1

You're making the common mistake of assuming that a closure "traps" the value of an outer function's variable at the time it was created. It doesn't. It "traps" a reference to the outer function's variable, and its value will be whatever the outer variable has at the time the closure is executed. If you're creating closures in a loop, that value will be whatever it had at the end of the loop.

The way to get around this is to create an "enclosing" closure that uses the outer variable's value as argument. One way to do this is to create a helper function that generates your closure. In your first example, you could do

function makeOn(key) {
  return function(data) {
    dummy.socketMethods[key].call(socket, data);
  }
}

for(key in dummy.socketMethods){
  socket.on(key, makeOn(key));
}

Now in each closure, key will be a newly-created variable (differing between closures) set to the appropriate value.

It's also possible to use an immediate function call (what some call a "self-executing function") to do the same thing a little more succinctly, but also somewhat less readably.