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.

[@tjdrzewiecki]

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

[@abdullahsoomro6238]

An amazing series to understand javascript deeply. Thanks Bradley ❤

[@RobbDawson]

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

[@Bestill_]

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

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

[@PeriapandiJeyaram]

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

[@itodoshadrach2363]

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

[@siZeDcuBe]

LOVED this series! Thank you!

[@user-mm1uk3pr5k]

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

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

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

[@khaitrinhviet]

Fantastic! Thank you for the series! Extremely helpful!

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

[@elyoaprogrammer]

Excellent series..Thank you Brad!

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

[@Chaoticlife25]

Amazing explanation for compiling and interpreting. Thanks Brad.

[@fahad.hossain]

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

[@amitkumargupta-]

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

[@mohamedchibani9823]

helpful informations on this amazing serie, thank you

[@snehaprajapati9197]

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

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

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

[@bones1225]

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

[@sokratisv239]

Thank you very much for these series!

[@shaharavital5898]

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

[@jarvo7723]

Great series. Thank you

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

[@muhamedshahabas9613]

Thanks a lot for the series

[@ebcoutinho]

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

[@abdulmuazzam6085]

Great work Brother. Keep it Up! ❤

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

[@jeloi9364]

really cool analogy between compiled and interpreted 👌

[@rojahm]

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

[@boulderdennis]

Thanks for all that you do Brad. :-)

[@engineeringeconomics]

awesome series

[@biggsly]

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

[@nurikbk99]

Thank you, Brad!

[@iambabyr0o]

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

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

[@ITStars]

thanks alot
great series

[@momus300]

In my opinion, this is the best series.

[@masoudmohajeri8678]

tnx brad . it was aswsome

[@jordigonzalez6672]

Really helpful, thanks

[@moqusi24]

THank you, Brad.

[@MichaelGalen]

So helpful!

[@ondrejmarek9752]

Thanks 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 😂)

[@YaserAz]

Great content 👌

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

[@hassaneoutouaya]

Thank you so much!

[@Noor_Islam_Me]

Really outstanding 💞💞💞

[@DrJanitor1993]

Thank you so much

[@elvispalace]

this course should have at least 100 videos 🥺

[@lifeisbeautifu1]

Thank you :)

[@aogunnaike]

thanks brad

[@givtaj]

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

[@BusinessWolf1]

Thank you

[@Mvrck44]

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

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

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

[@nadawhoever]

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

[@ariw96]

waiting for more and deeper great seires

[@pedrob.5021]

thanks!

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

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

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

[@mehdisilber9811]

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

[@arshali4635]

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

[@harryminarti]

Love from India

[@abdullahsoomro6238]

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

[@wick12298]

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

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

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

[@craigc5879]

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

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

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

[@zkhan1995]

how do you research all these topics?

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

[@nagendradevara1]

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

[@zalonics5177]

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

[@mecreature]

😍😍😍😍

[@shekhar5051]

You can Add CLOSURES as an addon to this series !

[@Isfean]

Do something like this on async await please!

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

[@seeesh1165]

You should make more videos.

[@TraversyMedia]

I'm trying my friend. Just have a lot going on right now 😉

[@sjn_]

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

[@siddiqahmed3274]

ruclips.net/video/BcLNfwF04Kw/видео.html

[@yannislee5469]

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

[@andyye3393]

bro, where are you from

[@_Blackwolf_01]

Where is playlist.

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

[@kruzzsteve7525]

I think it's all start with namaste javascript series