Variable variables in JavaScript

Question

according to my knowledge, this feature already exists in PHP. lets look at the following php code:

$color = 'red';
$$color = 'dark';

description of the feature:

Sometimes it is convenient to be able to have variable variable names. That is, a variable name which can be set and used dynamically.A variable variable takes the value of a variable and treats that as the name of a variable. In the above example, red, can be used as the name of a variable.At this point two variables have been defined and stored in the PHP symbol tree: $color with contents "red" and $red with contents "dark".

my Question

can this be done in java Script?

possible duplicate of [Javascript Variable Variables](http://stackoverflow.com/questions/592630/javascript-variable-variables) — Felix Kling, Jan 15 '12 at 11:03
Possible duplicate of ["Variable" variables in Javascript?](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) — frederj, Jun 02 '19 at 23:25

T.J. Crowder · Answer 1 · 2012-01-15T11:09:25.400

Three different techniques come to mind, each with its warnings and (except the second one) uses:

1) You can declare a new variable in JavaScript anywhere in the code using the var keyword:

var $color = 'red';

The variable is actually defined throughout the scope in which the var occurs, even above the var statement — that is, these two functions are identical even though they look slightly different:

function foo() {
    doSomething();
    var x = 5;
    x += doSomethingElse();
    return x;
}

function foo() {
    var x;

    doSomething();
    x = 5;
    x += doSomethingElse();
    return x;
}

This is because all vars take effect when the context for the function is created, not where they appear in the code. More: Poor, misunderstood var

2) If you just assign to a free symbol that's never been declared anywhere, you'll create an implicit global variable (not one constrained to the current scope), which is generally a bad idea. More: The Horror of Implicit Globals

3) Another thing you can do is have an object which is a container for various variables you want to track. You can create new properties on the object just by assigning them:

var data = {};    // A blank object
data.foo = "bar"; // Now `data` has a `foo` property

This technique is particularly handy when you need to track data that your script is completely unaware of, for instance based on user input, because you can use either dotted notation and a literal as above (data.foo), or you can use bracketed notation and a string (data["foo"]). In the latter case, the string can be the result of any expression, so all of these create a foo property on data:

// Dotted notation with a literal
data.foo = 42;

// Bracketed notation with a literal string
data["foo"] = 42;

// Bracketed notation with a string coming from a variable
s = "foo";
data[s] = 42;

// Bracketed notation with a string coming from an expression
s = "o";
data["f" + s + s] = 42;

can't find what I'm looking for in your answer. thanks anyway. — Sami Al-Subhi, Jan 15 '12 at 11:56
@SamiAl-Subhi: I think the third option above is the closest to the PHP concept you describe in your edit. `s = "foo";`, then using `s` as the name of a variable: `data[s] = 42;` means that `data.foo` has the value `42`. — T.J. Crowder, Jan 15 '12 at 12:01
@SamiAl-Subhi: The third option is the way you are supposed to do it. Don't create a shitload of globals! But if you really need to, you can store those vars in `window` instead of `data` - that'll make them global. — ThiefMaster, Jan 15 '12 at 12:11
@ThiefMaster I want to assign an object to the variable `window[color]=document.getElementById("v")` and I will use it several times in different places in my code. therefore the third way won't do it for me I suppose.AM I right? — Sami Al-Subhi, Jan 15 '12 at 12:41
@SamiAl-Subhi: It works just fine. `window` is an object, like my `data` example. Assuming that `color` is a variable containing the string `'red'`, for instance, then `window[color]=document.getElementById("v")` will happily create a global variable `red` which refers to the element. Globals are properties of the `window` object, so `color = 'red';` `window[color] = 42;` `alert(window.red); /* alerts 42 */` `alert(red); /* Also alerts 42 */` `alert(window[color]); /* ALSO alerts 42 */` It's best to avoid global variables, but if you must use them, that will work. — T.J. Crowder, Jan 15 '12 at 12:48

score 4 · Accepted Answer · answered Jan 15 '12 at 11:06

4

var color = 'red';
window[color] = 'dark';
console.log(color, red);

answered Jan 15 '12 at 11:06

Vitalii Petrychuk

14,035
8
51
55

I can see in the log that u got it right but can't use the variable `document.getElementById("v").innerHTML= red;` it gives an error `cant set the property of innerHTML of NULL` – Sami Al-Subhi Jan 15 '12 at 11:33

Variable variables in JavaScript

description of the feature:

my Question

2 Answers2

Linked