JavaScript Under The Hood [5] - JavaScript Engine Overview

In this final video of the series, we will talk about JS engines and look at how JavaScript code is turned into machine code that runs on the CPU.
💻 My Courses & More
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
0:42 - What is a JS Engine?
1:31 - Specific Browser Engines
3:30 - Compiled vs Interpreted Languages
6:11 - JS Engine Process Overview
7:25 - Abstract Syntax Tree (AST)
10:01 - Interpreter & Bytecode
10:58 - JIT Compilation

[@zalodias123]

Extremely helpful to know what's behind the scenes. Thanks for the series Brad. Definitely looking forward to more videos like this in the future!

[@berkaygurcan141]

It was a really great series. It greatly increased my knowledge. Thank you.

[@ebcoutinho]

My man thank you so much for this amount of knowledge you shared with us for free. Really, you have no idea how important it was for me. I squeezed the whole series until I get every knowledge drop. I took notes and screenshots of everything. Again, thanks a lot, you have my gratitude. Hugs from a new fan from Brazil!!

[@abdullahsoomro6238]

An amazing series to understand javascript deeply. Thanks Bradley ❤

[@tjdrzewiecki]

That was such an informative series. Thank you for making this.

[@fahad.hossain]

I am a 3y exp dev and this series is very helpful for general knowledge and interviews. Thanks Brad.

[@Bestill_]

Proud to be a patreon sponsor!!!. Always appreciate you lessons.

[@RobbDawson]

This was a very informative series Brad. :) Well done.

[@itodoshadrach2363]

This voice keeps me going....thank you brad

[@mobile_genshin]

Thank you so much for this series. It's really well-explained, it's always important for me to understand how things work to really know what I'm doing! And the diagrams are very helpful too!

[@PeriapandiJeyaram]

Excellent series. Very helpful, thank you for making these videos.

[@tonyashworth1500]

Well presented. I like the way you make some difficult concepts easier to understand with clear examples. I will certainly watch more of your videos. Thanks for taking the time to make these.

[@Chaoticlife25]

Amazing explanation for compiling and interpreting. Thanks Brad.

[@wusaby-ush]

This series really was great, I can’t explain how I loved this, you explained a many years misunderstood informations about interpreters

[@chuanqisun]

Just want to point out a small inaccuracy. The new edge (judging by the logo you used) is chromium based, so it's V8. Chakra is only used in the older edge browser.

[@hellelo.5840]

@@js_programmer8423 actually its good that he pointed that out its helpful for the creator and for the community, and Brad won't lose any credit for the great work he is doing. toxic communities start by not correcting the members of community and defaming them instead.

[@haroldcruz8550]

@@js_programmer8423 This is a technical video about a low level aspect of a widely used language, accuracy matters. You want to win friends? post or share a Tik Tok video, this is not the comment section that is right for you.

[@user-dl1bd9ir2k]

Thanks for taking the time to share your knowledge, the visuals are great!!

[@justcoder2868]

Thanks Brad after writing JS for 12 months this really helped answer so many question that has developed over that time makes things just make sense. I purchased 'modern JS' so I will have to revisit it. Thanks again

[@ebcoutinho]

Thanks alot for the whole series. It helped me so much, the given content was exactly what I needed

[@snehaprajapati9197]

Thanks a lot for this whole series, it was really very to the point and helpful. And yes you make good diagrams.

[@khaitrinhviet]

Fantastic! Thank you for the series! Extremely helpful!

[@rojahm]

thanks brad this series was very informative me for an I appreciate your efforts very much.

[@siZeDcuBe]

LOVED this series! Thank you!

[@jonathanm.5813]

Very nice series, it would be great to have one on algorithms/patterns with JS (what would be recommended for a dev web, and other extra but are not mandatory) and really small exercices to compare with you. It would be awesome and fun!

[@EBay_Dev]

It was a very challenging task to compile and present such a depth of knowledge, I really appreciate your work. However, you did it and it helped me understand the enigmatic concept behind the sense. Thanks a lot

[@elyoaprogrammer]

Excellent series..Thank you Brad!

[@user-mm1uk3pr5k]

i love these series. hope to see more in the future 🙌

