What's going on in the background with regard to this JavaScript?

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.

Answer 2

Javascript generally passes all arguments to functions by reference except when the argument is a number or a string. Javascript passes numbers and strings by value which is why your first example works the way it does.

Answer 3

I believe there's a typo in your code. I think you mean:

function TestParam(p) {
    var p = {b:p.b + 1}; // p.b, not p.a (p.a == undefined)
    alert(p.b);
}

In your example:

var a = { b: 1 }; // "a" is defined in the global scope
TestParam(a);
alert(a.b);  // alerts 1

function TestParam(p) {
    var p = {b:p.a + 1}; // "p" is defined in TestParam()'s scope
    /* But not until after the expression on the right side of the assignment
       has completed--that's why you can use p.a 
    alert(p.a); //alerts 2
}

At first, "p" is passed as a reference to the global variable "a", but then you redefine it in the first line. So, for example:

var a = { b: 1 };
alert(a.b); // Alerts 1
TestParam(a);
alert(a.b); // Alerts 2
TestParam(a);
alert(a.b); // Alerts 3

function TestParam(p) {
    p.b++;
}