Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

Javascript Fatigue — What it feels like to learn Javascript
Visual Representation of JS Model(credits)
JS Stack Visualization (GIF) (Sorry Correct Output = 100)
Error stack trace(credits)
(credits)

Event Loop

Basically, when we evaluate the performance of our JS code, so a function in a stack makes it slow or fast, console.log() will be fast but performing iteration with for or while over thousands or millions of line items will be slower, and will keep the stack occupied or blocked. This is termed as blocking script, which you have read or heard about in Webpage Speed Insights.

  1. The request function is executed, passing an anonymous function in onreadystatechange event as a callback to execute when a response is available sometime in the future.
  2. “Script call done!” is immediately output to the console
  3. Sometime in the future, the response comes back and our callback is executed, outputting its body to the console.
while (queue.waitForMessage()) {
queue.processNextMessage();
}
Javascript Event Loop Visual Representation

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gaurav Pandvia

Gaurav Pandvia

Web Enthusiast, MTS @Nutanix Product Engineer @Beam