DEV Community

Cover image for 🚀⚙️ JavaScript Visualized: the JavaScript Engine

🚀⚙️ JavaScript Visualized: the JavaScript Engine

Lydia Hallie on December 13, 2019

JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to de...
Collapse
 
htetlynnhtun profile image
Htet Lynn Htun

Although you didn't cover the whole story of it, this is a decent explanation of how JavaScript engine works. All those gifs are amazing. They help my brain to solidify the theories. Thank you so much. I'm looking forward to your upcoming posts.

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks!

Collapse
 
luismartinezs profile image
Luis Martinez Suarez

Agreed with the GIFs thing. They help heaps to understand what is going on. GIFs for the win!

Collapse
 
jonnyplatt profile image
Jonny Platt

Lovely animations! Thanks for a really clear article

Collapse
 
murroughfoley profile image
Murrough Foley

The Gifs really pull the article together. Great stuff.

Collapse
 
nqcm profile image
TheNiqabiCoderMum

Thanks for the informative post. Your animations are superb! I am interested to know which software did you use to create your animations?

Collapse
 
sbinlondon profile image
Kate Beard (she/her)

This is amazing!! I wish I'd had this at my coding bootcamp last year. I don't think it would have all sunk in at first but seeing it laid out visually would have helped things click at certain points as we learned more. I'm sharing it with them right now so future cohorts will be able to use this resource 🙌🙌🙌

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks!! 😃 Hope it’ll help them!

Collapse
 
ziizium profile image
Habdul Hazeez

This might not be important but,i just want you to know that this post was featured in the December 17th, 2019 edition of esnextnews curated by Dr Axel Rauschmayer and Johannes Weber.

Congrats!

Collapse
 
jdmedlock profile image
Jim Medlock

This is brilliant and a great place to start for anyone exploring how JS works its magic. I know this had to have taken a lot of time and effort to create. Thank you for your efforts!!!!

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks so much 😃

Collapse
 
gadnandev profile image
Gadnan

Thank you Lydia for this amazing explanation!
I am a language without a compiler but I have an engine (called sometimes a compiler). This engine is a place where 4 of my sons are playing. The first one called "Byte Stream Decoder" which creates tokens. These tokens are sent to the second one called "Parser" which creates nodes. These nodes are parts of the third one called "Abstract Syntax Tree". The last one called "Interpreter" ends the game by climbing the tree and getting the disk containing Byte Code. I forgot, I have also a daughter called "Inline Caching" which takes care of this disk and try to optimise it. I am JAVASCRIPT!

Collapse
 
imthenachoman profile image
IMTheNachoMan

I'm gonna call you a TV series cause you've left me hangin' on a cliff. Great, great write-up and, I think I speak for everyone when I say we want more. Neh, we need more. For example, regarding "Say a certain function is invoked a 100 times...", I'm curious what the magic number is and how it was determined. Is it always 100 or does the compiler determine at run-time? And, armed with that information, how can we write more efficient JavaScript code?

Collapse
 
lsaufnay profile image
Ludovic Saufnay

Thanks you for all explanation. I've been looking for this information for a long time ^^.
But with what tool do you make these wonderful gifs ? :)

Collapse
 
lydiahallie profile image
Lydia Hallie

I use Keynote!

Collapse
 
eugeniolentini profile image
Eugenio Lentini

Apple Keynote? really? I did not know it was good to do that :-)

Thread Thread
 
lydiahallie profile image
Lydia Hallie

Haha yeah you can export it to animated gifs :)

Collapse
 
heliomarpm profile image
Heliomar P. Marques

It would be fantastic to know your animation creation process.
Congratulations

Collapse
 
lsaufnay profile image
Ludovic Saufnay

Thank you very much ! :D

Collapse
 
meatboy profile image
Meat Boy • Edited

Stunning visualizations!

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks!

Collapse
 
hellaren profile image
Anton

Hello Lydia, do you mind to share what tools you've used to create such visualizations?
I was thinking about such animations for some meetups I conduct from time to time.

I would really appreciate it, thank you!

Collapse
 
supunkavinda profile image
Supun Kavinda

Nice post. Very comprehensive. I shared it on our JS group

