JavaScript — 3 Things you should know

Behind The Scenes

After my previous post covering beginner-friendly aspects of Javascript, I’ve decided to look into a behind-the-scenes concept. This article will cover aspects of JavaScript’s function executions, focusing on the event loop, call stack, and heap.

JavaScript may very well be the most popular programming language in use today. JavaScript’s ability to create web applications, front-end, back-end, and mobile applications with React Native makes it a dominant gene in the genetic pool of programming languages.

In your web applications, there will come a time when you will need a deeper understanding of how Javascript executes functions.

Variables in JavaScript (and most other programming languages) are stored in two places: call stack (which we will get to in a bit) and the heap.

Heap is a much larger region storing everything allocated dynamically. This separation is useful to make the execution safer from corruption (stack is more protected) and faster (no need for dynamic garbage collection of the stack frames, fast new frame allocation).

The Heap is a simple concept to understand. It is where Javascript stores the variables created so it can use them in function executions later.

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

Essentially the call stack is a process Javascript uses to execute functions in a specific order. It is made up of stack frames which each represent a pending subroutine call (function within a function.)

The stack frames are “Last In First Out” or LIFO. As each function is called, it is placed on the top of the call stack to ensure it is executed first. Once all tasks are stacked, they are executed one by one and removed until the stack is clean.

JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks. This model is quite different from models in other languages like C and Java.

As most developers know, Javascript is single-threaded, meaning two statements in javascript can not be executed in parallel (unless you use async functions, which is a story for another day). Execution happens line by line, which means each javascript statement is synchronous and blocking.

The Event Loop handles the execution of functions by checking the call stack and executing them in LIFO fashion. This is done until the stack frames in the call stack are empty. Essentially JavaScript uses the Event Loop task management to maintain the Call Stack and handle the correct order of code execution.

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