DEV Community

Cover image for How JavaScript really works?
Krishna Nigalye
Krishna Nigalye

Posted on • Updated on • Originally published at Medium

How JavaScript really works?

Alt Text
Heard of JavaScript but, don’t know the basics? Have no idea about what happens behind the scenes? Having troubles in cracking the interviews? Don’t worry. This post will get you started with fundamental concepts of JavaScript. These concepts may or mayn’t be used in your day to day activities, but if you are curious and want to dig deep into the world of JavaScript then I am sure that you will find this stuff really interesting. This post will cover one of the most basic topics of JS — Execution Context. So without further ado, lets get started.

Have you heard about the ‘Execution Context’?

Execution Context is one of the most basic concepts in JS. Let me put it this way.

Everything in JS happens inside the Execution Context.

Let us understand this with the help of an example. The code shown below finds square of the given number.

Alt Text

When we run a JS program, an Execution context is created. There are two phases involved in this process. First phase is called the Memory Creation phase and the second phase is called the Code Execution phase.

Alt Text

In the Memory Creation phase, JS parses the program and looks for variables and function definitions. In case of variables a special keyword called undefined is assigned and in case of functions, JS stores copy of the whole function definition. (check out the diagram).

Note: undefined is not a value, its a special keyword used in JS to indicate that a variable is not defined or assigned any value.

The second phase is the Code Execution phase. In this phase, JS starts from the beginning and goes in synchronous manner (one line at a time).

Note: This can be one of your first interview questions. ‘ Is JavaScript is a synchronous language or an asynchronous language’. I think you know the answer now.

Alt Text

At line 1, ‘n’ has a value set to 10 so JS removes the keyword undefined and sets the value to 10. Now the control goes to the next code block. Since this is a function definition, there is no code execution happening here so JS skips the function definition and moves control to line number 8. As soon as JS encounters a function invocation [ square(5) ], it creates a new Execution Context as shown below.

Alt Text

Now the whole process of Execution Context repeats for that function call. Lets see how the execution of the function block happens.

Alt Text

In the Memory Creation phase, we will have two variables, ‘number’ which is your function parameter and ‘ans’ which is the local variable. Both will have value set to ‘undefined’. In the second phase of this current Execution Context, JS starts from the first line of this function declaration. Since we are passing 5 as an argument in the function call, 5 is assigned as the value to the variable number. Now the control goes to the next line.

Alt Text

On the next line, JS executes [ number * number ] part of the line and the result of this operation (which is 25) is stored in the variable ‘ans’. Now the next line has a keyword ‘return’. As soon as JS encounters ‘return’ keyword, it moves control back to the parent Execution Context. Since we are returning the value of ‘ans’, the value 25 is returned and stored in the variable ‘squareOf5’. Now remember this.

When the control moves back to the place where the function call was made, the newly created Execution Context is deleted.

Check out the diagram below.

Alt Text

Now the control goes to the next line which is again a function call and whole process of Execution Context repeats again.

How JS keeps track of these Execution Contexts?

This happens through something called as a Call Stack or Execution Stack. It’s like a regular stack but mainly used for keeping track of Execution Contexts.

Alt Text

When the JS engine first encounters the script, it creates a Global Execution Context (GEC) and is pushed on the Call Stack. During the code execution part of GEC, whenever JS engine encounters a function call, it creates a new Execution Context and pushes it to the Call Stack.

The engine executes the function whose execution context is at the top of the stack. When this function is complete, its execution stack is popped off from the stack, and the process continues for the rest of the script.

Final Thoughts

I hope now you have got a good understanding of Execution Context now. If I have to explain the importance of Execution Context in simple language, I can say that Execution Context is the heart of JS.

Let me also mention that I have not gone into too much of depth but there are a lot of concepts which can be covered.

Thank you for reading this article. Let me know your thoughts in comments section.

References:

  1. How JavaScript Code is executed? & Call Stack by Akshay Saini https://www.youtube.com/watch?v=iLWTnMzWtj4

  2. An Article by Sukhjinder Arora
    https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

Top comments (23)

Collapse
 
erdo profile image
Eric Donovan • Edited

I think you have a talent for explaining things clearly, this is great 👍

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you Eric.

Collapse
 
yassineeddyb profile image
YassineEddyb • Edited

that was good explanation if any one want's to know more check out this course I found on udemy udemy.com/course/understand-javasc...
It's really good course explains how JavaScript works under the hood in details

Collapse
 
brovic profile image
Victor Ordu

I've never had such a lucid explanation on the innards of JS. There are those of us who can never get the most out of a tool unless we understand how it actually works. This will help me a lot. Thank you.

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you Victor. I am glad you liked it.

Collapse
 
kpnigalye profile image
Krishna Nigalye

I am glad you all liked this article. I have published my second article on 'How React really works?'. Please take a look at this and give me your thoughts in comment. I will really appreciate it.

Here is the link to the article.
dev.to/kpnigalye/react-behind-the-...

Collapse
 
pkdev profile image
Pushpak K

I read couple of articles, this one helped me understanding how js executes 👍

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you. I am glad it helped you.

Collapse
 
uriannrima profile image
Luciano Lima

Loved the article man, really good and easy to follow. Kudos. Deserves a #ELIA5.

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you Luciano. I am glad you were easily able to understand it.

Collapse
 
quyph123456 profile image
quyph123456

Thanks bro, This is useful knowledges with me.

Collapse
 
duongkstn profile image
Đào Nguyên Dương

the explanation is clear but you should compare with some other languages

Collapse
 
kpnigalye profile image
Krishna Nigalye

Goal was to write a series of articles about JavaScript because I feel JS is a unique and special language but I will keep this in mind. I would love to write a post where I can compare JS with other languages. Thanks for the suggestion.

Collapse
 
michelledev3 profile image
michelledev

Thanks Krishna, this is an incredible resource!

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you. I am glad you enjoyed it.

Collapse
 
aalphaindia profile image
Pawan Pawar

Good one!!

Collapse
 
sznroe profile image
Sujan Rai

Thanks Man

Collapse
 
cajuuh profile image
Pedro Alcântara

really didactic, thanks.

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you Pedro..

Collapse
 
ra1nbow1 profile image
Matvey Romanov

The first reference video is truly useful :)

Collapse
 
kpnigalye profile image
Krishna Nigalye

Yes it is. He has a series of videos. Awesome stuff.

Collapse
 
crisarji profile image
crisarji

Man you really broke it with that awesome explanation!, if you are half as good speaking you should release some material on YouTube or any other platform.

Collapse
 
kpnigalye profile image
Krishna Nigalye

Thank you. Sometime in near future I would like do that.