Collapse
 
captainlee profile image
Dong-Hwi Lee

Thanks for the great and easy-to-understand article on JavaScript Engine internals. The animations are amazing!

I've translated your article in Korean:
betterweb.or.kr/blog/%eb%88%88%ec%...

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks!

Collapse
 
gmoraitis profile image
George Moraitis

Lydia hi!

This is a very good project.I always wanted see a some kind of visual presentation for programming languages.I am new to programming and i have many questions in general but this helped me a lot.I hope to continue doing this for javascript or for another language.
Thanks.

Collapse
 
daniel13rady profile image
Daniel Brady

Thanks for the overview!

Question for you and the group: at what point in this process are scopes and lookup tables created for the various variable bindings and the values the hold? 🤔

Since variable bindings and their declared values need to make it into the byte code, I would think this happens prior to running the interpreter. And it seems like that process would require access to either the raw tokens created by the byte stream decoder, or the AST generated by the parser, because the code needs to be 'crawled' in a meaningful way so as to identify the bindings that have been declared.

Can anyone clarify for me?

Collapse
 
mattishii26 profile image
Matthew Ishii

Very good job on this article! You broke it down to really easy to understand bits!

This brought up a question, and assuming I am understanding this correctly. There are parser nodes that signify a group of tokens that represent a single parser. For example, a single parser contains tokens about a single function.

With that said, what is faster? Having your JS code that is all in a single parser with more tokens or more parser's with less tokens?

I'd assume it depends on the case of how many parser's there are, because you could theoretically search for parser's in O(nlogn), with O(n) tokens, but at some point, if there are so many parser's, a single parser with more tokens would make sense.

Collapse
 
jose31canizar profile image
José Daniel Cañizares

In reference to your inline caching example, if you had a function that was called every other time with different data types (“sum” could be called with numbers, then strings, then numbers again repeatedly), wouldn’t the performance of having to update the type feedback be nullified? If so, how is this handled in the V8 engine? Thanks!

Collapse
 
heikokanzler profile image
Heiko Kanzler 🇪🇺

Thank you Lydia, that was for me, as an Java developer, the exact amount of information and lovely illustration needed to get an overview how the Javascript engine works.

Collapse
 
salhernandez profile image
Salvador Hernandez

The visualizations make it so easy to understand! What tool did you use for that?

Collapse
 
baeharam profile image
baeharam

Thanks for the great article! I translated into korean and here is the link

Collapse
 
bboydflo profile image
Florin Cosmin

One question I had in mind while reading this post was why not ship the pre-parser and parser to the world so devs can generate a more optimized version directly in their build system, and send that to the browser? Then I remembered about wasm which I guess it kinds of does exactly that, but more general and doesn't support javascript.

Collapse
 
yoshcode profile image
Aljosha Novakovic

Great post!! Very detailed, and I like your writing style. I appreciate the examples, like when you brought up a function being run 100 times and then getting passed through the optimizing compiler, I wish more writers would use that with programming explainers. Looking forward to reading more of your posts.

Collapse
 
jmbescos profile image
Chema Bescos

Great article on JavaScript Engine internals!
I've translated it into Spanish and published it at ibidemgroup.com/edu
Authorship and original publication here are clearly stated. Hope you are fine with it!

Collapse
 
dilungathegreat profile image
Dilunga the Great • Edited

Thank you so much for the informative post. We need more creative people like you!
I'm interested to know which software did you use to create the animations we see on the gifs!

Look forward for more beautiful posts!

Collapse
 
datelligence profile image
datelligence

Thanks, it's a good intro to the V8 which sometimes we see as a distant complex obscure thing.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
markandersonnc profile image
MarkAndersonNC

You are a hero!

Collapse
 
imthedeveloper profile image
ImTheDeveloper

Hero!

Collapse
 
pretaporter profile image
Maksim

What tool are you using for animations?

Collapse
 
jrop profile image
Jonathan Apodaca

In another comment thread, she states that she is using Apple Keynote

Collapse
 
friedrichwilken profile image
Friedrich

This is so beautiful.

Collapse
 
alissonzampietro profile image
Alisson Zampietro

Amazing!

