use variable's name JavaScript (literally)

Question

How can I refer to the variable's name (literally the name of the variable)?

I have the following code:

var thisVariableName = 'path/filename.js';

var script = document.createElement('script');
script.id = **I WANT THE TEXT "thisVariableName" to be added HERE**
script.type = 'text/javascript';
script.src = thisVariableName;

So that if output script.id, I would get thisVariableName as such, not the value of the variable

AFTER SOME OF THE RESPONSES:

I want to systematize the addition of many script files. In the example below I add four files, but imagine I had to add 30+ files (please reserve yourself from asking why would I need to add 30+ files; after all this is the promise of computing)

As of now, the only way I know how to get this done is to create two separate arrays; array 1 for the files' name string, and array 2 for the files' paths, or ALTERNATIVELLY, as Felix Kling SUGGESTS create an object per each variable:

var jQueryPath = 'js/jquery-1.5.1.js';
var jQueryUICore = 'js/jquery.ui.core.js';
var jQueryUIWidget = 'js/jquery.ui.widget.js';
var jQueryUITabs = 'js/jquery.ui.tabs.js';

var fileNames = new Array ('jQueryPath','jQueryUICore','jQueryUIWidget','jQueryUITabs');

var filePaths = new Array (jQueryPath,jQueryUICore,jQueryUIWidget,jQueryUITabs);

var head = document.getElementsByTagName("head")[0]; 

for (var i=0;i<4;i++){

    var script = document.createElement('script');
    script.setAttribute('id',fileNames[i]);
    script.setAttribute('type','text/javascript');
    script.setAttribute('src', filePaths[i]);
    head.appendChild(script);

    }

So whether I create arrays to hold the names and the values of the variables, or create an object, it requires individual creation of both attributes per file.

I was hoping I could reference the literal variables' names of an array composed of the variables; i.e:

var onlyOneArray = new Array (jQueryPath,jQueryUICore,jQueryUIWidget,jQueryUITabs);

for (var i=0;i<4;i++){

        var script = document.createElement('script');
        script.setAttribute('id',**onlyOneArra[i] the NAME**);
        script.setAttribute('type','text/javascript');
        script.setAttribute('src', onlyOneArray[i]);
        head.appendChild(script);

        }

confused me. Why don't you just typein the name ? You would need to access the variable anyhow regardless if this is possible or not. — jAndy, May 23 '11 at 23:46
Bad idea: but you could use eval() to save the var name in a string then initialise it. — Tom, May 23 '11 at 23:48
Variables are names that you (the programmer) know that hold unknown/variable content. If you don't know the variable name, then you have nothing to work with. You'd need at least a variable to hold the variable name then. — deceze, May 23 '11 at 23:49
Why exactly do you want this? Perhaps telling what you want to achieve may get you a proper answer. — BrunoLM, May 23 '11 at 23:51
You should not create an object for **each** variable. You should set all script names / paths as property of **one** object (that's why I named it script**s** ;)) and then loop over it... — Felix Kling, May 24 '11 at 01:16

Felix Kling · Accepted Answer · 2011-05-24T01:19:33.400

8

You cannot get the name of a variable at run time.

I suggest to follow a more organized approach, e.g. by storing the variable as property of an object. You can then iterate over this object:

var scripts = {
    thisVariableName: 'path/filename.js'
};

for(var name in scripts) {
    if(scripts.hasOwnProperty(name)) {
        var script = document.createElement('script');
        script.id = name;
        script.type = 'text/javascript';
        script.src = scripts[name];
        //....
    }
}

Update: Regarding your changes, what you should end up doing, is :

var scripts = {
    jQueryPath: 'js/jquery-1.5.1.js',
    jQueryUICore: 'js/jquery.ui.core.js',
    jQueryUIWidget: 'js/jquery.ui.widget.js',
    jQueryUITabs: 'js/jquery.ui.tabs.js'
};

var head = document.getElementsByTagName("head")[0];

for(var name in scripts) {
    if(scripts.hasOwnProperty(name)) {
        var script = document.createElement('script');
        script.setAttribute('id', name);
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', scripts[name]);
        head.appendChild(script);
   }
}

edited May 24 '11 at 01:19

answered May 23 '11 at 23:48

Felix Kling

795,719
175
1,089
1,143

@elusive: Yeah, never forget this **ever** if you post code here on SO. Otherwise you get punished so badly for it ;) – Felix Kling May 23 '11 at 23:51
@Felix Kling: Exactly. Most of the people i talked to had no idea what this is good for. I am always happy to see that somebody knows it ;) – jwueller May 23 '11 at 23:52
3

For people that are wondering what is `hasOwnProperty`: It tells if the object has the property and it is not inherited (like `toString`). More info: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/hasOwnProperty – BrunoLM May 23 '11 at 23:57
Thanks you Felix Kling. I am wondering how is it that the variable has the property name when it has not been explicitly attributed? Where can I find more info on this? – IberoMedia May 24 '11 at 01:51
@Ibero: I'm not really sure what you mean, but you can have a look at this: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects – Felix Kling May 24 '11 at 08:01

score 3 · Answer 2 · answered May 23 '11 at 23:47

script.id = "thisVariableName";

? There's no way you would create variables like that at runtime (and it's somewhat impossible), therefore you have to already know the name of the variable... just put it in a string. Unless I'm completely misunderstanding? Is this in another script? Are you referring to it with a different variable? Do you want it to be passed, then read the name afterwards?

score 0 · Answer 3 · answered May 23 '11 at 23:46

0

You cannot get the name of the variable, afaik.

answered May 23 '11 at 23:46

Félix Saparelli

8,424
6
52
67

score 0 · Answer 4 · answered May 24 '11 at 01:11

You can use strings as property names of Object objects, or you can use them for variable names (i.e. properties of the variable/activation object) with eval. Whatever you do, you must associate the variable name with a value at some point, so why not just craete an object:

var scripts = {
  jQueryPath: 'js/jquery-1.5.1.js',
  jQueryUICore: 'js/jquery.ui.core.js',
  jQueryUIWidget: 'js/jquery.ui.widget.js',
  jQueryUITabs: 'js/jquery.ui.tabs.js'
};

The eval equivalent is very similar except you'd provide an array of just the variable names and use eval() to get the values. But that assumes that the variables have already been created and assigned values via some mechanism that would probably look very much like the above anyway. Also, eval is very inefficient and not recommended when a plain object will do the job far more efficiently.

use variable's name JavaScript (literally)

4 Answers4