Looking Under the Hood of JavaScript

[@ThePrimeagen]

I really enjoyed making this video. Its more of a new style for me, do you like it? Should I do more of this style? (send the algorithm signals!!!)

[@the_flask]

Yes

[@dhruvtekker1220]

It's super complicated and i didn't understand most of it. But i liked it bc i wanna learn more about js--> c++ stuff

[@matiasbpg]

I loved the video. It's really difficult to give content like this that deep dive into the internals

[@mouradaouinat8721]

Duh

[@user-alesomething123]

Yes please, I really like that the content is aimed towards explanation for intermediary stuff. Especially the fact that you’ve posted a link for further explanation and I can go and see things I don’t understand. There’s already content on KZbin code space aimed towards beginners and people with an agenda to obscure info to sell a course. It’s why I mostly avoid KZbin these days and just focus on odin project.

[@RunningRay9]

this shows that JS is BLAZINGLY fast. It executes a code that is supposed to take infinitely long time in just an instant. Blazingly fast

[@wlockuz4467]

It has done executing while Rust hasn't even compiled!

[@wadecodez]

Or is it infinitely fast?

[@igorordecha]

@@wlockuz4467 I just thought... You have an algorithm written in both JS and Rust (both in source form). You enter commands "node program.js" and "cargo build && ./target/debug/program" respectively and measure time from pressing enter to the program returning. How large the input must be (the N in big O notation) for rust to win? Then check how building for production changes the results.

[@kamuridesu]

@@igorordecha I made this test some time ago with python and it really depends on the operation and performance of the machine. Using an 7th gen Intel core i7 and a simples multiplication operation, even with compilation rust executed faster than Python. I assume that JavaScript has a performance similar, if not worse, than python

[@HuntingKingYT]

@@igorordecha cargo run**

[@kebien6020]

To summarize (please correct me if I misunderstood): - The infinity case is just special handling where it's treated the same as 0 - Any other number gets casted to a 32 bit integer so some of the bigger numbers get truncated to small or even negative values - Negative values are handled effectively the same as 0

[@ricardoamendoeira3800]

What I don't understand is if you're making a special case for infinity why would you run it immediately instead of simply not scheduling it at all?!

[@MrSuperNova46]

@@funnyav "This is the way"

[@alxandr90]

@@ricardoamendoeira3800 As far as I understood, the converting of Infinity to 0 has nothing to do with `setTimeout`. Rather, `Infinity` converts to 0 if you try to treat it as an integer. If you do `Infinity | 0` you get 0.

[@nathanhedglin931]

@@funnyav divide by zero would be NaN. Weird stuff

[@rosenthalpiano]

@@nathanhedglin931 setTimeout with NaN also executes immediately. Fun huh?

[@mattshnoop]

Excellent video. This video has less of a "look how shitty JS is" vibe and is more just a great deep dive into the internals of V8.

[@ThePrimeagen]

thats the point! no need to bag on JS, its been bagged on enough, its more "why" does it do something

[@SleepeJobs]

👍👍

[@ricardoamendoeira3800]

@@ThePrimeagen Actually I think this was more the "how it happens", in the future it would be nice to include the discussions on why some decisions were made (from issue trackers, PR's, etc. For example why choose to treat infinity as 0 instead of not scheduling the callback at all.

[@lawrencedoliveiro9104]

So basically, it is V8 that is shitty.

[@jongeduard]

For me it's not completely the first thing about V8 that I have watched around the subject of data types. I forgot which video it was, but it was some years ago and they had a very detailed explanation about the V8 engine and how you could write your code smarter to become more high performant. They also talked about SMI numbers and how using arrays of SMI's where the most efficient ones to use (because of preventing those extra pointers and memory allocations), also how important it was in general not to mixup several types in the same array. For example 1 object or string inside your array also containing numbers makes the whole thing based on extra pointers and allocations (in other words, the whole array becomes a boxed one). It's also true the language has a ton of initial design problems. But other languages also have their issues. C and C++ have their own huge problems for example (being very unsafe and vulnerable for example). It's great that powerfull JS engines exist these days. I would like to know more about the Firefox JS engine as well. Because V8 is not the only workhorse one that exists.

[@snoopy8870]

this type of content on programming is what we need more!!!

[@chrismuga]

Facts

[@YPLabs]

@@chrismuga

[@spicybaguette7706]

Massive props to the v8 devs for making a garbage (collecting) language actually performant, these optimizations are just insane. Also SO to the people working at JSC and SpiderMonkey

[@ThePrimeagen]

yayay! its nuts that v8 team is so talented they took a language that is TERRIBLE for perf and made it semi decent. its ackshually nuts.

[@scottiedoesno]

Love love love this video. This is the kind of stuff that really gives so much insight into what's going on behind the scenes. Thanks a ton for taking the time, not only to figure out why, but also to explain it so well.

[@ThePrimeagen]

:) ty bud !!

