Why does JavaScript "this" returns different values in Node and Browser environments?

Question

After watching Kyle Simpson's Advanced JavaScript course on Pluralsight, I created a simple code snippet to try out this binding. I usually work in SublimeText editor and have node build engine configured in it and occasionally I run the same code in browser as well. I have noticed one difference in the program output when execute code in Node and in Browser [Chrome].

Following is the code snippet to try out this binding.

function foo() {
    console.log(this.bar);
}

var bar = "bar1";
var obj = {bar : "bar2"};

foo();
foo.call(obj);

When I execute it using Sublime, it returns undefined and bar2. However when I execute same snippet in a browser it returns bar1 and bar2, which I think is correct since variable bar is defined at global scope. I am not able to understand why Node environment is returning it as undefined. Kindly help.

This is why all Javascript code should be run in strict mode. Then, wrong code won't accidentally work sometimes, but not other times. The invocation of foo() and the subsequent reference to this.bar inside of foo() is simply just bad code that accidentally works sometimes in a browser because you coincidentally have a global variable with the same name as the property you're trying to reference and this is set to window in a browser not running in strict mode and globals are properties of the window object. Run in strict mode and this error will be immediately shown to you. — jfriend00
– jfriend00, Commented Jul 7, 2015 at 6:19
Basically, in the browser this === window, but in Node this !== global and var outside a closure in a Node module does not create a global variable anyway. — Alexander O'Mara
– Alexander O'Mara, Commented Jul 7, 2015 at 6:21
Thanks a lot @jfriend00 for quick response and clarifying the doubt. — Prasad Honrao
– Prasad Honrao, Commented Jul 7, 2015 at 6:39
@PrasadHonrao - I expanded my comment into an answer which explains in detail what is happening in the node.js case. — jfriend00
– jfriend00, Commented Jul 7, 2015 at 7:09

jfriend00 · Accepted Answer · 2015-07-07 07:09:01Z

1

In node.js, your bar variable is a module variable which is local to that module. It is not a global variable. Globals in node must be explicitly assigned to the global object. Top level declarations in a node.js module are not automatically globals like they are in a browser JS file. Technically, they exist inside a function scope that is created by the module loader so they are local variables to the module's function scope.

In node.js, the value of this in a plain function call like foo() is the global object.

But, in node.js, your bar variable is NOT a property of the global object. So, when you try to reference this.bar, that's global.bar and there is no property on the global object by that name.

So, in node.js, you're essentially doing this:

// create a function which is like the module scope
function myModuleFunc() {
    function foo() {
        // the value of this in a plain function call in node.js is the
        // global object
        console.log(global.bar);
    }

    // this isn't a global
    var bar = "bar1";

    foo();
}

// execute that module scope function
myModuleFunction();

And, hopefully you can see why there is no global.bar property, thus you get undefined.

This all accidentally works in a browser because var bar is a global and globals are on the window object and this === window so it accidentally works. Two wrongs make a right that works only sometimes.

As I said in my comment, it is highly recommended to run your code in strict mode and things will not accidentally work sometimes, but not others - this issue will all be highly consistent and you will get an immediate error when you have written the wrong sort of code.

Though you said you already understand what is happening in the browser environment, since your question asks why the two are different, I will describe the browser situation just to cover all the bases.

In the browser, the value of this in a plain function call (when not in strict mode) is the window object.

In the browser, your bar variable is a global variable and thus automatically becomes a property of the window object.

So, in the browser, you are essentially doing this:

function foo() {
    console.log(window.bar);
}

window.bar = "bar1";

foo();

And, thus you can see why it happily creates a property on the window object and then references it.

edited Jul 7, 2015 at 7:09

answered Jul 7, 2015 at 6:49

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user228852 Over a year ago

This is absolutely the correct answer and is exactly how I would have answered it. :) In addition, I'd say that there are other cases where Node has inconsistency with browsers on this behavior, such as with setTimeout(..). The browser standard says timers should always fire in global (regardless of strict mode), but in Node, they violate this and always fire timers in the context of a proprietary (node-only) timer object.

Prasad Honrao Over a year ago

@jfriend00 I cant thank you enough for such a detailed explanation.

Arun P Johny · Accepted Answer · 2015-07-07 06:23:38Z

0

That is because of the variable declaration var bar = "bar1";, That is declared in the global scope. All global variables are available as properties of the window object.

When you call foo() without any context the default context of the method is the window object(in non strict mode), so your code execution becomes console.log(window.bar);, as we have seen above your bar variable has attached itself to the window object as a property, so its prints the value bar1

function foo() {
  snippet.log('is window:' + (this instanceof Window))
  snippet.log('bar value: ' + this.bar);
}

var bar = "bar1";
snippet.log('window.bar: ' + window.bar)

var obj = {
  bar: "bar2"
};

foo();
foo.call(obj);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

edited Jul 7, 2015 at 6:23

answered Jul 7, 2015 at 6:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Prasad Honrao Over a year ago

I am not confused about browser output, which as I mentioned seems to be correct. The Node environment returns it as undefined and I don't know why, and so the question.

Collectives™ on Stack Overflow

Why does JavaScript "this" returns different values in Node and Browser environments?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related