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.
  • 22,983
  • 19
  • 69
  • 116
L.Ann
  • 88
  • 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,916
  • 1
  • 16
  • 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
  • 60,707
  • 10
  • 101
  • 129
-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,647
  • 3
  • 40
  • 59
joamit
  • 1
  • 1