[@Nurof3n_]

More videos like this one please!

[@ThePrimeagen]

ya!

[@YPLabs]

​@@ThePrimeagen And make them pretty LongLongLong xD

[@SoKette]

Diving into internals is always fun ! When everything gets demystified after a long and arduous journey of grepping and filling your brain with as much as you can, it's sooooo satisfying.

[@ThePrimeagen]

I also didn't fight anyone, i got a stye, a duct in my eye closed and eff'd me for a few days...

[@tini_]

hmmmm, your last sentence "he is the best Engineer I have ever worked with" sounded kinda sus. Blink twice with the other eye if you need help!

[@lawrencedoliveiro9104]

Hey, it was a chance to use the old “you should see the other guy” joke ...

[@peternoire]

I know we are kinda making fun of JavaScript but.. its so educational it just makes me love JavaScript more. You're great at doing this type of content. Definitely do more.

[@peternoire]

I said we as in we made this video together apparently. I don't know why I typed that.

[@ThePrimeagen]

btw, i am not trying to make fun of javascript, just trying to have fun with it :) and try to explain things in a fun way!

[@RainOrigami]

classic case of stockholm syndrome

[@peternoire]

@@ThePrimeagen you killin it, thanks for the good content. 👍

[@professornumbskull5555]

Yo... You love JS? Are you alright? Do you need therapy? /s

[@judedavis92]

It’s actually refreshing to see a JS dev with a good understanding of under-the-good mechanics. We need more like that.

[@SuperRedstoneman]

Saddens me that not more people are doing videos like this and there are some concepts you go through very quickly but nevertheless I like how you explained a single thing in detail quickly while throwing in knowledge and remarks about how things work

[@johndavidson8096]

Great video! Love seeing in-depth JS stuff! It's crazy impressive how much work V8 does to make JS run faster

[@JosephHenryDrawing]

This is really important to teach that! Don't be afraid to understand the internals and check the source code. Amazing video

[@marcoaugustovitangeli1300]

I really enjoyed this video, this kind of content is great, is beautiful to see how "high-level" code, works all the way down and spot this kind of tricky things.

[@ThePrimeagen]

:)

[@shekishral6570]

Very informative and interesting, please more of those videos when you brake the javascript code into c++ code!

[@za_wavbit]

