Graduate Program KB

Asynchronous JavaScript

The JavaScript Language

  • Synchronous Language
  • Single threaded language
  • Code runs line by line
  • Each operation must wait for the former to finish

Execution Context

  • Two Phases

    • Creation Phase
    • Execution Phase

  • Creation Phase

    • Create the global object (browser = window, node.js = global)
    • Create the 'this' object and bind it to the global object
    • Setup the memory heap for storing variables and function references
    • Store the functions and variables in the execution context and set to 'undefined'

  • Execution Phase

    • Code is executed line by line
    • A new execution context is created for each function call

  • The Call Stack

    • A mechanism for the JavaScript interpreter to keep track of its place in a file that calls multiple functions
    • Each execution context is put onto the call stack.

Call Stack Example

const first = () => {
  console.log('first...');
  second();
}
const second = () => {
  third();
  console.log('second...');
}
const third = () => {
  console.log('third...');
}
first();
  • Steps
    • The order of Execution Context (EC's) put onto the call stack
    1. Push Global EC
    2. Push First EC
    3. Push Log EC, Execute ('first...') then Pop Log EC
    4. Push Second EC
    5. Push Third EC
    6. Push Log EC, Execute ('third...') then Pop Log EC
    7. Pop Third EC
    8. Push Log EC, Execute ('second...') then Pop Log EC
    9. Pop Second EC then First EC and finally the Global EC

Asynchronous Programming

  • Technique that enables the program to start a potentially long running task and still be able to respond to other events

  • The Task Queue and Event Loop

    • The task queue contains registered callback functions from asynchronous operations
    • The event loop checks if the call stack is empty, if so it pushes the registered callback to the stack
    • These callback functions are then executed and popped of the stack

Web API Callback Example

  • Process of an asynchronous call to a web API
    1. setTimeout function executed and popped off the stack
    2. The web API that handles the setTimeout function registers a given callback
    3. The web API does some work, in this case the system must wait x amount of milliseconds
    4. Registered callback is put in the macro task queue
    5. Event loop sees there is a callback in the task queue and checks if the call stack is empty
    6. Once the call stack is empty teh event loop signals that teh callback function can be put on the stack
    7. The callback is executed and popped off the stack

macro-task-queue

Promises Callback Example

  • Process of an asynchronous call promises are involved
    1. Resolve function is pushed on the call stack, executed and popped off
    2. The resolve function returns a promise that is 'thenable'
    3. The Then() function is pushed onto the call stack and immediately popped off
    4. A callback function passed as an argument to the then function is registered
    5. This callback is enqueued to the micro task queue (A.K.A the promise jobs queue)
    6. The event loop prioritizes the micro task queue over the macro task queue and pushes the promise callback to the call stack for execution

micro-task-queue

  • Order of addition to the callstack
    1. Synchronous operations that do not have to register callbacks
    2. Asynchronous promise registered callbacks
    3. Asynchronous web API registered callbacks

References / Resources