Referring a member variable from self invoking nested function

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

Answer 2

In javascript, variables have function-level scope. Also, this:

this.x = 100;

is differnt from:

x = 20;

because in later case, x has global (you have not used var before it) scope eg it becomes part of window object.

---

Also when you are doing:

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

You are accessing global variable x set via x = 20; whereas you are suppossed to do:

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

Answer 3

var f = function() {

    this.x = 100;
    console.log(this);
    // f

    (function() {
      console.log(this);
      // DOMWindow. So x is a property of window because you're not declaring it with var
      x = 20;
    })();
};

if you want to assign the product of the anonymous function to the scope of f then the following will work:

var f = function() {
    this.x = (function() {
      var x = 20; // Local scope
      return x;
    })();
};

console.log( (new f().x) );

Answer 4

If you want to change a member function in a nested, anonymous subfunction, you might want to create a pointer to 'this' within scope, as follows:

var f = function() {
    this.x = 100; // set the member value
    var self = this; // pointer to the current object within this function scope
    (
        function(){
            self.x = 20; // 'self' is in scope
        }();
    )();
};

var a = new f;

console.log(a.x); // Output: 20

Answer 5

When you declare a variable without var, the variable is in global scope.