Why reading undeclared variable gives reference error but undeclared object property returns undefined in javascript?

Question

In below code, if I print this.property2 on console, JS engine prints undefined, if I replace the statement to print only property2 compiler throws a reference error. If I declare the variable property2 then the compiler will return undefined.

function foo() {
  var property;
  console.log(this.property2)
  console.log(this.property2 === property2)
  console.log(property2)
}

foo.property="property value";
var property2; // modified to resolve reference error
foo();
console.log(foo.property);

As I have shown in the code this.property2 is equal to property2 so why javascript behaves differently for the same variable.

Coming to my question are both variables(this.property2 and property2) different? If yes, then why comparison returns true? If no, then why I have to declare property2 to get the return value and this.property2 returns values without declaration.

Am I missing anything?

T.J. Crowder · Accepted Answer · 2017-08-07T07:22:56.323

Why reading undeclared variable gives reference error but undeclared object property returns undefined in javascript?

It really comes down to: Because that's what Brendan Eich decided it should do when designing this stuff. But we can see some reasons he may have made those choices:

In the first case, you have a completely unknown identifier. In the second case, there's context: We know we're looking for an object property. Also note that we can assign to an unknown property without error (doing so creates the property; and that's a good thing, because for a long time it was the only way to create a property [if we loosely take property initializers in an object initializer as an assignment of sorts]; now we have Object.defineProperty [which assigns a value as part of the process] and its plural cousin and the related second argument to Object.create), which balances nicely balances with being able to read an unknown property without error.

He certainly could have made reading an unknown property from an object an error, he just didn't; and there's no changing it now. :-)

Note that early on he made assigning to an unknown identifier a mechanism for creating a global variable. (!) That one, thankfully, was fixed by strict mode.

Side note: You don't declare properties, you create them. Only functions, classes (which are really functions), and variables are declared.

T.j. Crowder, somewhat agree to your answer, maybe JS engines returns undefined when there is scope or engine just tries to lookup properties with context in different scopes depending upon where _this_ is pointing to. But assigning values is not the only way to create a property, Object.defineProperty function/(method if I should call it) can be used to create properties (including shadowing). After digging deeper I got to know about getter and setter , *Getter* which I doubt is causing properties with context returning undefined rather "Reference error".But I appreciate your answer.Thanks — Akshay Naik, Aug 07 '17 at 05:51
@AkshayNaik: Well, `Object.defineProperty` assigns a value too, but you're right I should have mentioned it. Getters aren't relevant here. — T.J. Crowder, Aug 07 '17 at 07:23

Why reading undeclared variable gives reference error but undeclared object property returns undefined in javascript?

1 Answers1