9

In JavaScript in the browser window is the global object, which means every variable defined in the global scope is a child of window. So why do I get this result:

console.log(window.foo); // No error, logs "undefined".
console.log(foo);        // Uncaught ReferenceError: foo is not defined.

Fiddle

Those two lines should be the same, shouldn't they?

VLAZ
  • 26,331
  • 9
  • 49
  • 67
gdoron
  • 147,333
  • 58
  • 291
  • 367

3 Answers3

19

Because with window.foo you are explicitly looking for foo property of window object which is not the case in latter option. In the latter option, if foo isn't defined, you should as developer be able to know that it isn't defined and get the clear error warning rather than interpreter setting it to undefined on its own (like first case) which will lead to unexpected results.

Reference Error:

Represents an error when a non-existent variable is referenced. A ReferenceError is thrown when trying to dereference a variable that has not been declared.

Take a look at this article for more info:

Quoting from above article:

A Reference is considered unresolvable if its base value is undefined. Therefore a property reference is unresolvable if the value before the dot is undefined. The following example would throw a ReferenceError but it doesn’t because TypeError gets there first. This is because the base value of a property is subject to CheckObjectCoercible (ECMA 5 9.10 via 11.2.1) which throws a TypeError when trying to convert Undefined type to an Object.

Examples:

var foo;
foo.bar; //TypeError (base value, foo, is undefined)
bar.baz; //ReferenceError (bar is unersolvable)
undefined.foo; //TypeError (base value is undefined)

References which are neither properties or variables are by definition unresolvable and will throw a ReferenceError, So:

foo; //ReferenceError
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
3

In your first example (window.foo) you are accessing a property of the window object. JavaScript returns "undefined" for when you are trying to access a non existent property of a object. It's designed that way.

In the second example you are referencing a variable directly, and since it does not exists an error is raised.

It's just the way JavaScript is designed and works.

Jan Hančič
  • 53,269
  • 16
  • 95
  • 99
1

In JavaScript you can assign object fields on the fly like that, so window.foo is nearly (see comments below) equivalent to var foo; when defined in the global context, whereas just calling foo out of the blue makes the browser panic 'cause it down't even know which object to look in. Notice, if you do:

//when in global context, 'var' sets a property on the window object
var foo;

console.log(foo);
//it will then also log `undefined` instead of throwing the error.

//if you then do:
foo = "abbazabba";

console.log(window.foo);
// it will return "abbazabba"
JKing
  • 807
  • 5
  • 14
  • 1
    `window.foo` is not equivalent to `var foo`. – Tim Down Apr 11 '12 at 09:09
  • @TimDown. can you elaborate some more please? maybe in an answer? – gdoron Apr 11 '12 at 09:10
  • @TimDown & @gdoron Okay, that is a bit untrue - what I meant was window.foo is equivalent to `var foo` when declared in the global context. – JKing Apr 11 '12 at 09:12
  • 1
    It's still not quite equivalent. For example, it's possible to delete a property of the global object that has been explicitly set (after `window.foo = "bar";`, `delete window.foo;` deletes the `foo` property and returns `true`) whereas it's not possible to delete a variable (after `var foo = "bar";`, `delete window.foo;` does nothing and returns `false`). – Tim Down Apr 11 '12 at 09:26
  • @TimDown Maybe not in your browser, but in mine, `var foo = "bar"; delete window.foo;` returns `true` (as does `window.foo = "bar"; delete foo;`) `foo` then throws the error, and `window.foo` returns undefined. In fact, `var foo; (window.foo === foo)` also returns true! They seem pretty dang equivalent to me. (Granted, again, only in the global scope.) – JKing Apr 11 '12 at 09:35
  • 2
    I guess you're trying it in the console, which changes things because the console uses `eval()` and code executed with `eval()` behaves slightly differently from code executed normally. Try it in a test page instead. – Tim Down Apr 11 '12 at 09:41
  • @TimDown haha, you should have quit when I accepted defeat, son! your Fiddle shows them as the same! I modified it, though, to show the difference (and prove _my own damn self_ wrong.): http://jsfiddle.net/jking/SZq2R/2/ – JKing Apr 11 '12 at 10:09
  • Ahhh, it needs to be in the global scope, of course. Changing the jsFiddle mode to "no wrap (body)" fixes it. http://jsfiddle.net/timdown/SZq2R/ – Tim Down Apr 11 '12 at 10:23
  • @TimDown I believe(d) you, bro! You totally win! It's okay, you can rest easy tonight. – JKing Apr 11 '12 at 11:39
  • @TimDown Hey, man - at least you _did_ succeed at making the point! And a good time was had while it lasted. No apologies necessary, though, I (honestly) am grateful that you taught me that. Thanks! – JKing Apr 11 '12 at 12:06