Print / display a JavaScript variable's name instead of it's value

Question

Is it possible to print / display a JavaScript variable's name? For example:

var foo=5;
var bar=6;
var foobar=foo+bar;

document.write(foo+ "<br>");
document.write(bar+ "<br>");
document.write(foobar + "<br>");

How would we print the variable's names so the output would be:

foo 
bar 
foobar

Rather than:

5
6
11

Fidge

This is a typical XY problem. Why do you want to do this? – Zahn

Here's a use case: During testing, I want to check that every variable I think is coming from a module is coming. If typeof var === undefined, I'd like to be able to put on the screen "var is undefined". Not an XY question for me. – Clotho

Other posts like this one are marked as duplicates of #3404557. Short summary of the discussion in all of them: One could pass the function both a string of the variable name and the variable. For others, there's a way for global variables (those with window.x). For others, one could make every variable an object. Then, one can use object keys to get the variable name. For the insane, one could write code to parse the program and get the variable that way (good luck!) For me: That first one. – Clotho

Answer 1

You can put the variables in an object then easily print them this way: http://jsfiddle.net/5MVde/7/

See fiddle for everything, this is the JavaScript...

var x = {
    foo: 5,
    bar: 6,
    foobar: function (){
        var that=this;
        return that.foo+that.bar
    }
};

var myDiv = document.getElementById("results");

myDiv.innerHTML='Variable Names...';
for(var variable in x)
{
    //alert(variable);
    myDiv.innerHTML+='<br>'+variable;
}

myDiv.innerHTML+='<br><br>And their values...';
myDiv.innerHTML+='<br>'+x.foo+'<br>'+x.bar+'<br>'+x.foobar();

The JavaScript for...in statement loops through the properties of an object.

Another variation (thanks @elclanrs) if you don't want foobar to be a function: http://jsfiddle.net/fQ5hE/2/

Baba

You forgot var, and this is window. Won't work. – Zahn

Your demo shows that the for..in works, but the answer is flawed. Try printing x.foobar and you'll get NaN. – Zahn

@elclanrs, thanks. Updated answer. @RalphDavidAbernathy can read this https://mcmap.net/q/44808/-how-does-quot-this-quot-keyword-work-within-a-function and decide how he wants to handle the foobar method. – Baba

That looks a bit better, but now it's a function. Do this var x={foo:5,bar:6}; x.foobar=x.foo+x.bar;. Also you're still missing a couple vars var myDiv and for(var variable in x). Then myDiv.innerHTML=myDiv.innerHTML you can write as myDiv.innerHTML+= – Zahn

Answer 2

Utils = {
    eventRegister_globalVariable : function(variableName,handlers){
        eventRegister_JsonVariable(this,variableName,handlers);
    },
    eventRegister_jsonVariable : function(jsonObj,variableName,handlers){
        if(jsonObj.eventRegisteredVariable === undefined) {
            jsonObj.eventRegisteredVariable={};//this Object is used for trigger event in javascript variable value changes ku
        }
        Object.defineProperty(jsonObj, variableName , {
                    get: function() { 
                        return jsonObj.eventRegisteredVariable[variableName] },
                    set: function(value) {
                        jsonObj.eventRegisteredVariable[variableName] = value; handlers(jsonObj.eventRegisteredVariable[variableName]);}
                    });
            }

Roseliaroselin

could you elaborate on this answer or describe a use case and the result? – Langevin

Answer 3

Another possible solution can be "Object.keys(this)".... This will give you all the variable names in an array.

Landreth