Narottam04

Posted on Sep 9, 2021 • Updated on Sep 12, 2021

How JavaScript Works🔥 🤖 [Visually Explained]

#javascript #webdev #programming

JavaScript is one of the most loved and hated languages in the world. It is loved because it is potent. You can make a full-stack application by just learning JavaScript and nothing else. It is also hated because it behaves in unexpected and upsetting ways, which, if you're not invested in understanding the language, might make you hate it 💔.

This blog will explain how JavaScript executes code in the browser, and we will learn it through animated gifs 😆. After reading this blog, you will be one step closer to become a Rockstar Developer 🎸😎

Execution Context

"Everything in JavaScript happens inside an Execution Context."

I want everyone to remember this statement as it is essential. You can assume this Execution context to be a big container, invoked when the browser wants to run some JavaScript code.

In this container, there are two components 1. Memory component 2. Code component

Memory component is also known as variable environment. In this memory component, variables and functions are stored as key-value pairs.

Code component is a place in the container where code is executed one line at a time. This code component also has a fancy name, namely 'Thread of Execution'. I think it sounds cool!

JavaScript is a synchronous, single-threaded language. It is because it can only execute one command at a time and in a specific order.

Execution of the code

Let's take a simple example,

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In this simple example, we initialize two variables, a and b and store 2 and 4, respectively.

Then we add the value of a and b and store it in the sum variable.

Let's see how JavaScript will execute the code in the browser 🤖

The browser creates a global execution context with two components, namely memory and code components.

The Browser will execute the JavaScript code in two-phase

1> Memory Creation Phase

2> Code Execution Phase

In the memory creation phase, JavaScript will scan through all the code and allocate memory to all the variables and functions in the code. For variables, JavaScript will store undefined in the memory creation phase, and for functions, it will keep the entire function code, which we will be looking at the following example.

Now, in the 2nd phase, i.e. code execution, it starts going through the whole code line by line.

As it encounters var a = 2, it assigns 2 to 'a' in memory. Until now, the value of 'a' was undefined.

Similarly, it does the same thing for the b variable. It assigns 4 to 'b'. Then it calculates and stores the value of the sum in memory which is 6. Now, in the last step, it prints the sum value in the console and then destroys the global execution context as our code is finished.

How Functions Are Called In Execution Context?

Functions in JavaScript, when you compare with other programming languages, work differently.

Let's take an simple example,

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

The above example has an function which takes an argument of type number and returns the square of the number.

JavaScript will create a global execution context and allocate memory to all the variables and functions in the first phase when we run the code, as shown below.

For functions, It will store the entire function in the memory.

Here comes the exciting part, When JavaScript runs functions, it will create an execution context inside the global execution context.

As it encounters var a = 2, it assigns 2 to 'n' in memory. Line number 2 is a function, and as the function has been allocated memory in the memory execution phase, it will directly jump to line number 6.

square2 variable will invoke the square function, and javascript will create a new execution context.

This new execution context for the square function will assign memory to all the variables present in the function in the memory creation phase.

After assigning memory to all the variables inside the function, it will execute the code line by line. It will get the value of num, which is equal to 2 for the first variable and then it will calculate ans. After ans has been calculated, it will return the value which will be assigned to square2.

Once the function returns the value, it will destroy its execution context as it has completed the work.

Now it will follow a similar procedure for line number 7 or square4 variable, as shown below.

Once all the code is executed, the global execution context will also be destroyed, and this is how JavaScript will execute the code behind the scene.

Call Stack

When a function is invoked in JavaScript, JavaScript creates an execution context. Execution context will get complicated as we nest functions inside a function.

JavaScript manages code execution context creation and deletion with the the help of Call Stack.

A stack (sometimes called a “push-down stack”) is an ordered collection of items where the addition of new items and the removal of existing items always takes place at the same end eg. stack of books.

Call Stack is a mechanism to keep track of its place in a script that calls multiple functions.

Let's take an example

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

We are creating a function 'a', which calls another function 'insideA' that returns true. I know the code is dumb and doesn't do anything, but it will help us understand how JavaScript handles callback functions.

