DEV Community

Cover image for How JavaScript Works🔥 🤖 [Visually Explained]
Narottam04
Narottam04

Posted on • Updated on

How JavaScript Works🔥 🤖 [Visually Explained]

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 🎸😎

https://media.giphy.com/media/EA4ZexjGOnfP2/giphy.gif

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!

Execution context

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);


Enter fullscreen mode Exit fullscreen mode

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 🤖

Execution context 1.1

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.

Execution context 1.2

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);


Enter fullscreen mode Exit fullscreen mode

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.

Execution context 1.3

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.

Execution context 1.4

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

Execution context 1.5

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.

Execution context 1.6

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

Execution context 1.7

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.

Call Stack

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();


Enter fullscreen mode Exit fullscreen mode

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.

Call Stack

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

https://media.giphy.com/media/l4pTjOu0NsrLApt0Q/giphy.gif?cid=ecf05e47dtlkk3fe19ovkz96zbsihgjhtu6injewu9oy5v8e&rid=giphy.gif&ct=g

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

Top comments (96)

Collapse
 
pappudutta profile image
Pappu Dutta

"As it encounters var a = 2, it assigns 2 to 'n' in memory."
here a should be n, I think. It makes me confused for a minute

Image description

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
dylzeee profile image
dylzeee • Edited

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

Collapse
 
balapriya profile image
Bala Priya C • 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.

Thread Thread
 
dylzeee profile image
dylzeee • 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?

Thread Thread
 
balapriya profile image
Bala Priya C • 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.

Thread Thread
 
narottam04 profile image
Narottam04

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

Thread Thread
 
balapriya profile image
Bala Priya C

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

Thread Thread
 
narottam04 profile image
Narottam04

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

Thread Thread
 
balapriya profile image
Bala Priya C

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.

Collapse
 
hamiecod profile image
Hargunbeer Singh

Is it somebody else's content?

Collapse
 
deddyprianto profile image
Deddy Prianto Sihombing

Genius

Collapse
 
najmul009 profile image
Najmul Hossain

Infective👍

Collapse
 
narottam04 profile image
Narottam04

Awesome YouTube playlist to learn more about JavaScript:

I hope y'all will like this!

Collapse
 
ankush21 profile image
Ankush Agrawal

Thank you for detailed explanation about Java script. I have just start reading javascript from w3schools but I learned very little. Just going through your blog, I understand the basics of javascript very easily. I have gone through various blog of javascript as I started learning. I also find this blog interesting about javascript - theonetechnologies.com/blog/post/a... -

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it Ankush!❤️

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

This is a unicorn for sure. Amazing!

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
bobbyiliev profile image
Bobby Iliev

This is amazing! Well done!

What tool did you use to create those amazing animations?

Collapse
 
narottam04 profile image
Narottam04

PowerPoint 2019

Collapse
 
efraimla profile image
Efraim

Old school, like it. Great work

Thread Thread
 
narottam04 profile image
Narottam04

😂yes, couldn't find better tool for it. If there is a better tool than PowerPoint lemme know

Collapse
 
lannex profile image
Shin, SJ

This is a good post.

Can I translate this into Korean?

Collapse
 
narottam04 profile image
Narottam04

Sure! you can do it. Just add my twitter profile or link back to this blog.

Collapse
 
lannex profile image
Shin, SJ

You bet!

Collapse
 
levilee profile image
drdung1999 • Edited

This is the best easy explain on the internet. can you tell me where i can learn these things like this.

Collapse
 
narottam04 profile image
Narottam04

There is a yt playlist called "Namaste JavaScript", also if you want some premium content you can check out frontend masters JavaScript courses.

Collapse
 
levilee profile image
drdung1999

thank you so much

Some comments may only be visible to logged-in visitors. Sign in to view all comments.