So in the first few seconds my mind already jumped to "32 bit signed integers" and it turns out that was right, but I didn't know the default behavior for something larger was 0. The spec is really fascinating, especially since it includes so much stuff that JS users (like me) would love to see changed, but it can never change because JS has to be backwards-compatible forever. There's always a _logical_ explanation for JS weirdness that made sense at one point in time, but that doesn't mean it's always rational in 2023 (except for typeof null, which was just an accident, but now we're stuck with it).

[@oscarh4066]

I just found you, Prime, and man I became a fan BLAZINGLY FAST!

[@ThePrimeagen]

LETS GO!!!

[@user-dz7bi8de7z]

I am so happy that I stumpled across this channel. You are such an inspiration, your videos are so well made, funny and you are very authentic. Love it! Thank you very much for your content!

[@bashbunni]

This is amazing! You crushed this new format 🔥

[@ThePrimeagen]

oh bash... stawp

[@trollander]

This is so entertaining as well as informative. Learned a lot! Found you from the vim and algorithm courses on frontend master . Huge fan of your teachings

[@m.minkov]

Really enjoyed this video! Love covering these details that are much more in depth than what you regularly see. Thanks! :D

[@timdithmer9184]

This really is some next level sh*t! Thank you very much. I was already enjoying your content a lot. But this teaches people how to find out stuff by themselves, along with providing a very deep understanding of this specific topic. Again, thanks alot! MORE! :D

[@ThePrimeagen]

yayaya

[@npgoalkeeper]

Reviewing an example of chromium doing something seemingly unexpected while on Firefox, truly a chad move

[@sooollchhu]

i am gonna have to rewatch it a couple of times to understand it, my brain is not cooperating today . Thank for this video.

[@mediopalodev]

Brilliant Video. Absolutely more, please!

[@samsupplee-niederman1752]

More of this, please. I've never seen what "under the hood" of JS before this video, and this was an awesome introduction to the WHY behind the weirdness.

[@danielknight1570]

sometimes idk wtf ur talking about Prime but it’s soothing to hear ur voice

[@juniorrueda8180]

That’s quite deep indeed Amazing video and thanks for sharing your knowledge!

[@ThePrimeagen]

yayaya

[@headlights-go-up]

This was simultaneously interesting and confusing. I'm not smart enough for this, should I be ashamed? lol

[@ThePrimeagen]

i think you have achieved a victory?

[@Vim_Tim]

Follow-up question: what does the spec say? Is this Google’s interpretation, or do all browsers implement SetTimeout this way?

[@lawrencedoliveiro9104]

I had a look at the MDN page (probably the most readable description I could find), and apart from warning about non-numbers being implicitly coerced into numbers, it says nothing like this. There are situations where delays may last longer than expected, but they should never be shorter. So it seems like this is some kind of weird Chrome/Chromium bug.

[@Vim_Tim]

@@lawrencedoliveiro9104 MDN is not a specification… I believe ECMA-262 is the authority for this behavior.

[@Vim_Tim]

I found the answer: the W3C HTML5 standard says “if timeout is an Infinity value, a Not-a-Number (NaN) value, or negative, let timeout be zero.” So this is behavior is by design.

[@lawrencedoliveiro9104]

@@Vim_Tim But that doesn’t say that large values should overflow.

[@omarb155]

It it interesting to consider edge cases like in this video, but hopefully this issue shouldn't arise too often.

[@hendersonfernandes7378]

You are the senior I'd like to have in my life... Awesome video!!! ❤

[@ThePrimeagen]

hio! ty bud :)

[@jocdiazm]

Loved the new format!

[@ThePrimeagen]

lets go!

[@masteringmui]

This video was awesome. I'd love more stuff like it, and also more stuff on your learning process and how you set about getting such in-depth knowledge on nitty-gritty stuff like this.

[@blackfrog1534]

Wow awesome video :3 the more technical the content the more prime shines

[@vvarhand3985]

I loved this!! Would really enjoy seeing more intricate and technical details of the browser’s implementation. You have a great instructional style

[@y3v4d]

Awesome video, short and full of interesting information and analysis!

[@Simon-vy8fe]

Love these deep dives! Keep them going please. :)

[@igboman2860]

So in summary, setTimeout expects a 32 bit signed integer and overflows . Thanks for the video. I actually didn't know that

[@michaeldeloatch7461]

I'm a little stopped up in the ears tonight, and a lot hearing impaired every night, and the speakers on my laptop are lousy. @ 2:40 I thought you said "ideologue" which certainly could figure in philosophically between the loosy-goosy world of JS and the cold, heartless metal of C calls ;-) -- oh, you actually said IDLong

[@Ma1ne2]

This was actuall very interesting, I was building a project for university with Rust to Webassembly and a lot of the ideas that you explained here to interface JS with C++ actually apply directly or similarly to wasm-bindgen, including how there is a wrapper struct for passed and returned JS values.

[@edupsousa]

