Demystifying Asynchronous JavaScript — Event Loop, Call stack, Task Queue

Demystifying Asynchronous JavaScript — Event Loop, Call stack, Task Queue

JavaScript is a single threaded programming language. This means that only one piece of code can run at a time, on a single main thread, and everything else is blocked until an operation completes. Luckily, JavaScript is a non-blocking language, and this article is all about how things work under the hood.

Image for post

JavaScript Concurrency Model

JavaScript is a single threaded programming language. This means that only one piece of code can run at a time, on a single main thread, and everything else is blocked until an operation completes.

But we don’t want to wait or get blocked for a certain asynchronous task to complete! Imagine scrolling through Instagram and not able to actually scroll until a particular feed is loaded completely. That would be really awful!

Luckily, JavaScript is a non-blocking language, and this article is all about how things work under the hood.

Table of Contents

  1. Execution Context
  2. Call Stack
  3. Task Queue
  4. Job Queue
  5. Event loop — How it all works together!

Execution Context

Before we get into how JavaScript handles asynchronous tasks, one should know how exactly JavaScript code executes.

Execution context_ is an abstract concept that holds information about the environment within which the current code is being executed._

  • Whenever a JavaScript file loads in the browser for the first time, a global execution context is created.
  • Every-time we call/invoke a function, a new execution context gets created.
  • When we return out from a function OR function body is completely executed, the execution context of that function is destroyed and garbage collected.

Basically, 2 things happen(simultaneously) whenever a JavaScript code is executed in a given execution context —

  1. Threading - JavaScript thread executes each line of code one at a time in a procedural manner.
  2. Memory - JavaScript creates new labels and store in memory, all the variable/function declarations for a given execution context

coding js asynchronous javascript concurrency programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Mastering concurrency with JavaScript/Node.JS

Concurrency is the ability of different parts or units of a program, algorithm, or problem to be executed out-of-order or in partial order…

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Asynchronous Programming in JavaScript

When a program is executed by the processor it runs straight, with only one thing happening at a time. There are many programs that interact with the things outside other than the processor like a network request, data read from the hard disk. In this era in which computers have multiple processor cores available there’s no sense sitting there waiting for something when you could let the other task come along on another processor core and let you know when it’s done.

Advanced Asynchronous Programming in JavaScript

As programmers we all face it one day or another: asynchronous programming (A.K.A. non-blocking programming) ain’t easy. Fortunately JavaScript is one of the few programming languages where it’s actually nicely implemented (since a few years at least)