reference problem in JavaScript?

Question

I have below probably a bunch of problems but let's simplify them with easier examples.

Let assume two vars, a=cat and b=a, and you want to reference by bs value a to that var ie a. So by which command I can do it? Variable SomeCommand(b) and variable a should point to the same memory space becaues b gets evaluated to a. The same question arises from the below code where we have the part document.getElementById(vals[0].split('|')[0]).style.display= 'block'; that should be evaluated to document.getElementById(picture).style.display= 'block'; ie to show picture but the above example is much cleaner to explain so refer to it, please. How to do the reference? Are the two ways above equivalent? I am watchful here because having encountered similar problems in other languages but then they were about inodes, symbolic/hard links and such things but no idea how this works in JS. Shortly, how do they get evaluated?

function change_visibility(binX)

{
     // binX is a thing that matches `/^[10Xx]+$/`
     // 1 = show the thing
     // 0 = do not show the thing
     // x/X = do not do anything
     //
     // for example, 00011x would turn OFF picture-quote-question_mark 
     // while turning ON search and help but not doing anything to 
     // typing pad's current state


        var vals = ['picture|binX.charAt(0)',
                        'quote|binX.charAt(1)',
                        'question_mark|binX.charAt(2)',
                        'search|binX.charAt(3)',
                        'help|binX.charAt(4)',
                        'typingPad|binX.charAt(5)'
                        ];

        for (var i=0; i<vals.length; i++)
        {
                if(vals[i].split('|')[1]==1)
                {
                        //TODO: check whether you can do it like this, 
                        // assumed for example that vals[0].split('|')[0] =picture
                        // but it is not, the "inode" or let call it arrow is diffent!
                        // ERROR HERE ?!?
                        document.getElementById(vals[i].split('|')[0]).style.display= 'block';
                }
                else if(vals[i].split('|')[1]==0)
                {
                        document.getElementById(vals[i].split('|')[0]).style.display= 'none';
                }
        }

}

Please, fix the labels if you know more descriptive alternatives.

Phrogz · Answer 1 · 2010-12-20T04:33:16.910

Variables in JavaScript do not contain values, they reference them. When you do var a = []; two things happen:

An empty array object is allocated in memory, and
A reference to that array object is placed in the variable a.

(This does not really address parse-time versus evaluation allocation, but it's simple enough to think of this.)

If you then do var b = a; the array is NOT copied; another reference to the same array is put in the variable b.

Wrapping it up:

var a = [];
var b = a;
b.push(42);
console.log(a);
//-> [42]

They are the same. You cannot cause a situation where modifying 'b' will cause 'a' to reference a different object.

Every "global variable" is actually a named property of a global object. In web browsers, the window object is the global. Combine this with the fact that property access can always be achieved either via dot notation (e.g. foo.bar) or bracket notation (e.g. foo["bar"]) and you can look up any global variable by name. For example:

a1 = 42;
a2 = 17;
var b = "a1";
console.log( window[b] ); //42
b = "a2";
window[b] = 999;
console.log( a2 ); // 999

The same is not true for local variables. Unlike some languages (such as Io) you do not have access to an object storing and allowing enumeration or indirect access of all local variables. For a situation like this, you want your own object:

var variables = {
  a1 : 42,
  a2 : 17
};

var b = "a1";
console.log( variables[b] );
// -> 42

chubbsondubs · Accepted Answer · 2010-12-20T04:43:33.220

You might want to revise your question. I'm not entirely sure what you're asking. Is there a problem with this code you can't figure out? What is it suppose to do? The whole a, b reference portion of the conversation has nothing to do with the code you submitted. The variable you're passing isn't used in your code. Also your if statement compares the split to == 1. But, it will never be equal to 1 or 0. It will only be one of those phrases to the right of '|'. Anyway maybe you can revise your question and it will make more sense.

Let me rewrite your code a little so you don't have that binX junk in the array.

function change_visibility(binX) {

var vals = ['picture',
                'quote',
                'question_mark',
                'search',
                'help',
                'typingPad'
                ];

for (var i=0; i<vals.length; i++) {
        var val = binX.charAt(i);

        if(val=='1') {
           document.getElementById(vals[i]).style.display= 'block';
        } else if(val=='0') {
           document.getElementById(vals[i]).style.display= 'none';
        }
}
}

That might have been what you were after. So if binX is '10000' then 'picture' would be shown, and the rest would be hidden. Maybe that's what you were after. This solution is better because you aren't using eval() which you should avoid if you don't have to, and this code you don't have to.

reference problem in JavaScript?

2 Answers2