0

From my understanding, all properties created are given the value of undefined after the execution phase of the Execution Context - then, during the creation phase, the JS engine goes through the script, line by line, and assigns a value if it finds an = operator. With this in mind:

console.log(window);
var myVar = 1;

From the above snippet, why does the myVar property, within the global object, show a value of 1? I would have thought it would show a value of undefined, as this is what it was set to during the execution phase? If I try to access the property directly, like:

console.log(window.myVar);
var myVar = 1;

I DO see the value as undefined... it's only when I log the entire global object I'm seeing the value as 1. Am I missing something here?

Note - this is simply for learning purposes.

James Roberts
  • 3
  • 3
  • 2
    `var = myVar = 1;` is a syntax error? I'm assuming you meant to write `var myVar = 1;`? – evolutionxbox Dec 05 '21 at 17:49
  • 2
    My apologies, yes, that was a typo. I meant var myVar = 1; I have edited the question. – James Roberts Dec 05 '21 at 17:52
  • 2
    I think you're running into a quirk of the way console.log works, nothing more. When you log an object, the browser does *not* immediately figure out all the properties of that object. It waits until you click to expand it in the console, and then figures out the properties. So when you do `console.log(window)` you're seeing the values that `window` has *when you click it*, not what it had when the log statement executed. – Nicholas Tower Dec 05 '21 at 17:52
  • According to @Nicholas Tower, this is indeed the way objects are discovered in the DevTools console, they're evaluated only when you expand it. If you change your print statement to `Object.entries(window).forEach(values => console.log(values[0], values[1]));` it will show your variable as undefined since we're accessing the value instantly. – mohkamfer Dec 05 '21 at 18:01
  • 1
    Thank you, Nicholas, and mohkamfer, that makes perfect sense. – James Roberts Dec 05 '21 at 18:04

1 Answers1

0

this has nothing to do with the window object, this is called hoisting

Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

another example would be

function test(){
  console.log(myVar);
  var myVar = 1;
}

test()

this would still log myVar as undefined. while omitting the myVar would throw an Exception..

Edit:

this only happens in the chrome console, it would be undefined otherwise.

Ahmed Eid
  • 4,414
  • 3
  • 28
  • 34
  • 2
    I don't think this is related to hoisting, he's asking why the value appeared in the first example but not the second. – mohkamfer Dec 05 '21 at 17:58
  • 2
    I agree that this is probably not directly related to hoisting. It was the first thing that came to my mind, though, and I can see why Ahmed answered with it. So I don't know who downvoted it, but I gave an upvote to offset that because an incorrect answer isn't always worth losing points over. – JAAulde Dec 05 '21 at 18:03
  • 2
    thank you for pointing out, you are correct it probably related to the nature of the console. – Ahmed Eid Dec 05 '21 at 18:04
  • 1
    "*this only happens in the chrome console,*" and Firefox. And Edge. – VLAZ Dec 05 '21 at 18:07
  • Thank you, Ahmed. Yes, mohkamfer and JAAulde are correct, and this is more of a quirk with console.log, rather than the way hoisting works. – James Roberts Dec 05 '21 at 18:08