0

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Script1.js"></script>
    <script src="Script2.js"></script>
</head>
<body>

</body>
</html>

Script1.js

var Main;
window.onload = Main;

Script2.js

function Main() {
    alert("foo");
}

If I throw a breakpoint @ var Main; and step through the code in WebStorm, it appears to:

  1. Load Script1.js.
  2. Load Script2.js.
  3. Call Main().

However it doesn't execute the statement alert("foo") in that function. Could someone explain what's going on in more detail?

  • NOTE: I realize you should avoid using onload.
  • NOTE: I realize I could re-order the scripts and it would show the alert.
  • NOTE: If I omit the statement var Main;, step 3 above does not occur.

Bonus: In WebStorm, it shows the value of the window.onload field as null and the value of Main as void. What is the difference between a value of null and void?

Improve this question
7
  • 2
    While it's true that they're in the same global variable environment, the scripts are executed separately, and synchronously. This means that even though function declarations are indeed hoisted to the top of the variable environment, the hoisting will not occur until the script actually runs. So by the time the second script begins, the first has completed, and window.onload has been assigned the current value of Main which is undefined. Commented Mar 11, 2012 at 23:04
  • @amnotiam I understood that at the point Main is assigned to window.onload that Main is still void. However, when the second script loads, isn't it setting the value of Main to the function Main() and thus when the window.onload event fires, Main is now no longer void and instead refers to the Main function established as part of loading the second script? Commented Mar 12, 2012 at 0:12
  • @chopperdave yes, Main is a function in the second script, but it doesn't change the fact that window.onload is set to undefined (not void, void is not a value). The above comment is really the best answer here. Commented Mar 12, 2012 at 0:21
  • @chopperdave: JavaScript is entirely "by value"... (keeping in mind that in the case of object types, the value is a pointer to the object). If JavaScript was a "by reference" language, then yes, the onload property would hold a reference to the Main variable, and would observe its changes. But because it's a "by value" language, the value undefined is given to .onload, and .onload is entirely unaware of what happens to the Main variable thereafter. Commented Mar 12, 2012 at 0:23
  • I think my confusion here is with 'void' vs 'null' vs 'undefined'. For some reason, this IDE doesn't use the term 'undefined' and instead uses 'void' and 'null' as values. Based on the response form the guy below, my guess is that the IDE is using 'void' instead of 'undefined'. Is it expected that when loading the scripts that the value of window.onload should be 'null'? Commented Mar 12, 2012 at 0:52

2 Answers 2

Reset to default
1

Because Main is an empty variable at that point in script 1. window.onload essentially is set to undefined. window.onload expects a callback function like so...

var Main = function() { my_main_function() }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The contents of Script1.js:

var Main; // declare but do not initialize a variable named "Main"
window.onload = Main; // sets the onload handler to that *undefined* variable

the function named Main is simply never called.

As for the bonus question: What is the point of void operator in JavaScript? and void @ MDC. TL;DR: void is an operator which always returns undefined. Do you understand the difference between null and undefined?

Improve this answer

4 Comments

If I step through the code @ runtime, the function Main IS being called but the statements inside of it are not be executed. That may not be the correct language to describe what's occuring, but the debugger clearly shows those three separate events occuring (load script1, load script2, call Main).
Yes, it's trying to call Main, because you have assigned a value to window.onload. That doesn't mean it's calling the Main function defined in Script2.js.
Also, when I mentioned 'void', I didn't mean in the sense I think you are describing. I meant 'void' in the sense that the WebStorm IDE is displaying it. In the IDE, a variable can have a VALUE of 'null' or 'void'. Perhaps by 'void' they actually are referring to 'undefined' ?
It's possible that the debugger shows void as the function's return value - that is, it does not return anything. As for the function Main being called: change Main to Foo in Script1.js but not Script2.js and you'll see that it's the window.onload handler being called; the Main in Script2.js is just dead code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.