Breaking It Down #2: Javascript the Hard Parts, Closure, Scope, Execution Context, Callbacks, and Higher Order Functions

[YvesMuyaBenda]

As stated elsewhere, my main purpose of studying the learn-em-architecture-in-javascript code was using the code to help me deliberately backfill gaps in my JavaScript knowledge, and after learning basic dom stuff, my main stumbling block was centered around how JavaScript actually executes code, i.e. what gets run and when and why. To that end, this free version of a Front Masters course is the best resource so far for answering my questions: https://www.youtube.com/playlist?list=PLWrQZnG8l0E5hMTpzCK8WjP3nJ93jUEyk

Too, it is a single coherent resource for defining the topics of closure, scope, execution context, callbacks, and higher order functions; topics without which it will not be possible to truly understand the code. Instead of someone having to go read numerous resources, and then gather them together, and then apply them to the code, it is all in one place within a single narrative.

And here is the FrontEnd masters workshop: https://frontendmasters.com/courses/javascript-hard-parts/

[YvesMuyaBenda]

@nelsonic

I would need code and diagrams and maybe animations to make this a proper writup (not sure how to do the diagrams and animations), but here is how I apply the above materials to helping me comprehend, filling in my gaps about how functions are executed in JavaScript. This is broadly what it took me to understand the passage in the README about closure and how it is used. Without the neat presentation of these concepts in the above resource, I would have been left spinning my wheels!:

Basically, after we have called mount on line 82, passing in 0, update, view, and 'app', mount calls view, which will eventually call button on 63 passing in '+', signal, and inc. Execution then goes on to line 38, and steps down to line 43. If we did not have the callback, then at line 43 when the '+' button is being created, then considering button.onclick = signal(action), signal(action) would actualy be a function call which actually exectues the code that is currently inside callback.

Using closure, we actually return to onclick the code at the time button is created, as opposed to immediately running the code, which would cause the call stack to rapidly blow up; it is because the inner function has access to the enclosing function's scope, that we can still pass the variables around that were intially passed into mount.

In conclusion, one has to have a model about how JavaScript executes code, and all beginner materials which do not go into the details, would leave the beginner unbable to understand the delightfully simple code in this tutorial (just observing how signal was passed around was magical!).

I think I have got the gist of it, so now I have to go and understand the tests, before maybe seeing how I might apply the architecture within a toy example of my own! Good times! Good times! 😀