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

[@berkaygurcan141]

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

[@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.

[@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!

[@itodoshadrach2363]

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

[@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!!

[@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!

[@abdullahsoomro6238]

An amazing series to understand javascript deeply. Thanks Bradley ❤

[@tjdrzewiecki]

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

[@RobbDawson]

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

[@Bestill_]

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

[@elvispalace]

this course should have at least 100 videos 🥺

[@fahad.hossain]

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

[@user-dl1bd9ir2k]

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

[@PeriapandiJeyaram]

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

[@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!

[@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.

[@siZeDcuBe]

LOVED this series! Thank you!

[@khaitrinhviet]

Fantastic! Thank you for the series! Extremely helpful!

[@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

[@user-mm1uk3pr5k]

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

[@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

[@elyoaprogrammer]

Excellent series..Thank you Brad!

[@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.

[@bones1225]

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

[@amitkumargupta-]

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

[@sokratisv239]

Thank you very much for these series!

[@rojahm]

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

[@jeloi9364]

really cool analogy between compiled and interpreted 👌

[@mohamedchibani9823]

helpful informations on this amazing serie, thank you

[@muhamedshahabas9613]

Thanks a lot for the series

[@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.

[@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

[@jarvo7723]

Great series. Thank you

[@shaharavital5898]

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

[@Mvrck44]

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

[@abdulmuazzam6085]

Great work Brother. Keep it Up! ❤

[@momus300]

In my opinion, this is the best series.

[@iambabyr0o]

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

[@nurikbk99]

Thank you, Brad!

[@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 😂)

[@ITStars]

thanks alot great series

[@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☝️⬆️ ⬆️..

[@boulderdennis]

Thanks for all that you do Brad. :-)

[@moqusi24]

THank you, Brad.

[@simpleWebDev]

awesome series

[@ondrejmarek9752]

Thanks Brad!

[@biggsly]

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

[@nadawhoever]

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

[@hassaneoutouaya]

Thank you so much!

[@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.

[@MichaelGalen]

So helpful!

[@YaserAz]

Great content 👌

[@noorislam7449]

Really outstanding 💞💞💞

[@aogunnaike]

thanks brad

[@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!

[@DrJanitor1993]

Thank you so much

[@mehdisilber9811]

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

[@lifeisbeautifu1]

Thank you :)

[@aidingivtaj2088]

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

[@BusinessWolf1]

Thank you

[@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)

[@web_dev210]

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

[@pedrob.5021]

thanks!

[@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.

[@marouaniAymen]

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

[@abdullahsoomro6238]

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

[@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?

[@ariw96]

waiting for more and deeper great seires

[@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.

[@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 ?

[@rrd_webmania]

Yes, I am old enough to remember Netscape Navigator 😱

[@arshali4635]

love from India

[@wick12298]

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

[@omranalkhleefalhamad6756]

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

[@harryminarti]

Love from India

[@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

[@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.

[@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

[@craigc5879]

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

[@shekhar5051]

You can Add CLOSURES as an addon to this series !

[@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.

[@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!!

[@mecreature]

😍😍😍😍

[@zalonics5177]

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

[@yannislee5469]

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

[@andyye3393]

bro, where are you from

[@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 👍

[@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 ?

[@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

[@Isfean]

Do something like this on async await please!

[@kruzzsteve7525]

I think it's all start with namaste javascript series

[@RussellAbraham]

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

[@choppinbrixx4931]

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

[@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 ?

[@thegoat2936]

Hello Traversy - Hello guys - I hope u re fine. How can I create a tracking system with follow code in PHP7 (no framework) PHP, plz

[@ztcanada_1]

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