It's kind of scary the number of assumptions or best guesses a web browser does. The last time I dove in Chromium code was to find out why it was trying to autocomplete a random text field in my form as a credit card number. Lots of obscure heuristics.

[@ThePrimeagen]

its crazy out there :)

[@jfdirienzo]

This style of video is pure gold 🔥🔥🔥

[@abhishekgururani6993]

This video is pure gold, I learned how to research things.

[@mzg147]

I hate js, I am doing challenges to write web apps without touching js, but this deep dive is just great. Makes appreciating it much easier (it's still hard tho), thank you really much!

[@deank179]

Super interesting! Would love to see more content like this

[@HuntingKingYT]

It does it immediately because it’s blazingly fast.

[@stefanhall6415]

Love your videos❤

[@ThePrimeagen]

hey thanks stefan :)

[@amans6504]

This time i finally could understand a little c++ in production.

[@petarkolev6928]

This video is beyond amazing!

[@ThePrimeagen]

oh well ty :)

[@diegolikescode]

That is some juicy ass content. Loved this format, you keep getting better and I'll keep coming to you (wat?)

[@ThePrimeagen]

LETS GO, KEEP COMING BABE!

[@petrpechkurov3095]

Thank you, Mr. ThePrimeagen!

[@ascourter]

Nothing like pulling out the ole 2's complement to see some jaws hit the floor

[@kardashevr]

a fascinating piece of knowledge I'm never gonna need

[@jgttech]

I loved this video. It explains the situation really well.

[@Trooperos90]

What do u mean it gets translated to cpp? Its just v8 interpreter using binary code that was compiled from cpp

[@moodynoob]

Absolutely love this kind of content!

[@CodeWithAhsan]

I loved this Deep dive. Been working with JS for the past 10 years I never knew about this :) I'd love more of this and would perhaps now start looking into the chromium source code myself as well! Thanks the swolleyeagen

[@pd5711]

Thanks for that video ! Props for Westbrook usage :D

[@palaciokaesar]

an programmer youtube with a huge charisma??? YES I AM INNNN

[@thehibbi]

I like understanding stuff like this by inspecting the source code. Very nice video, thanks :)

[@hugodsa89]

God I love these videos. Thanks prime.

[@UsefulProgrammer]

I really liked this one. Keep it up.

[@alexibnz]

This style reseembles a lot with what I do at my job, but without SAP frameworks… fortunately for the rest of the viewers. Pls do more!

[@DaviAreias]

So basically half of time the V8 engine is checking if we wrote something stupid?

[@ThePrimeagen]

yes

[@bravesirrobin9576]

I love this video, I'd like to see more of this type.

[@mondirhallouli]

you sir are just different! in a very awesome way!

[@kr0k3tt]

Liked for the instance promotion. Thanks prime

[@drdesten]

As someone who has read into the JavaScript spec, these kinds of things don't surprise me too much

[@razorstone3088]

never looked into what the code for v8 looks like... looks interesting

[@ThePrimeagen]

its rough.

[@Dima1415]

You’re rough

[@softed]

The infinity thing I can understand, but the rest is just integer overflow which can happen in most languages including rust

[@darylclarino5439]

this is an inspiration to create confusing prs that work to confuse colleagues for the lols

[@dano7675]

Bah gawd! The SwoleEyeAgen strikes again!

[@avinashthakur80]

Even worst issue I found in JavaScript is that +0 & -0 are different concepts and in some situations give different results.

[@ThePrimeagen]

so... that is a funny thing. -0 and +0 is the IEEE standard, not js :)

[@avinashthakur80]

@@ThePrimeagen Yes it's IEEE standard but only in JS we see it's worst implementation. For example, these 2 expressions give different results. Math.atan2(-0, -1) Math.atan2(0, -1)

[@softwarelivre2389]

@@avinashthakur80 As they should. It would be clear for anyone that has studied limits in Calculus classes

[@avinashthakur80]

@@softwarelivre2389 Limits don't apply here. Limit(x→-0) f(x) is different and not equivalent to f(-0) or f(0) In Math, there's no concept of "-0", it is equal to "0".

