Notes on Javascript Asynchronicity


Kurian Benoy


May 17, 2021

A few points to remember about JavaScript:

I am single-threaded non-block asynchronous concurrent language. I have a call stack, an event loop, a callback queue and some other APIs.

Example Link

  1. The first button for clicking Fill button and then on clicking button for alert.
  2. It won’t function, as the operation to fill canvas is still running, and only on completion the alert button is shown.

Main thread: Task A Task B Promise: |async operation|

Coming on that topic of Event Loop, there is an excellent talk by Phillip Roberts about “What the heck is event loop anyways?”. It’s the most watched video for a particular reason.

Rough Notes from that talk

  • In v8, there is a stack, heap. Javascript is single threaded, with single call stack.
  • blowing stack(MAximum call stack exceeded)
  • What if browser were synchronous. In browser, we can’t do anything during program running, so browsers should be ideally asynchronous
  • Simplest solution is asynchronous callbacks. In call stack how is behavious happening? After 5 seconds on Set time out function is printed again.
  • JavaScript Runtime can do just one time, browser can do multiple times like WebAPIs. In case of NodeJS, there is C APIs instead of webapis.
  • In Stack, webAPIs, task Queue.
  • The event loop elements in queue is only pushed when the stack is clear.
  • Time out is minimum guaranteed time which is promised by Event loop

According to him JS was build for web, so any web time instance is build not just merely with JavaScript runtime, but under the hood their is queues, Web APIs to implement the event loop. All this is because javascript is used in application for billions of people daily, because it should be used real time. Just when something is running, our browser can’t freeze to wait for another instance to be loaded right.

Now after watching that 25 minute long talk. Let’s look more into asynchronousity in JavaScript

There are two types of asynchronous code style you will come across in JavaScript code: - Old style callbacks - Newer promise style codes

In case of promises and callbacks they are different in many ways:

  1. Promises helps in ordered execution of statements with then statements
  2. better error handling in case of promises
  3. In case of failure in callbacks it causes the call back hell, which can be pretty difficult to fix the issue
  4. Callbacks loose full control of how functions are executed when passing to a third party library.

Now as MDN concludes:

In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user’s interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.

Also before concluding the link of this week:

  1. Did you know that switch/case statements are not available in Python?
  2. How to implement Sorting in Python, an excellent tutorial by Andrew Dalke and Raymond Hettinger
  3. Did you hear about the latest library Icream to never use print and log again