Understanding how Javascript resolving variables globally

Question

If I open a javascript console on a web page and add a variable:

var abc = "Hello";

Javascript attaches that property to the window object so I can simply access the object by window.abc or directly abc

console.log(window.abc)
console.log(abc)

Now, if I try to access something not defined yet through the window object

console.log(window.notdefinedyet)
> undefined

It simply returns undefined. So if I do

console.log(notdefinedyet)

why is that an error and not just undefined?

Answer 1

Because trying to read the value of an undeclared identifier is a ReferenceError. This is fundamentally a different operation from trying to read a property from an object that the object doesn't have.

Trying to use an undeclared identifier is usually a bug (for instance, a typo). That's part of why ES5's strict mode made assigning to an undeclared identifier a ReferenceError (instead of the old behavior — still in loose mode for backward-compatibility — where it creates a new global variable, something I call The Horror of Implicit Globals).

One could argue (and many have) that trying to get a property from an object that the object doesn't have is also a bug. But it's often really useful to get undefined instead of an error in that case. Whether one agrees with that distiction, this is how JavaScript is defined.

---

It's probably worth noting tangentially that this business of global variable declarations creating properties on the global object is legacy behavior that has to remain in place for backward compatibility, but isn't consistent with current thought on language design in TC39 (the committee behind JavaScript standards). Newer constructs like let, const, and class don't create properties on the global object even when used at global scope (although they do create globals):

var a = 1;
let b = 2;
console.log("a" in window); // true
console.log("b" in window); // false
console.log(a);             // 1
console.log(b);             // 2