[@softwarelivre2389]

@@avinashthakur80 0- and 0+ are literally lim x-> 0- x and lim x->0+ x

[@st-jn2gk]

love your videos (waiting on your rust ergonomics vid btw 🥺)

[@totalmonkeyspeed260]

Good video, do whatever you want dude.🙏

[@Amy_A.]

Before watching and without knowing the answer, I'm guessing it has to do with parseInt, and setTimeout might handle NaN as 0 to simplify debugging. Edit: So kinda close. I've never needed to use Infinity before, so I didn't know how it would be parsed, and I've never tried passing anything to setTimeout that wasn't a hardcoded number (or a variable with a hardcoded number), so I didn't know for sure how it would handle that. Good info, thanks for sharing, Prime!

[@ThePrimeagen]

its more confusing than that! 32 signed integer conversion babe!

[@matthewvaccaro8877]

More! More you son of a bitxh!!! More content like this, it’s absolutely amazing ❤❤❤

[@ImranSheikh-kg4qd]

We need more of this type of content...

[@henrybenedict6357]

I just watch your course about vim on frontend masters and I love it.

[@SunnyOhm]

6:00 "instant promotion" lol, more like "instant getting fired". But if you manage to not get fired, you can become "indispensable", because no one else will be able to maintain your code…

[@dipjul]

Let guess it before watching the answer: Is it because of integer overflow, it is the number entered is outside the range, it circle back. For example: we the accept range as -1 to +1, and we enter 2, the it get takes the value -1.

[@lotfikamel5947]

Really special content 💖

[@ThePrimeagen]

i feel special sometimes

[@awave7710]

def looking forward to more of these

[@AlexanderBorshak]

Nice investigation, many thanks!

[@es68951]

Classic case of "Weirdness from under the hood" 😂 Wonder how many JS devs were like "Cwutwut now?"

[@smile4992]

I didn't know gimp can be used to create tutorial videos like this. This is amazing.

[@BRP-Moto-Tips]

this wasn't in the 48 hours 0 to senior dev bootcamp I did :/

[@ThePrimeagen]

You should have done the 0 to 72 hour course.

[@iustusae]

I NEED MORE VIDEOS MORE BLAZINGLY FASTER THAN THIS SWOLLENEYEGEN !!! (shoutout to da wife for supporting you)

[@ThePrimeagen]

hio! ty :) yeah, its really hard to live this lifestyle of 4 kids, beautiful wife, twitch, yt, netflix... oof

[@zebedie2]

Welcome to the wonderful world of two's complement where the msb represents if the number is negative.

[@medamine3142]

my mind is exploded from this explanation😵

[@ThePrimeagen]

hopefully in a good way

[@medamine3142]

@@ThePrimeagen HAHA right

[@chrissaltmarsh6777]

This is hilarious. Reminds me of an ancient Sinclair calculator, very cheap, which got things wromg; the fun was to work out why. Lack of RAM - can't deal with edge cases, oh well, WTF. Javascript does not have that excuse.

[@ThePrimeagen]

hah, i like investigations, they are funny

[@kiffeeify]

IDL files (I think interface definition language) are also heavily used by wasmbindgen to autoconvert the glue code used when you want to use the browser API from your webassembly rust application ;-) AFAIK wasmbindgen uses the IDL files to autogenerate all the web_sys features, i.e. web_sys is entirely generated code(?).

[@quintencabo]

I really loved this video!

[@qodesmith520]

You're a friggin genius.

[@ThePrimeagen]

just a man with curiosity

[@AlexSharikov]

Yes, entertaining and knowledgeable 💥

[@TeamEternalEmpire]

Is there a way to prevent that 'immediately' and 'never' behavior? If we are dynamically writing a value, it can lead to a bug that may be impossible to find

[@davidomar742]

This is great, on my next interview when they ask me if I have any questions, Ima hit the interviewer with this question. Instant hire

[@MyAmazingUsername]

Woof all that conversion code makes it a miracle that V8 is as fast as it is... But will it ever be BLAZINGLY FAST? No, for that we need Rust of course.