Setting Javascript variable inside for loop

Question

I looked at a lot of posts around global/local variables but I think I'm missing something. This is what I'm trying to get to:

var commandList = {
    'command_a': function() {
        socket.emit({action: 'a'});
    },
    'command_b': function() {
        socket.emit({action: 'b'});
    }
};

Instead of defining my list of commands, I would like to define them dynamically from an ajax call. This is my best attempt:

function getCommands() {
    $.ajax({
        type:'get',
        url: '/getCommands',
        data: data,       
        success: function(data) {

            JSONdata = $.parseJSON(data);
        // [{"action": "b", "command": "command_b"},{"action": "a", "command": "command_a"}]

            var commandList = [];

            jQuery.each(JSONdata, function( i, val ) {

                command = val['command'];
                action = val['action'];

                service = {
                    [command]: function() {
                        socket.emit({action: [action]});
                    }
                console.log(service[Object.keys(service)[0]]);
                }
                commandList.push(service);
            });
        }
    });
}

The main problem is that in my loop, my action variable doesn't get replaced by a or b in service, which I assume is because action only gets defined when the function is called. The console.log returns:

function () {
                    socket.emit({action: [action]});
                }

Instead of:

function () {
                    socket.emit({action: 'a'});
                }

i think u need to add "var" before JSONdata = $.parseJSON(data) — Fantasim
– Fantasim, Commented Apr 23, 2016 at 16:19

Pedro · Accepted Answer · 2016-04-23 19:11:42Z

First of all, always declare your variables with the var keyword. If you don't, they are created in the global scope, polluting it. More importantly, failing to do so breaks your code, as i will explain later. I will assume from now on they are correctly declared with var.

Let's start by replacing socket.emit({action: [action]}); with socket.emit({action: action});. Your code will behave correctly, i.e., when you call service[Object.keys(service)[0]], the socket will emit {action: 'a'}. However you will not get the output you expect from the console log. The console log shows:

function () {
                socket.emit({action: action});
            }

because that is how you defined the function, you did not define it with the string literal "a". But this is no problem at all, since action will be substituted by "a" at runtime. In javascript, functions are created with a reference to the scope on which they are created, which means they can access any variable of that scope, even when they are called outside that scope. Good explanation here http://javascript.info/tutorial/closures.

So, to sum it up, your command_a function will hold a reference to action when its value is "a" and your command_b function will hold a reference to action when its value is "b", if and only if you declared var action!!!!

Notice that if you don't declare action with var action, it will be in the global scope, and it will hold the last value (i.e. "a") after your code executes. When either command_a() or command_b() are called, they will both emit {action: 'a'}, because action lives in the global scope.

One last thing, you originally wanted commandList to be an object, but the code you are using creates an array. This would give you an object as initially stated:

function getCommands() {
$.ajax({
    type:'get',
    url: '/getCommands',
    data: data,       
    success: function(data) {

        JSONdata = $.parseJSON(data);
    // [{"action": "b", "command": "command_b"},{"action": "a", "command": "command_a"}]

        var commandList = {};

        jQuery.each(JSONdata, function( i, val ) {
            var command = val['command'];
            var action = val['action'];

            commandList[command] = function() {
                    socket.emit({action: action});
            };
        });
    }
});

}

Thank you! Your answer and the link you included were incredibly helpful to understand better scopes and variables in cases like mine.

Rajshekar Reddy · Accepted Answer · 2016-04-23 16:22:12Z

1

This should be the syntax

service = {}; service[command] = function (){ var actionObj ={}; actionObj.action = action; socket.emit(actionObj); }

answered Apr 23, 2016 at 16:22

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Comments

guest271314 · Accepted Answer · 2016-04-23 18:45:59Z

1

Try removing brackets surrounding action at socket.emit({action: action});. Also, console.log(service[Object.keys(service)[0]]); is outside of function body at [command]:function(){}, creating a syntax error; moved to after after service definition.

var commandList = [];

jQuery.each(JSONdata, function(i, val) {

  var command = val["command"];
  var action = val["action"];

  var service = {
    [command]: function() {
      socket.emit({action: action}); // removed brackets at value `action`
    }
  };
  console.log(service[Object.keys(service)[0]]); // moved outside of `service`
  commandList.push(service);
});

plnkr http://plnkr.co/edit/VkmPGl9lWwiPKarvrbLJ?p=preview

edited Apr 23, 2016 at 18:45

answered Apr 23, 2016 at 16:35

guest271314

1

Collectives™ on Stack Overflow

Setting Javascript variable inside for loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related