Collapse
 
tonycaputo profile image
Antonio Caputo

Amazing job, Lydia 😉

Collapse
 
markmckenna profile image
Mark McKenna

Awesome! Love it.

Collapse
 
shiftyp profile image
Ryan Kahn (he/him) • Edited

This is really engaging and well thought out. Great job! 💯

Collapse
 
mblancodev profile image
Manuel Blanco

Great to see you on the platform!! You are one of the few people that I really like to enjoy reading. I'm already checking all of your other posts here :) I'm anxious to read your upcoming posts

Collapse
 
lydiahallie profile image
Lydia Hallie

Thanks so much! 😃

Collapse
 
haakonhr profile image
Haakon Helmen Rusås

Really nice article! Like the visuals!

Collapse
 
sorarco profile image
Rodrigo

awesome

Collapse
 
jeshan profile image
Jeshan Giovanni BABOOA

neat trick to record the animations!

Collapse
 
dominicduffin1 profile image
Dominic Duffin

Your visualisations are amazing!

Collapse
 
camerenisonfire profile image
Cameren Dolecheck

The graphical explanation I didn't know I needed. Great work.

Collapse
 
mpetrinidev profile image
Mauro Petrini 👨‍💻

Amazing, thanks!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

This is so detailed and beautifully written with those illustrations!

Collapse
 
dominicamaljoef profile image
Dominic Amal Joe F

It's very interesting!

Collapse
 
360macky profile image
Marcelo Arias

What a clear explanation of JavaScript engine and how it works 😮

Good post!

Collapse
 
mari_banana profile image
Mari Kalyuzhna

Hello! This is just a great post, like all the other ones in the series. Thank you for the beautiful and accessible presentation of complex material. I decided to try to translate all the articles from the series into Russian. Here is the translation of this post: dev.to/mari_banana/vizualiziruia-j...

Collapse
 
tiengdung90 profile image
tiengdung90

Amazing!

Collapse
 
paulryan7 profile image
Paul Ryan

Wow! This is really cool. I did a talk on this subject before, but your gifs do such a great job (wish I had seen them when I was learning) !

Collapse
 
mrindiadev profile image
Mr. India

Gr8 visualization, can you help to create one on those?

I am working on a visualization project for DS and algorithm.

geeksforgeeks.web.app/

Collapse
 
jdmedlock profile image
Jim Medlock

Thanks for asking, but I'm afraid I'm tied up on other projects at the moment. However, you might want to reach out to the author of this article to find out how she created it and what tools she used to make the diagram.

Collapse
 
mrindiadev profile image
Mr. India

I believe it was for the author only

Thread Thread
 
jdmedlock profile image
Jim Medlock

Doh! Sorry about that.

Collapse
 
negue profile image
negue

How come I missed all other visualized articles... amazing work!

Collapse
 
wmfairuz profile image
Fairuz Wan Ismail

Very nice illustration!

Collapse
 
localhost4484 profile image
Ohm

I had a compiler structures class at University before. It seems some point you described bring me back to that memory.

Collapse
 
devdevcharlie profile image
Charlie Gerard

Awesome post! 😃👏 Thanks for sharing!

Collapse
 
lavanya30989600 profile image
Lavanya

Hi,

Thank You So much for the Valuable Information. If You Are Interested to learn JavaScript Training? You Can Schedule and Attend a Free Demo here mindmajix.com/javascript-training

Thanks and Regards,
Lavanya Sreepada.

Collapse
 
lcpautotester profile image
lcpautotester

great job

Collapse
 
valentinogagliardi profile image
Valentino Gagliardi

Great stuff!

Collapse
 
proinsky profile image
Proinsky

This was soooo helpful. I'd love to see you cover the rest of it, cause the heap and call stack confuse me a bit. Great work!

Collapse
 
bhatnagardivyanshu profile image
Divyanshu Bhatnagar

Hey Lydia, I am so glad to have found your blog posts. They are really informative and crisp. Thanks for sharing the information so beautifully.

In this current post, I have a small doubt, if you or anyone could help, After the Byte Stream Decoded creates the token, how is the decision made if it will be passed on to processor or pre-processor. Since by that time, we don't really have had the code parsed how do we decide if the function is an event (click) handler?

