DEV Community

Cover image for How JS works behind the scenes?
tanishparashar
tanishparashar

Posted on

How JS works behind the scenes?

How JavaScript Works

JavaScript operates in a single-threaded environment, meaning it executes one task at a time. It handles the execution of code in Execution Contexts (EC), which can be either Global or Functional.

Global Execution Context (GEC)

  • Created when the code file is loaded.

  • The GEC is responsible for setting up the global object (in browsers, it's window) and the (this) keyword.

  • All variables and functions declared in the global scope are stored in the Global EC.

Execution Context Phases

  • Memory Creation Phase:
    During the memory phase, JavaScript allocates memory for variables and functions.
    Variables are assigned the value undefined initially, while functions are stored in memory with their full definition.

  • Execution Phase:
    After the memory allocation phase, JavaScript starts executing the code line by line.
    Variables are assigned actual values and functions are executed.

Functional Execution Context (FEC)

  • Whenever a function is invoked, JavaScript creates a new Execution Context specifically for that function.

  • Execution context for each function has two phases:

  • Memory Phase: Memory is allocated to the local variables, and functions inside the function.

  • Execution Phase: The function body is executed, and variables get their actual values.

  • After execution, the function's execution context is destroyed, freeing up memory.

Return Statements
Once a function reaches a return statement, the function immediately exits, and its execution context is removed from the Call Stack. Any code written after a return statement won't execute.

The Call Stack
JavaScript uses the Call Stack to manage execution contexts.

  • LIFO (Last In, First Out) concept is used:

  • When a function is called, its execution context is placed on top of the stack.

  • Once the function completes (or reaches return), its execution context is popped off the stack.

JavaScript is Single-Threaded

Single-threaded means JavaScript can only perform one operation at a time but still it can perform asynchronous operations isn't that interesting in my next post we will discuss about this amazing functionality of JavaScript.

Top comments (29)

Collapse
 
georgewl profile image
George WL • Edited

This was great, only minor quibble, I think it could make the keywords such as this stand out if wrapped in codeblocks (``)

So refreshing to see articles of high quality instead of all the listicles that other folks are spamming

Collapse
 
tanishparashar profile image
tanishparashar

Thankyou @georgewl.
Positive Criticism is much-needed as i am just a fresher and i wanna keep growing ✨️.

Collapse
 
vale58ntina profile image
Valentina

Great description of how JavaScript works. I'm curious how JavaScript manages asynchronous activities while being single-threaded. Could you explain how the Event Loop and Web APIs work together with the Call Stack in your upcoming post? thanks

Collapse
 
hamza_pasking_akhtar profile image
Hamza Pasking Akhtar • Edited

Yeah that would be a great thing to learn.
One topic is "Context Switching"
The other as you mentioned is Web API's which kinda gives you the illusion that JS is multi threaded despite being single threaded.

Collapse
 
tanishparashar profile image
tanishparashar • Edited

That's really motivating for me, i will make to sure explain it through code snippets and diagrams 😊.
Thankyou @vale58ntina

Collapse
 
hitesh_kushwaha_b567865e0 profile image
Hitesh Kushwaha • Edited

There is a callback queue and a microtask queue following FCFS basis.
We can get asynchronous behaviour by either using async await or by using setTimeout/Interval.
Now when we use setTimeout/Intervals the corresponding code is pushed into callback queue
and when we use Async its pushed into microTask queue.

The event loop continuously checks if call stack is empty
If its empty then the first item from microTask queue is poped and placed in call stack for execution.
If microTask queue is empty then it checks for callback queue.

Hence async code block will always take priority in execution when compared to setTimeout/Interval.

Collapse
 
ritesh_pawar09 profile image
Ritesh Pawar

Really informative!!

Collapse
 
weitend profile image
Vladislav Voronin

but so little

Collapse
 
tanishparashar profile image
tanishparashar

I never really thought anyone would read this so i didn't put much efforts, I will go all out next time!!

Collapse
 
jennavisions profile image
Jenna • Edited

@tanishparashar ,

If you plan to write more about the topic you may want to create a series :-)

Happy writing ✍️

Best practices for writing on DEV:

dev.to/sloan/series/22620

Collapse
 
nishanthan-k profile image
Nishanthan K

Great and well groomed explanation!

Collapse
 
tanishparashar profile image
tanishparashar

Thankyou So much

Collapse
 
suhani_acharya profile image
Suhani Acharya

So informative, keep going ✊🏻

Collapse
 
tanishparashar profile image
tanishparashar

dev.to/tanishparashar/javascript-a...

The next part of this post is here!!
Do check it out

Collapse
 
cookiemonsterdev profile image
Mykhailo Toporkov 🇺🇦

I would also recommend to read You-Dont-Know-JS series.

Collapse
 
tanishparashar profile image
tanishparashar

Sure!!

Collapse
 
henry_johnson profile image
Codelab

Hi there. as a mern stack developer, i launched my first web. Feel free to submit your feedback if it needs improving
codelabs.uz/

Collapse
 
tanishparashar profile image
tanishparashar

which component library did you use?

Collapse
 
kamlesh_gupta_539c974fb0d profile image
Kamlesh Gupta

That's exciting

Collapse
 
sunilkhadka001 profile image
Sunil khadka

I think including event loop can add great depth to this concept

Collapse
 
tanishparashar profile image
tanishparashar

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more