DEV Community

Cover image for How JS works behind the scenes?

How JS works behind the scenes?

tanishparashar on September 18, 2024

How JavaScript Works JavaScript operates in a single-threaded environment, meaning it executes one task at a time. It handles the execut...
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
 
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
 
cookiemonsterdev profile image
Mykhailo Toporkov 🇺🇦

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

Collapse
 
tanishparashar profile image
tanishparashar

Sure!!

Collapse
 
ehsanmashruf profile image
Mashruf Ehsan

Nice article!

Collapse
 
sunilkhadka001 profile image
Sunil khadka

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

Collapse
 
tanishparashar profile image
tanishparashar
Collapse
 
be_rajeevkumar profile image
Rajeev Kumar

You write so well, but still, it does not look complete. Together, we can write much more about this topic. So, Let's collaborate!

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

Too much short, ho javascript works behind the scenes is a field in itself, it requires a long content.. Anyways good try. Keep it up boy

Collapse
 
goodness_isaac_ebbf26742c profile image
Goodness Isaac

I don't seem to understand so much of this since i am new to JS, but with this i think i want to know more

Collapse
 
invincibl3 profile image
Victorious Adelakun

Thank you

Collapse
 
goodgis profile image
good-gis

Easy to understand, well done ✨

Some comments have been hidden by the post's author - find out more