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)
This was great, only minor quibble, I think it could make the keywords such as
thisstand out if wrapped in codeblocks (``)So refreshing to see articles of high quality instead of all the listicles that other folks are spamming
Thankyou @georgewl.
Positive Criticism is much-needed as i am just a fresher and i wanna keep growing ✨️.
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
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.
That's really motivating for me, i will make to sure explain it through code snippets and diagrams 😊.
Thankyou @vale58ntina
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.
Really informative!!
but so little
I never really thought anyone would read this so i didn't put much efforts, I will go all out next time!!
@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
Great and well groomed explanation!
Thankyou So much
So informative, keep going ✊🏻
dev.to/tanishparashar/javascript-a...
The next part of this post is here!!
Do check it out
I would also recommend to read You-Dont-Know-JS series.
Sure!!
Hi there. as a mern stack developer, i launched my first web. Feel free to submit your feedback if it needs improving
codelabs.uz/
which component library did you use?
That's exciting
I think including event loop can add great depth to this concept
dev.to/tanishparashar/javascript-a...
check out this post
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