Javascript Internals

Nov 6, 2021
5 min read

JavaScript is becoming more and more popular day by day so as a developer you also get a chance to work with JavaScript. It is very important to look at the building blocks of JavaScript and be well acquainted with some rules of thumb, especially if you are a JavaScript developer and want to build fully robust and highly performant applications in a competitive environment.

When you look at the GitHut stats, you can easily see that the language tops in terms of active repositories and total pushes. Apart from this, it is not lagging behind in other categories as well.

Please also check GitHub language stats.

If projects are becoming too reliant on JavaScript, it means that developers have to know everything the language and ecosystem have to offer, along with a deeper and deeper understanding of the internals, to create amazing software.

You wouldn't want to be a developer who is using JavaScript on a daily basis but doesn't understand what happens under the hood.

Overview

If you do a little research, then you get to know V8 Engine as a concept or JavaScript is single-threaded or using a callback queue.

The purpose of this article is that you should have a proper understanding of all the JavaScript concepts and also know how JavaScript actually works.

Here you will also get to know why JavaScript is so weird if compared with other languages. If you've worked a lot in JavaScript, you'll still get to know how the JavaScript Runtime actually works.

The JavaScript Engine

Google's V8 engine is a very popular example, and it is inside Chrome and Node.js if given an example.

Source: https://learntechsystems.com/understanding-the-js-memory-heap-and-call-stack/

The engine consists of 2 main components:

Memory Heap- This is where the memory allocation takes place.

Call Stack - Stack frames are here whenever your code is executed.

The Runtime

Browsers have APIs, which you as a JavaScript developer must have used. For example "setTimeout". The engine does not provide you with these APIs. Now we're going to find out where these APIs come from.

Source: https://morioh.com/p/1fa7f08ddd14

Apart from the engine, there are also a lot of things called Web APIs that the browser gives us such as AJAX, DOM, setTimeout, and more.

Next comes the event loop and callback queue.

The Call Stack

It is a well-known fact that JavaScript is a single-threaded programming language which means it has a single call stack. It will do one thing at a time.

Let's look at an example.

function multi(x, y) {

return x * y;

}

function displaySquare(x) {

var s = multi(x, x);

console.log(s);

}

displaySquare(5);

When the engine starts executing the code, the call stack will be empty and after that, the steps will be something like this.

Shown below is how stack traces are created whenever an exception is thrown.

function firstFunction(){

throw new Error('Stack Trace Error');

}

function secondFunction(){

firstFunction();

}

function thirdFunction(){

secondFunction();

}

thirdFunction();

LIFO: Here the full form of LIFO is ‘Last In, First Out’. This means that the function that is pushed last in the stack will be the first to pop out when the function returns. Now we would like to say that the call stack operates by the data structure principle of LIFO.

Look at this code sample in which the LIFO demonstration is happening. Here the stack trace error is being printed to the console.

Here it is clearly visible that the stack is starting from firstFunction() which was last inserted inside the stack. firstFunction() is the first to pop out and throws an error. After that secondFunction() followed by thirdFunction (). When the code is executed the first function to be pushed inside the stack is the thirdFunction().

Temporarily store: As soon as the function is called(invoked), the things that are pushed into the call stack to form the stack frame are the function, its parameters, and all variables. A memory location is created in the stack and this is what we call the stack frame.

Manage function invocations (calls): The call stack contains all records of the position of each stack frame. That is, which next function will be executed and it will also have to be removed after execution. Thus the code execution in JavaScript becomes synchronous.

To understand what is synchronous, suppose you are standing at the cash point of a grocery store and you will be attended only after the person standing in front of you is attended by the cashier.

This is what we define as "manage function invocations".

How does the call stack handle function calls?

For this, we have created a sample code of a function which calls another function. Please see below:

Let us now see what happens when the code is run.

  • As soon as the secondFunction() is executed, an empty stack frame is formed which is the main entry point of the program.
  • Now the second function() will call the first function(), which is pushed into the stack.
  • As a result, firstFunction() will return "Hello I am Jonathan" to the console.
  • firstFunction() has done its job and it will be ready to pop off.
  • Now the execution order will target secondFunction().
  • secondFunction() will print "End secondFunction".
  • The secondFunction() will pop off and clear the memory.

Stack overflow

If the recursive function does not find an exit point, a stack overflow will occur. The browser can accommodate the maximum stack calls, after which it will throw a stack error.

function callMeAgain(){

callMeAgain();

}

callMeAgain();

callMeAgain() will run until the browser i.e., hosting environment gives an error "Maximum call size exceeded". And it's called Stack Overflow.

Key takeaways

  1. JavaScript is single-threaded. It will do one thing at a time.
  2. In JavaScript, code execution is synchronous.
  3. The function invocation forms a stack frame that occupies a temporary memory.
  4. It follows the LIFO - Last In, First Out data structure.