0

I am practicing Javascript, so I wrote:

 function f(){ 
      console.log(this);      
      var b=2;  
      console.log(b);   
      this.b++;     
      console.log(b);   
      b++; 
} 
f();
console.log(b);

The result surprised me:

/*the console result*/
window
2
2
NaN

In my opinion, this points to f();. b is a private variable for f();. this.b++ and b++ operate on the same variable.

/*the right anwser in my mind*/
f
2
4
TypeError

Please explain why I did not get the expected result.

I wrestled a bear once.
  • 21,988
  • 17
  • 67
  • 115
L.Ann
  • 78
  • 9
  • If you `console.log(this.b)` it is `NaN`, so `this.b++` is incrementing nothing. – Luke Oct 22 '16 at 02:07
  • this is `window` and not a function. So the variable `b` is unknown to the window scope as it's a local variable within a function – Rajshekar Reddy Oct 22 '16 at 02:09
  • 2
    `this.b` and `b` are not the same variable. – Raymond Chen Oct 22 '16 at 02:09
  • Possible duplicate of [What is the scope of variables in JavaScript?](http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) – Raymond Chen Oct 22 '16 at 02:10
  • There are a couple of things you are confusing here: 1) `this` does *never* refer to the function itself, unless *explicitly* set so. The value of `this` depends on how a function is called. 2) Even if `this` referred to the function, `this` is not the scope/environment of the function. You cannot directly access it. `var b` is simply a *variable*, `this.b` is a *property*. I encourage you to read an extensive introduction to JavaScript, such as http://eloquentjavascript.net/. – Felix Kling Oct 22 '16 at 02:55

3 Answers3

3

Let's break down what is happening here:

function f(){
  /* 
     Since you called this function directly, "this" is pointing
     to the window object of the browser because it is the global scope
  */
  console.log(this); // window 
  var b=2;  // Assigning 2 to a local variable "b"
  console.log(b); // 2 - because you are logging your local scoped variable

  /*
      This is really saying window.b++ and since b isn't typically
      defined on the window object it is essentially saying:
      window.b = undefined + 1
  */
  this.b++;   
  console.log(b); // 2 - because you are logging your local scoped variable that hasn't changed 
  b++; // Increment your local scoped variable
} 

f(); // Calling the function you just defined in the global scope

/*
    This is actually logging window.b which is considered to be
    NaN (not a number) because you incremented "undefined" and
    since undefined is not a number it can't be incremented
*/
console.log(b);
rdubya
  • 2,906
  • 1
  • 14
  • 20
  • If any of my wording is unclear/confusing please let me know and I can try to reword/add more explanation. – rdubya Oct 22 '16 at 02:21
  • @L.Ann Great! Could you flag this as the selected answer then so that the question is marked as answered? – rdubya Oct 22 '16 at 10:07
0

You have the b variable set to local-variable in your f function (using var b), so you can't access it using the window variable.

If you set the b variable to global (var b in the outer-scope) you will be able to use this (as window) to do that:

var b
function f(){ 
      // console.log(this);
      b=2;  
      console.log(b);   
      this.b++;     
      console.log(b);   
      b++; } 
f();
console.log(b);

I've disabled the first console.log(this) because the so-snippet gives a lot of output there

Dekel
  • 57,326
  • 8
  • 92
  • 123
-2

To get 4 you will have to do this this.b = this.b++; Or b=b++; will also work.

You are getting Nan as the last result because b is not defined in that scope. You could read about variable hoisting in javascript for more details.

Rajshekar Reddy
  • 18,019
  • 3
  • 36
  • 56
joamit
  • 1
  • 1