JavaScript will create a global execution context. Global execution context will assign memory to function 'a' and invoke' function a' in the code execution phase.

An execution context is created for function a, which is placed above the global execution context in the call stack.

Function a will assign memory and invoke function insideA. An execution context is created for function insideA and placed above the call stack of 'function a'.

Now, this insideA function will return true and will be removed from the call stack.

As there is no code inside 'function a' execution context will be removed from the call stack.

Finally, the global execution context is also removed from the call stack.

Reference

Namaste JavaScript Playlist on YouTube

I hope this post was informative. 💪🏾 Feel free to reach out to me if you have any questions.

For more such insights, checkout my blog website blog.webdrip.in

Oldest comments (96)

Avi1112 • Sep 9 '21

Nicely explained, good work 👍🏻

Narottam04 • Sep 9 '21

Thank you!

aman0210 • Sep 9 '21

GGs naruto

Narottam04 • Sep 9 '21

💪

Ayodele Ayodeji • Sep 9 '21

This is detailed. Thanks 👍

Narottam04 • Sep 10 '21

Thank you!

Domagoj Vidovic • Sep 9 '21

This is a unicorn for sure. Amazing!

Narottam04 • Sep 10 '21

Thank you!

k3nnet • Sep 10 '21

this is golden . thanks so much for this .

Narottam04 • Sep 10 '21

Thank you!

Narottam04 • Sep 10 '21

Glad you liked it!

KK • Sep 10 '21

Awesome👍👏 explaination

Narottam04 • Sep 10 '21

Thank you!

MasterMind • Sep 10 '21 • Edited

Wish I could like this multiple times

Narottam04 • Sep 10 '21

That means a lot! 🥺 Thank you!

Comment deleted

Hargunbeer Singh • Sep 10 '21

Is it somebody else's content?

dylzeee • Sep 12 '21 • Edited

ummmm no, namaste js is not the first guy to visually explain javascript like this. Nor is the poster of this.

Bala Priya C • Sep 12 '21 • Edited

This post is indeed heavily inspired by Akshay Saini's Namaste JS series - examples, flow of concepts etc. It would have been great if the author had included a line in the post instead of sharing link to the playlist in the comments section.

dylzeee • Sep 12 '21 • Edited

Still, can't call him the 'content owner' as the first commenter did though. This poster has taken common knowledge about javascript and taken the time to visually express it in a unique way. He also linked to his source of knowledge in the comments as you say, which he didn't need to do.

Does that mean every time I create a website and put my name/logo in the footer, I also need to mention the 300+ resources that have taught me something or inspired me....no.

Namaste js, most likely learnt it from somewhere too, maybe one of the many books he has on his desk in the bg, does he give them credit? He often is reading something in his video, probably words of others, does he give credit?

Bala Priya C • Sep 12 '21 • Edited

Yes, I agree that Namaste JS is not the content owner - and the first commenter is not right to phrase it that way. And I totally agree on the great efforts in creating engaging visuals.

However, when almost the whole content of your post is this particular video in the playlist - it doesn't really hurt to mention it in the Reference section in the post.

There's clearly a difference between writing tech tutorials inspired by a lecture series, and developing a website.

When writing tech tutorials, it's often a good practice to mention the references.

It's totally fine if you don't quite feel the need to acknowledge. I only wanted to get across my message.

Narottam04 • Sep 12 '21

Noted and rectified my mistake😄! I thought adding references on the comments section will be sufficient.

Bala Priya C • Sep 12 '21

Thank you for accepting the suggestion positively. ☺️ You're doing an amazing work. Have you considered submitting your posts to javascriptkicks.com?

Narottam04 • Sep 12 '21

I didn't knew about this website, I will consider looking into it, Thanks😄

Bala Priya C • Sep 12 '21

You can submit posts here for a wider reach to the JS devs. And there's a Medium publication JS in Plain English - that'd be a great place to share as well. And then, include the canonical url in the dev.to posts so that we can read it here too.