Why does window.onload allow me to use functions when they are used as function expressions?

Question

I understand that function expressions must be expressed at the top if you want to use them vs function declarations which are hoisted to the top.

When I call my constructor from with window.onload, it works. However if I don't have a window.onload, and call my constructor before my function expression, the code breaks.

<script type="text/javascript">

        window.onload = function () {
            var c = new C();
        }  // this works, but if i delete window.onload the code breaks.

        var C = function () {
            console.log("test");

        };

 </script>

The `var C` *declaration* is still hoisted, even though the function itself isn't. So execution goes: `var C` declared **=>** window `load` event listener is specified (but doesn't run yet – the window hasn't finished loading) **=>** function is assigned to `C` **=>** window `load` event fires (by which point your function has been assigned to `C`). — Shai, Sep 10 '14 at 15:05
Be careful to read answers & comments in the QA I linked to (the accepted answer isn't very good) — Denys Séguret, Sep 10 '14 at 15:05
Let's make a simpler but equivalent example: `var foo = function() { alert(bar); }; var bar = 42; foo();`. What do you think will happen here? Will the `alert` "work" correctly? — Felix Kling, Sep 10 '14 at 15:10
@runners3431 To answer your question more directly: function expressions don't have to be expressed **at the top**, they have to be expressed **before you call them**. [The `window.onload` function is called when loading finishes](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload), i.e. **after** your function has been assigned to `C`. — Shai, Sep 10 '14 at 15:15
[Concurrency model and Event Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop) — , Sep 10 '14 at 15:31

score 0 · Answer 1 · answered Sep 10 '14 at 14:58

0

That's simple. window.onload executed later, when C is defined, if you just call new C it will throw because C is undefined.

Move your call after definition, or define it using 'function' keyword, not 'var'

answered Sep 10 '14 at 14:58

Anatoliy

29,485
5
46
45

When window.onload is ready to be executed, does it mean that all my javascript functions have been read by the browser? – runners3431 Sep 10 '14 at 14:59
Yes, if they are loaded synchronously. – Anatoliy Sep 10 '14 at 15:00

score 0 · Answer 2 · answered Sep 10 '14 at 14:59

window.onload does not get fired immediately. It gets fired when the window is done loading.

What you are doing is saying "execute this function to create a new variable 'c' when the windows is done loading."

However since var C is defined in the global scope it gets assigned its function value immediately. So it is ready to be evaluated by the time window.load executes.

Why does window.onload allow me to use functions when they are used as function expressions?

2 Answers2