Search code examples
javascriptscoping

Javascript Odd Scoping Behavior

I've been going through Javascript function scope and have run into this:

var scope = "global";

function f(){
    console.log(scope);

    var scope = "local";

    console.log(scope);
}

f();

Now I understand that the output of the first log is "undefined" because of how js hoists variables at the top of the function. BUT when I remove var from "var scope = "local";" the first log outputs "global" and this has got me scratching my head. Can someone explain why that is happening please? I mean doesn't js sequentially run the code? As such how can removing VAR have any impact on the first log?

Solution

  • Two-pass parsing. The code will be treated as if it was

    function f() {
   var scope;  // var created, but no value assigned. this overrides the earlier global
   console.log(scope);
   scope = 'local';
   console.log(scope);
}

    The var's CREATION will be executed as if it was the very first bit of code executed in the function. But the actual assignment operation won't occur until where it normally would.