CODEWITHSUNDEEP
javascriptjquery
Tusk
Tusk

Reputation: 723

JS Variable inside another variable

I have a function that would use other variables, depending on what has been passed.

Like this = ActionBar(slot) slot contains "one".

and I would like to create a call inside that like object.slot.name but it should convert it before hand to make the command look like object.one.name. Is there a way to do this in javascript/jquery?

I remember vaguely that some other language does this as {slot} or something like that.

Sorry if this question was already asked, I've checked google and stackoverflow too, but didn't find an answer.

Also I'd like to know what's the proper programming term for this kind of variable passing?

Edited it cause of misunderstandings. I'm looking into OOP js, so object is an object, one is an object, and name is an attribute, but when passing I'm passing "one" as a string to the function.

Tried eval, it doesn't work while dotted with an object.

Source code:

function disableActionButton(slot){
    $("#"+slot).attr("disabled","disabled")
    gcd = player.slot.gcd*1000
    cd = setInterval(function(){
            gcd = gcd - 10
            $("#"+slot).val(gcd+"ms").css("color","red");
    },10)
    setTimeout(function(){
            window.clearInterval(cd)
            $("#"+slot).removeAttr("disabled").css("color","black").val(player.slot.name);
    }, player.slot.gcd*1000)    
}

Upvotes: 3

Views: 3875

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075785

It's really unclear what your current structure is (much clearer now you've posted code, see "update" below), but fundamentally the way to do this sort of thing in JavaScript is to have a container object. (If you don't already have one, introduce one.) Then slot can refer to a property of that object, like this:

var container = {
    one: "This is one",
    two: "This is two"
};

// ...

function foo(slot) {
    console.log(container[slot]);
}

// ...

foo("one"); // ends up logging "This is one"
foo("two"); // ends up logging "This is two"

This works because the container object has properties, which in JavaScript can be referred to in two different ways:

  1. Using dot notation and a literal name, e.g. container.one, or

  2. Using bracketed notation and a name in a string, e.g. container["one"].

They're exactly equivalent except where the property name comes from. And of course, in the second case, the property name needn't be a literal string, it can be the result of any expression, including a variable reference (e.g., you can get the name from slot).

This works with all object properties, including properties that refer to functions. I mention this only because you mentioned functions in your question, so if you need to, you can do this:

function foo(slot) {
    container[slot]();
}

...which calls the function on container that the property with the name held by the slot argument. So if slot is "one", it does container.one().

Update:

Your source directly echos the container example above, just apply the above to it:

function disableActionButton(slot){
    $("#"+slot).attr("disabled","disabled")
    // ---------v----v---- here
    gcd = player[slot].gcd*1000
    cd = setInterval(function(){
            gcd = gcd - 10
            $("#"+slot).val(gcd+"ms").css("color","red");
    },10)
    setTimeout(function(){
            window.clearInterval(cd)
    // ------------------------------------------------------------ and here--v----v
            $("#"+slot).removeAttr("disabled").css("color","black").val(player[slot].name);
    // ------v----v------- and here
    }, player[slot].gcd*1000)    
}

Or, rather than looking up the slot data each time, grab it once and reuse it:

function disableActionButton(slot){
    // Grab it once...
    var slotdata = player[slot];

    $("#"+slot).attr("disabled","disabled")
    // ---vvvvvvvvv--- then use it
    gcd = slotdata.gcd*1000
    cd = setInterval(function(){
            gcd = gcd - 10
            $("#"+slot).val(gcd+"ms").css("color","red");
    },10)
    setTimeout(function(){
            window.clearInterval(cd)
            $("#"+slot).removeAttr("disabled").css("color","black").val(slotdata.name);
    }, slotdata.gcd*1000)    
}

There's no special name for this. You're passing a property name into a function, and the function is looking up the property on the player object using that name. In some other languages this might be called "reflection" but the term doesn't really apply to dynamic languages like JavaScript.

Upvotes: 3

Related Questions