Question

I have this piece of code

var f = function() {
    this.x = 100;
    (
        function() {
            x = 20;
        }
    )();
};

var a = new f;
console.log(a.x);

I am wondering why a new variable x is created at global scope, and the output is 100, not 20.
If I write instead

var x = 100;

the nested function changes the same x’s value.
It seems that creating x via

this.x = 100

places x outside the scope of function f. If that is the case, where is it defined? And how can it be accessed?

EDIT : Fixed a typo : console.log(a.x) instead of console.log(x)

Answer 1

The statement:

this.x = 100;

Does not create a variable in the current scope, it sets a property x on whatever object thisrefers to. In your case this will be the object just instantiated via new f, the same object that will be returned by f and assigned to a.

When you say:

x = 20;

JavaScript looks for an x in the current scope and doesn’t find it, so it looks in the next scope up, etc., until it gets to the global scope. If it doesn’t find x in any accessible scope it creates a new global variable as you have seen.

To access the property x from within a nested function the usual practice is to store a reference to this in a local variable and then the nested function can reference that variable:

var f = function() {
    var self = this;       // keep a reference to this

    this.x = 100;
    (
        function() {
            self.x = 20;   // use the self reference from the containing scope
        }
    )();
};

var a = new f;
console.log(a.x);          // will now be 20

The other way to do it is to reference this.x in the inner function, provided you call the inner function via the .call() method so that you can explictly set this to be the same as in the (outer) f function:

var f = function() {
    this.x = 100;
    (
        function() {
            this.x = 20;
        }
    ).call(this);
};

var a = new f;
console.log(a.x);

Further reading:

• Working With Objects
• this operator