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

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
 
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
 
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
 
cookiemonsterdev profile image
Mykhailo Toporkov πŸ‡ΊπŸ‡¦

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

Collapse
 
tanishparashar profile image
tanishparashar

Sure!!