Collapse
 
mail2bishnoi profile image
Ashutosh Bishnoi

Great Explanation.In the career of 8 years I have learned this first time.

Collapse
 
isaacsonw profile image
Obidi Isaac

This is awesome... Very informative. Thanks Lydia.

Collapse
 
gautamkrishnar profile image
Gautam Krishna R

Great concise explanation of how javascript works under the hood. Thanks for sharing...

Collapse
 
sabderemane profile image
Sarah Abd

Nice post, congrats. Love the animations 😍
I'll maybe translate into french, I'll tell you if I do so !

Collapse
 
aimachieve profile image
aimachieve

Nice

Collapse
 
yacineyac profile image
malki yacine

it is useful

Collapse
 
metamars0114 profile image
Mars Bryant

That's a good story.

Collapse
 
walebee01 profile image
Osho Wale

Thanks

Collapse
 
zhengyun01 profile image
Zheng Yun

THANKS FOR YOUR DEEP VIEW OF JS.

Collapse
 
srrw profile image
Sorrow

It blows my mind after reading. It must be a long time since I had the same feeling. Thanks for great writing and illustration :3

Collapse
 
ubervincent profile image
Vincent Lam

Bookmarked this stuff.

Following you as well insanely well made posts.

Collapse
 
hellocarlos profile image
Carlos Pereira

Awesome! Thank you!

Collapse
 
xgqfrms profile image
xgqfrms

what's the tools help you finished these gifs pictures?

Collapse
 
leobuezo profile image
leobuessi

Thanks a lot for sharing this post. Also, kudos for the effort of doing it! it's pretty useful.

Collapse
 
miladkazemi_com profile image
MILAD KAZEMI

Thank You So Much...
I translated it into Persian.
Of course with a link to you!🙏

Collapse
 
abno24 profile image
Abhinav Maurya

ooooooo Wooooowww. This is something amazing. Thanks for this much information.

Collapse
 
inaat profile image
inaat

how to access your slide I want to download

Collapse
 
gsvidal profile image
Gonzalo

Great article Lydia!, even better than some textbooks, that made me wonder... what were your bibliographic resources? 🤔

Collapse
 
ajitpsakri profile image
Ajit Sakri

how did you create these GIF, using HTML CSS js?

Collapse
 
arthur40056743 profile image
Arthur

great!

Collapse
 
arvindsridharan profile image
arvindsridharan

Before getting into JavaScript programming this is what needs to be taught.

Collapse
 
arvindsridharan profile image
arvindsridharan

Awesome!

Collapse
 
jlaguilargomez profile image
Jose Luis Aguilar

Thanks a lot, Lydia, your effort to explain complex concepts in an easy way is extraordinary

Collapse
 
nikolaytodor profile image
Nikolay Todorov

Lydia, this is maybe the best visualization of JS I've seen, both efficient and beautiful. Thank you so much!

Collapse
 
naingaungphyo profile image
Naing Aung Phyo

Thanks for awesome animations!

Collapse
 
theadeshkhanna profile image
Adesh Khanna

Very nicely explained, the gifs helped a lot

Collapse
 
jittusaroj profile image
jitendra kumar saroj

Great job you done much valuable info thankyou@

Collapse
 
vivekkodira profile image
Vivek Kodira

Thank you.

Collapse
 
lakincoder profile image
Lakin Mohapatra

Nice post. I got to learn many things. Looking forward to your future posts.

Collapse
 
alfdocimo profile image
Alfredo Narváez Docimo

This is awesome!!! Thanks for sharing! 🚀🙌🔥

Collapse
 
blarzhernandez profile image
Roberto Hernandez

Thanks for this amazing explanation. BTW which tool/app do you use to make those awesome GIF animations? Thanks in advance.

Collapse
 
dhruvgarg79 profile image
Dhruv garg

Thank you for writing this amazing post.

Collapse
 
lepinekong profile image
lepinekong

Nice ;)

Collapse
 
ovchinnikovdev profile image
Konstantin

Awesome!

Collapse
 
a11enyang profile image
Allen Yang

love you!

Collapse
 
the6thm0nth profile image
Hoony

