Question

Can someone explain why the console acts this way?

I posted this question once, but I could not quite formulate it correctly so I closed it again. The initial question did not mention that the problem could be console related, I just questioned the strange behavior of the variables. I basically only posted the following screenshot:

Note here that I log $s.page on line 20 and $s.page.navi is there, and on line 21 when I log again it’s gone.

Reopening the question

There was nobody who could give an answer, although @zerkms suggested it could have something to do with the console itself. After I closed the question he contacted me via this post: Have require.js load my files only when I actually need them to maybe reopen the question.

The Problem

Enough intro, back to the issue. So where did the variable go. From the other question I posted you can see I use require.js to load my files. I am kinda new to this all so my problem was related to it.

In the code of $s.page I do the following (simplified):

require(['nav'], $.proxy(function(Nav){

    this.navi = new Nav.Views.Main();

}, this));

nav is a module that require.js has to load. I the script would block until the file is there, and looking at the console it confirmed that.

Let me log in more detail:

console.log('x');

require(['nav'], $.proxy(function(Nav){

    console.log('y');

    this.navi = new Nav.Views.Main();

}, this));

I left the other logs in place aswel, and here is the output:

Notice that x is logged first. When I then log $s.page it shows me what $s.page will look like in the future, i guess. Really odd.

When I then log $s.page.navi on the next line it is not there, which is correct.

Then at the very end, without even being called anymore, y joins the party.

Answer 1

See on line 22 of router.js I call $s.page.navi.start(), that was the whole point of this problem. It could not be fired. I solved it with the following code:

require(['nav'], function(Nav){

    $s.page.navi.start();

});

It will just wait for it’s dependencies.

Conclusion

When working with JavaScript, and libraries such as backbone.js and require.js you should really keep track of what you are doing and keep in mind that the script does not easily block.

Just logging at certain points in the application will not always help you solve your problem, you have to really log from the root of your application to the tip of the leaf to see what is actually happening. And the best approach is always the build in debugger.