[@yatheeshgowda6191]

Brad I can't thank you enough how awesome this series was. It definitely gave me a new perspective on how JS works behind the scenes. Thank You Bradley (Lol 😂)

[@amitkumargupta-]

Damn, this whole series is very well done! Thanks a lot!

[@masterprogrammer1855]

Thank you so much for the "JavaScript Under the hood" series it was a very information. Hoping for these kind of videos in future as well.

[@mohamedchibani9823]

helpful informations on this amazing serie, thank you

[@bones1225]

Always fun. Concise, well explained and interesting. Many thanks.

[@iambabyr0o]

I just looove the series! Especially useful for a person with no background in computer science!

[@jeloi9364]

really cool analogy between compiled and interpreted 👌

[@sokratisv239]

Thank you very much for these series!

[@abdulmuazzam6085]

Great work Brother. Keep it Up! ❤

[@shaharavital5898]

Thank you! For the content you give us. Love and appreciate very much! 🙏

[@jarvo7723]

Great series. Thank you

[@muhamedshahabas9613]

Thanks a lot for the series

[@momus300]

In my opinion, this is the best series.

[@mehdisilber9811]

That was such an informative series. can you add please lexical envirnement and closures ?

[@sasivarnan36]

Thanks for making this series. 🙏🏾 It is super useful. 👍🏾 Looking forward for more videos in this series.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@Mvrck44]

Love the analogy of Compiling - Learning a foreign language vs Interpreting - Having an interpreter with you abroad.

[@boulderdennis]

Thanks for all that you do Brad. :-)

[@elvispalace]

this course should have at least 100 videos 🥺

[@ITStars]

thanks alot great series

[@nurikbk99]

Thank you, Brad!

[@simpleWebDev]

awesome series

[@moqusi24]

THank you, Brad.

[@nadawhoever]

This channel helped me get my first job and I'm here again to land my second job

[@biggsly]

Fantastic series! I can feel the wrinkles forming on my brain.

[@illyapelypenko3190]

Great work! You could also cover Call stack in depth. (Like how Paint works with Microtasks and Macrotasks, what requestAnimationFrame does and so on)

[@masoudmohajeri8678]

tnx brad . it was aswsome

[@choppinbrixx4931]

Still hope you'll add closures to under the hood. Its a topic that confuses a lot of people and you can see the closure in the object properties. I think youd be able to do a good job explaining it. Cheers on the series, i thought you did a great job!

[@YaserAz]

Great content 👌

[@ondrejmarek9752]

Thanks Brad!

[@hassaneoutouaya]

Thank you so much!

[@MichaelGalen]

So helpful!

[@noorislam7449]

Really outstanding 💞💞💞

[@web_dev210]

Our most beloved teacher ...... love frm Pakistan

[@DrJanitor1993]

Thank you so much

[@aogunnaike]

thanks brad

[@aidingivtaj2088]

Finally, someone cares about the main thing :), Traversy great job man, OG :)

[@marouaniAymen]

Thanks for the series, is there any video about Closures in JavaScript and how they are used ? Thanks again.

[@lifeisbeautifu1]

Thank you :)

[@BusinessWolf1]

Thank you

[@abinashdutta2109]

This was awesome Brad. Could you please make a series on React under the hood?

[@priyankaroberts1093]

Hey Abhinash! have you done projects on react recently ?

[@programer9620]

Thanks that was really great. I have one suggestion maybe you like it, I think if you make a few videos about classes & constructor concept under the hood how they work, it will be really helpful for us. Again thanks for making such an amazing videos.

[@AdityaGupta-cu4gh]

More thing more, I also want you to make a video in which you teach us how to understand industry level code, on GitHub many projects are such a mess that is impossible to understand for a new programmer even when the functionality of that project is understandable but the way they write code is very complicated.

[@abdullahsoomro6238]

SUGESSTION: next part of series should be a whole picture of all the parts of series with an example program.

[@trappedcat3615]

Chakra runs in old Edge. New Edge uses V8. Edge is now a Microsoft Chromium brand, so it has the same JS and rendering engine as Chrome.

[@Norfeldt]

That was also my understanding. Was surprised about Chakra and thought I missed something. Thank you for pointing it out.

