0

I have the following function. The javascript tutorial I'm reading says it should output 2, but I'm getting undefined in my text editor (JS Fiddle).

What could be the reason? Does this have something to do with strict mode vs non-strict mode?

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

var a = 2;

foo(); //should output "2" but I'm getting undefined. Why?
KishB87
  • 195
  • 1
  • 2
  • 12
  • 1
    possible duplicate of [JavaScript not running on jsfiddle.net](http://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net) – T J Dec 06 '14 at 07:11

3 Answers3

3

That's because you are running the code in a function wrapper that JSFiddle creates. The default is onLoad which puts the code in a function that runs on the load event.

That makes the a variable local to that function, and not a global variable. When you try to access it using this.a it will look for the variable in window.a (as this will point to the window object), but as the variable is not global it can't be found there.

If you choose No wrap - in <head> or No wrap - in <body> for where to put the code, you will get the 2 as output.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Why the downvote? If you don't explain what it is that you think is wrong, it can't improve the answer. – Guffa Dec 06 '14 at 00:06
  • The answer was excellent. Not sure why someone gave you a downvote either. But thank you! – KishB87 Dec 06 '14 at 00:19
  • My gripe with this answer is that it does not help the user understand `this` at all. Simply how to make his code work in jsfiddle. If he tries this in a site he will still not understand `this` and be in the exact same place. – Shan Robertson Dec 06 '14 at 00:25
  • I'm trying to educate OP about `this` which he clearly doesn't understand. settle down. – Shan Robertson Dec 06 '14 at 01:21
0

The tutorial probably assumes that this code is going to be executed in the context of the global object, in which case it will indeed print 2. You can copy/paste the snippet in your browser console and you can see for yourself that the output is 2.

However, if you put the code inside a function and then execute that function, the code will print undefined. I'm not 100% sure of the fine points of how JSFiddle works, but in your case this is what is happening: it puts the code inside a function on your behalf.

Jon
  • 428,835
  • 81
  • 738
  • 806
-1

When you call this.a you are looking for a property in the foo functions prototype. Defining var a = 2 is simply just making a new var called a.

What you want to do is inside foo put this.a = 2 and then your console will output properly. Alternativly, if you want to assign the value of a outside the function

var foo = new foo();
    foo.a = 2;

console.log(foo.a);

Feel free to ask me questions!

Shan Robertson
  • 2,742
  • 3
  • 25
  • 43
  • Using `this.a` doesn't look for anything in the prototype at all. `foo` is just a function, there is no attempt to use it to create an object. – Guffa Dec 06 '14 at 00:52
  • My you are vengeful... But you are right, protoype was not the right word. Property is what i meant. The functions properties. And assigning an `a` property to a function one could absolutely assume he could use an object. – Shan Robertson Dec 06 '14 at 01:20
  • A function can have properties as functions also happens to be objects, but that's not what's going on here, and you wouldn't use `this` to access them. – Guffa Dec 06 '14 at 01:39