带有全局变量的Javascript中有趣的范围问题

Question

I have a big JS app with many modules, which will ultimately be bundled with browersify. But since I don't want to make my whole team install Node.js and rebuild every time they change a character, I want the modules to register globally just while developing. I've been using the standard registration for modules like so:

// if browserify
if (typeof module === "object" && module.exports) {
    module.exports = myModule;
} else { window.myModule = myModule; }

Here's where it gets funky: When requiring dependencies in the main app.js file, I do this:

if (typeof module === "object" && module.exports) {
    var myModule = require("./js/myModule");
} // otherwise it's assumed to be globe, which console.log(window) confirms
console.log(myModule);

This console log comes back as undefined, so I need an else line that says: } else { myModule = window.myModule; }

Here's a simpler jsFiddle as a proof of concept:

if (false) {
    var test = "Hello World";
} else {
  window.test = "Hello Globe";
}

document.getElementById("console").innerHTML = test;

test is undefined in this scenario.

What puzzles me is that the contents of the if statement that never runs seems to still register test as a local variable. Is that what's happening? Or do I just not understand how global variables work? I thought anything registered to window could be called by it's own name, just as we don't have to write window.jQuery every time.

Answer 1

Javascript hoists var declarations and since you are declaring inside the if statement that's not a new scope, basically having this:

if (false) {
    var test = "Hello World";
} else {
  window.test = "Hello Globe";
}

It's the same of having this:

var test;
if (false) {
  test = "Hello World";
} else {
  window.test = "Hello Globe";
}

That's why it's a good practice to declare your variables on the beginning of the scope, check this example:

var test = "Hello World From outside";
function(){
  console.log(test);
  if (false) {
    var test = "Hello World From inside"
  }
}

This example will output: "undefined" the var test is hoisted to the top of the scope, in this case the top of the function overwriting the outer variable declaration although we will never enter into that if