[@ariw96]

waiting for more and deeper great seires

[@MaNiarus]

Hi Brad great vids! As an idea "rendering: repaint, reflow/relayout, restyle" i know it's not related to JS but still will be interesting to watch

[@pedrob.5021]

thanks!

[@RA-po5rl]

Hey! Just wanted to thank you because your crash courses has gotten me into programming. Something that I've tried previously and failed to do. So, thank you so much! Just one question though, do you think you can do a crash course on Java?

[@arshali4635]

love from India

[@vinaypatil8009]

This series is awesome , we want to understand javascript In the end of the series Can you make 1 awesome project totally with vanilla javascript which is also good in looks.

[@rrd_webmania]

Yes, I am old enough to remember Netscape Navigator 😱

[@wick12298]

Please make more videos on Native Javascript concepts that alot of people think are specific to frameworks like React, Next etc

[@harryminarti]

Love from India

[@princenweke447]

So much value here, if you will read this I would like you talk in-depth about software design patterns using JavaScript and TypeScript as use-case.

[@gauravb28]

Brad taught some of the popular design patterns in his JavaScript course on Udemy

[@priyankaroberts1093]

@@gauravb28 Hey Gaurav have you worked on any projects with react ?

[@gauravb28]

@@priyankaroberts1093 yeah i have some good experience working with MERN stack

[@nagendradevara1]

How Javscript communicates with web assembly , a simple tutorial on it at the end of the series would be helpful. 👩‍💻

[@abhinavrobinson2310]

Suggestion, I would love to see a similar video series for javascript bundlers and how typescript complies to javascript and so on... might be out of scope of this series though.

[@craigc5879]

With the different engines do you have to develop JS differently for each browser to have full compatibility

[@yannislee5469]

Thanks for your video. I can learn English and javascript at the same time 🤣

[@andyye3393]

bro, where are you from

[@shekhar5051]

You can Add CLOSURES as an addon to this series !

[@omranalkhleefalhamad6756]

hi first thank you for helping others , i just wonder what do you use to record your screen ?

[@modestas2890]

Was wondering at which point JIT happens in terms of the execution of your code? Is it during the creation phase of the execution context? I'm abit confused how those 2 fit together

[@rh272]

Can you make complete seperate video just focusing on responsiveness with just css and html like every aspect of responsive design from small screens to very large screens , design and thinking strategy from scratch covering every thing from fonts to margin and padding, image sizes for efficient load time basically everything by building a project(website), atleast important stuff. Thanks 👍

[@zalonics5177]

Maybe going over Javascript __proto__ property and the prototype chain in depth would be useful. and proxies

[@mecreature]

😍😍😍😍

[@mulualemtekle6094]

I wonder how GLSL and ralated shader stuff run on the GPU, for example in threejs and Babylonjs, does it go through the JS engine or is that a separate process, let me know, I'll do my own digging too, thanks for sparking my curiosity!!

[@AdityaGupta-cu4gh]

Their are many built-in libraries and functions, Can you teach us how to exactly check the functionality or the step or the algorithm used by that function to perform operation.

[@priyankaroberts1093]

Hey Aditya ! are you open to opportunities in web development ?

[@choppinbrixx4931]

According to the new JS runtime Bun, JavaScriptCore may have overtaken V8 as the fastest engine.

[@Isfean]

Do something like this on async await please!

[@zkhan1995]

how do you research all these topics?

[@sjn_]

Hey Brad, I noticed you haven't made a crash course or whatever on GraphQL. Would be great if you do.

[@siddiqahmed3274]

kzbin.info/www/bejne/eJSvf5mte5Vngdk

[@kruzzsteve7525]

I think it's all start with namaste javascript series

[@ananthaprabhakarjoshi308]

Hi Brad, Can you Please make a vedio on How React works under the hood

[@priyankaroberts1093]

Hey Anantha ! i wanted to know if you are open to opportunities in software development ?

[@RussellAbraham]

I think the new Edge Browser was rebuilt with V8 and more Microsoft features. It's much better than their Chakra browser was.

[@tigranpetrosyan144]

Microsoft Edge now also uses V8, it's built on Chromium.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..