Question

I was reviewing some today, when I encountered the following convention :

TestParam(1);

function TestParam(p){
    var p = p + 1;
    alert(p);   // alerts '2'
}

Now, obviously, the developer didn’t mean to delcare ‘p’ within the function, instead maybe meaning:

    p = p + 1;

But the code still worked, i.e. the value alerted was “2”. So it got me to thinking. What would happen in the following scenario:

var a = 1;
TestParam(a);
alert(a);  // alerts "1"

function TestParam(p){
    var p = p + 1;
    alert(p);   // alerts '2'
}

Again the alerts were as I suspected (as intimated in the comments above). So then I was curious as to what would happen if I used an object:

var a = { b: 1 };
TestParam(a);
alert(a.b);  //alerts 1

function TestParam(p) {
    var p = {b:p.b + 1};
    alert(p.b); //alerts 2
}

So, in this instance, JavaScript has ‘remembered’ the variable a, even though when it is passed to TestParam as p, p is redeclared.

Now if I were to have done the following within the function, then both alerts would have been “2”

    p.b++;
    //var p = {b:p.b + 1};

I.e. it would have modified the member b of the original object. I get this. Its the previous scenario that baffles me!

I realise this is quite a hypothetical question that is unlikely to carry much real-world usefulness, but it still made me quite curious, as to what is going on in the background, and how exactly JavaScript is scoping and referencing these variables.

Any thoughts?

Answer 1

Variables are scoped to the enclosing function in JavaScript. And you can declare them as many times as you like.

Objects are not tied to variables; many variables can refer to the same object. (This is sometimes called aliasing.) This is what’s happening in your last example. JavaScript has not “remembered” the variable a at all; rather, p and a refer to the same object, so when it is changed via p, you can see those changes via a.

Here’s an example that might make more sense to you. Sometimes a person has more than one identity.

var Clark = new Person;
var Superman = Clark;  // Maybe not everybody needs to know these two are
                       // the same person, but they are.
Clark.eyes = "brown";
alert(Superman.eyes);  // should be brown, right?

Knowing the rules of the language you’re using has tremendous “real-world usefulness”. Not understanding these two rules is the source of a lot of confusion and bugs.