Clear words and great images & animations. Thanks!

Collapse
 
tishpr profile image
Leticia Snyder

love this!!! learning JS at the moment! do any meetups?

Collapse
 
pierretsia profile image
Pierre_T

Great article! Thanks.
Until now, I was pretty much convinced that it was mainly black magic 🤔

Collapse
 
srivatsahg profile image
Srivatsa Haridas

This is Beyond Brilliant. Many thanks for sharing this.

Collapse
 
mustafaanaskh99 profile image
Mustafa Anas

Wow amazing explanation!
Also, any tips about how to make such gifs?

Collapse
 
prafulla-codes profile image
Prafulla Raichurkar

Loved the animations, thanks for the overview :D!

Collapse
 
ta3aleb profile image
UCF for Youssssef

amazing.. I hope u do a series of these for other languages, from python to java to whatever else u can

Collapse
 
incrementis profile image
Akin C.

Awesome article!
I learned a lot from it :).

Collapse
 
artoodeeto profile image
aRtoo

youre the GOAT!

Collapse
 
metruzanca profile image
Samuele Zanca

I'm more curious about what you used to make the animations xD

Collapse
 
andp97 profile image
Andrea Pavone

Congrats🎉 very helpful!!

Collapse
 
dongyuhappy profile image
dongyu

pretty good

Collapse
 
ziizium profile image
Habdul Hazeez

Simply amazing!

Quick question: Can i like this post like a million times?

Collapse
 
lydiahallie profile image
Lydia Hallie

Haha i'm happy you liked it!

Collapse
 
alexkwonisawesome profile image
Hyeokwoo Alex Kwon

This is awesome!

Collapse
 
aantipov profile image
Alexey Antipov

Wow, the description of the optimization technics (conversion to machine code) is so nice. Thanks a lot for that brilliant article!

Collapse
 
vicky26886 profile image
vicky26886

Lovely article. When you understand the whole eco system at a granular level, it makes you visual your code how it would be running at the back. Keep more coming .. 👍

Collapse
 
shahrid92 profile image
Shah Ridzuan

Great article!

Collapse
 
jimmyis profile image
Jimmy Israkhan

Just love this post and want to translate it to Thai language (absolutely with reference back to your post).

Can you please just allow me.

Thank you.

Collapse
 
jimmyis profile image
Jimmy Israkhan

Oh I just saw the FAQ.

Collapse
 
ranjithkea profile image
Ranjith

Please make an article about browser architecture visualized.

Collapse
 
iamchitti profile image
Deepak Kumar

Nice animations and informative article. Felt like I was studying Compiler Design subject of CS during my college.

Collapse
 
zeybek profile image
Ahmet Zeybek

Thanks for this great visualization and explanation

Collapse
 
buithanhphuongamit profile image
buithanhphuongamit

This is a great article!
Thank you so much.

Collapse
 
siscador profile image
Siscador

Hi Lydia ¿What software did you use to create de animations? Thanks you!

Collapse
 
coderocker profile image
Hrishikesh

Nicely explained!
and gif's are like feather in a cap. which tool you use for such animated gif's

Collapse
 
rtugeek profile image
Neo Fu

Great work!, Do you use after effect to make these animation?

Collapse
 
mehdighazlavi profile image
Mehdi Ghazlavi

It was beautiful. Thank you for the animations and easy and clear explanation you gave

Collapse
 
jersonsw profile image
Jerson Pena

Very good article! Thanks @lydiahallie!

Collapse
 
baquiax profile image
Alexander Baquiax

Really cool.

Collapse
 
lilbeqiri profile image
Ilir Beqiri

Thanks for this really clear article

Collapse
 
imamhsn195 profile image
Imam Hasan

Nice article
Thanks

Collapse
 
syed1233f profile image
syed1233f

Loved it thanks a lot for sharing
oracle fusion financials training

Collapse
 
yjamal profile image
jyawar

Great article. Another term for the pre-parser would be the lexer

Collapse
 
lonefavourvitus profile image
lonefavourvitus

awesome post

Collapse
 
ldordellydev profile image
Luchitotrader!!!

excelente resumen buen aporte a la comunidad 😁