The New JS Features Coming Soon (I'm so hyped)

every 2 months the tc39 meets to discuss what changes will be coming to JavaScript they have a long process where things Advance through stages until eventually browsers are expected to implement them there's a lot of things in Flight right now like a lot of them we talked about a handful of these things already from signals to pipes to pattern matching but there's more here there's a lot more here there's arguably more inflight stuff than there's ever been a lot of the things I'm excited about just advanced in the most recent meeting which happened at the beginning of April and I want to talk about those as well as the ones that didn't come up because I just want to show you guys what the future of JS might look like so uh let's dive in as I mentioned before first we're going to be looking at the things that happened at the 101st tc39 meeting and then we'll look at the things that didn't come through this meeting because again there's some really cool stuff that wasn't mentioned here the first change and I still can't believe this wasn't part of JS before error. iserror is finally at stage one we will finally have a symbol to detect when an error is actually an error instance of error is unreliable because it provides false negatives with cross realm things like with an iframe or the VM modules in node so having a proper error. is error it's actually a nice win and I'm excited to see that if and when it ships signals as I mentioned before in my previous video are something a lot of people are hyped about and they made it all the way to stage one so this is no longer just an idea this is now a real proposal that has a good chance of making its way in in the near future this one's interesting because using hasn't actually shipped yet while we do have it in typescript we don't injs yet in fact the proposal for it is currently sitting at stage three but they're learning a lot with the said proposal because there's a lot of things that have to be gotten right here for this to be a good experience so you say here status is stage three the goal of using is to have a composable pattern for actually linking things to external resources be it memory and IO this pattern generally includes the allocation of a resource and the ability to explicitly release critical resources so this example uses EAS script generator functions and async Generator functions and exposes the pattern through the return method so this is pretty classic code so we have const try or const handles acquire this critical resource we try something and then finally we clean it up we have an object we use the object in this Tri Loop and then and finally we call this thing for blocking so you have a resource that you want to use in code and then you want to clean it up when it's done running that code you have to handle that yourself right now which is annoying so it's really cool to see a pattern that just handles this for us we see here with async generator functions we acquire stream we do some stuff and then we close the stream at the end here what if all of that could be done in the Handler directly so here instead of the con definition it's using handle equals require file handle this using keyword allows for this to define the different states of things so now when we call this thing in the block scope declaration and we use it and then we leave the scope whatever cleanup this has bound will be handled and things are blocked as expected this is like one of those obvious wins that might feel weird to have this new syntax for us as JS devs but on the library side this is Magic this is so powerful for a library author to be able to Define cleanup behaviors and then when you consume the resource it all gets handled for you really cool stuff they cite all their motivations for it including different things that exist within ecmascript stream readers node file handlers and so many other things they even site prior art including um C if I recall was in here yeah where C has similar stuff Java has similar stuff and even Pyon with the width statement has similar stuff pretty cool I'd say Python's width is the the thing that makes the most sense as a comparison to me where you say something is with and then you have all of these enter and exit functions that you can Define the implementation for actually using this stuff on like the library side is very interesting we have dispose as well as a separate async dispose which are symbols that you can bind to a given interface that will allow you to use that interface and have these things run once the interface has been consumed so if you have a block scope where you're using something and then the scope finishes whichever of these you've bound will then run afterwards if we look at an example here we have suppressed error extends error as construction name error suppressed all those things so you can define a custom dispose or async dispose by just grabbing the Prototype and binding the async function there this code does not look the prettiest and I'm sure people will invent lots of cool syntax to make it a little less annoying here's the Alias for it so if you define a class you just Define a dispose function in it and now you're done isn't that nice it's actually pretty cool yeah the symbol dispose suppose of the resource within the object yeah pretty easy to set this up excited to see more demos using it I'm hyped to see where this goes the proposal was not about that though the proposal was about the strict enforcement of using which means that you would allow for certain resources to require you to use using instead of it being an option because if I defined a class that expects this disposing Behavior to work a certain way and somebody calls it with const instead of calling it with using and now none of the disposal stuff runs that's a really bad developer experience and possibly a breaking user experience so the idea of enforcing the use of using on things that have the disposal stuff attached it's a pretty cool proposal and it's nice to see it go from stage 0o to one so we can actually have using in a way where it doesn't give us more options instead gives us a clear path to doing the stuff right cool we're only through stage one here and we are not even getting to the fun stuff a lot of the fun stuff isn't included here so we'll blast through these and then we'll take a look at the things that weren't talked about although set methods spoiler very cool stuff so let's get up all the stage two stuff yes there's a stage 2.7 now which uh yeah it means that it's been approved in principle tests have been written the next steps to get community approval that the tests are adequate at which point it'll be ready for implementation which is stage three so they they have these mini stages between two and three where they're iterating on it and getting it closer and closer but stage three is when they start pushing hey browsers you should go actually start adding this so the use for sum precise summing a list is a very common operation it's one of the few remaining use cases for array. prototype. ruce are we in the post reduce era is that what this is saying do y'all still use reduce drop a one in chat if you still use reduce drop a two in chat if you can't remember the last time you use a reducer one's if you use it still two is if you can't remember the last time you did I'll be honest the only reason I can say one is advent of code I find myself in the two world nowadays seeing a lot of sometimes and rarely that honestly sounds about right to me y'all get the idea I'm surprised they're calling that out in an official proposal I never would have guessed I would read a tc39 thing that says that summing is one of the few remaining things to use produc for something important to note here is that these proposals are things that get implemented into V8 not with JavaScript so when one of these functions is provided the engine can choose to do these things under the hood for you in a different language so if we have a reduced function all of that has to exist in the JavaScript VM because every step gets run by the JS VM but if we have a sum function that value can be passed down to something faster and then it will spit up the resulting value instead since JS doesn't have to run for every step in every iteration it only has to run for one function quick to give you the sum not using reduce theoretically allows for your run time in your engine to do something much much faster which is what's interesting here if this merges is imagine how fast Jared could make this in bun like if he can do the sum outside of JavaScript in something native like bun and just update the memory from there that's way way way way faster so in that sense not using reduce for a sum actually makes sense and also the point that a floating point numbers aren't great to add together like this and if you could do that externally and have a a more correct answer that's probably worth it like apparently the fact that there are more clever algorithms to add floats together it's a fact that few JS programmers are aware of and even among those who are would never bother doing it has anyone in chat ever written better floating Point Edition in JavaScript make yourself known you know what zero if you've never written your own custom Logic for floating point one if you have Jesus Christ Bender trying to make your way into a video I did it once it was bad I'm seeing two ones so far but mostly zeros because who the hell has written their own custom implementation of adding floats like why would anyone do that Autumn if you can't recall you did not do it yeah if anyone does end up doing that let me know how it goes because that's curious to me but uh as far as I know none of us are making game engines and as such none of us are doing our own floating Point math we can make it easy to reach for the better option yeah if they have array prototype sum that sounds great to me so this is the proposal we have values values. reduce would be zero for these two being added and math. some precise oh it's a math function and it's also some precise interesting instead of specifying any particular algorithm this proposal requires the maximally correct answer that is the answer you'd get if you did arbitrary Precision arithmetic then converted the results back to floats this can be done without actually needing arbitrary Precision arithmetic one way of doing this is given the sh96 cool this is Magic because if this works in this performant this will allow for some crazy like 3D game engine type stuff with really precise floating points and if this can to be done quickly this is very promising oh somebody has made a really good point in chat does this mean 0.1 plus 0.2 will actually finally be equal to 0.3 do do we test this polyfill is this video going to be hours long cool so sum 0.1 0.2 I need to pass an array ah that would make sense God damn it God damn it so close but so far how is it actually math is really hard in JavaScript I'm embarrassed for you anyways still a cool proposal someday maybe our math will add up how it should have this whole time let's take a look at the promise. try that's actually an exciting one common use case that I and many others have is that I have a function f this function may be async and return a promise or it may not I don't wish to have to know however I'd like to wrap it in a promise so that if it is async or if it throws I can lean on promise semantics and do catch to handle it the typical easy to remember way that this is achieved in JS promises is with promise. resolve. then this works great it catches any exceptions thrown and it promise wraps any venables or values returned from the function however f is needlessly run asynchronously on a future future tick this is a fair point what if you want to use the promise semantics but not have to wait for this to end up at the bottom of your event Loop and go through it again being able to use promised semantics without blocking it's an interesting concept not have to await yeah if they want every to r on the same tick since after all it might be synchronously returning a value or if I want parallel semantics with an acing function up to the first await then I need to use new promise resolve resolve F this chuse my goal but it's not ergonomic enough to write nor is it easy to remember I like how personal this one's written usually these proposals are more like high level talking about the state of the world not focused in being like this is the exact thing that I am working on and why I care wow uh P TR has 44 million weekly downloads and 8.9 billion total downloads nice good stuff crazy to think that's that popular but I get why you get the point there's a lot of potential value in being able to use promise syntax without actually having an async function so all the stage three stuff is based on eval eval is cursed and you shouldn't use it so we're going to skip these parts especially since these haven't actually had their proposals updated since stage one so not necessarily the best thing for me to cover here and honestly stage four as well as things we're covering after are the more interesting bit so we're going to dive straight into that so set methods and duplicate named capture groups set's too much fun so we're going to do that next duplicate named capture groups right now in JS naming a capture group in a Rex needs to be unique fun so this would be an error because you've reused the year group name but you want to match a thing that can be written in multiple formats so it would be nice to be able to use the same group name for that case so if we have year being used for two things here we should be able to call it year in both places so this spec is very simple and let you do that cool nice you reject people must be pumped if you don't already know about the set in JavaScript it's my favorite underutilized JavaScript thing think of it kind of like a map except you don't have a value you just have the keys so it's really quick to check if something is or isn't part of a set so if you want to see if a username is already done a thing you can have a set that has all the usernames that have done the thing and then you quickly check is this usern name in the thing and if it is cool you're done and if not you can add it it's really nice way to quickly check things and also the ability to compare different sets so if we have a set of users who have finished signing up and a set of users who are in a like an org we can do this to overlap to get those things together which is a really really cool and powerful thing especially if you can optimize this at the lower level in the engine if you can do that diff in like C++ with the memory access directly this becomes a really powerful thing so clearly as you see here sets are very useful especially once you start combining and comparing different sets to see which values are and aren't shared so let's see what this proposal is adding some of these things are really cool oh it is those The Proposal is the intersection Union difference and all of these which I've had to implement in the past and they suck so having all of these just built into the language and theoretically being way faster as a result is huge especially superet and subset that is so dope to have where you have a bunch of keys and you have another set of keys and you want to make sure that other set is fully within the greater set this is this is huge this lets you do crazy stuff performance-wise too if that's like a check you're doing a lotoo fun yeah this is a really cool spec I'm really excited to see what people do with it I know a lot of Library devs like uh TK dodo from over on the react query side has been very excited about this for quite a while now and I know a lot of libraries have the opportunity to theoretically get much faster if these things are implemented and they're implemented well in the browser and in the engine themselves so that being at stage four is huge because that means like every browser is going to start implementing it it's even in mdn now so when you search for sets in mdn it just shows you all of these methods because they're effectively ready to go which is huge I cannot wait for these things to be in every browser what's the can I use for this okay set intersection damn as per always Firefox is holding back the rest of the internet I know you guys love for me to shill Firefox you hate Chrome so much but uh yeah Firefox is holding back the web and once again Firefox is taking its time implementing these things there is a way to go set it manually in nightly builds cool welcome to the world of supporting Firefox even Edge has it like are you kidding Safari's had it since 170 imagine being behind Safari for new features yeah I I can't we would have set methods now and they'd be used by everybody if it wasn't for Firefox it's the point I'm trying to make cool so those are all of the things that have been talked about in the last meeting but there's a bunch that weren't and I want to talk about those two because I don't think they're any less likely to come I just think they're a lot cooler first I need to talk about is iterators specifically iterator helpers which are a collection of new methods of iterator prototypes well on iterator prototypes that help in general use of iterators v8's already shipped them so we can look at the official docs for iterators which is really cool but I'm going to start with the proposal because I think it's important to have the context of why this is all happening a proposal for several interfaces that will help General usage and consumption of iterators in Aquas script stage three so it's time for browsers to start implementing motivation iterators are a useful way to represent large or possibly infinite innumerable data sets however they lack helpers which make them as easy to use as arrays and other finite data structures which results in certain problems that could be better represented by iterators being expressed in arrays or using libraries to introduce the necessary helpers how many people have had a map that they wanted to do things with in JavaScript and you just dump the map in an array so you can actually iterate over it the way you expect cuz I know I've done that in more than one Advent of code problem and probably more than once in production too so yeah um very much a thing I'm excited for to not have to to opt out of other iterator types and just dive into arrays because there are better functions this will allow us to have all the things we expect without leaving our iterator and going into aace so when we're dealing with maps and sets and all the other fun data types you can keep them in that data type I've had so many times where I had like a map that was part of like State through something like zust stand and I wanted to select specific values from it and having to like look for like finding a specific value in a map not the key hell and I would just convert two and from arrays everywhere to solve it getting out of that seems genuinely magical so I'm really hyped for this already let take a look at some examples here's a generator which if you're not already familiar with generators they are functions that are are lazily evaluated when you call them effectively so you can yield and get more and more values and here we have Naturals which will start with i z and then while true it continues to yield I over and over so we can map this so Naturals map value return value time value this is so cool being able to map off of a generator magic this is so cool I'm actually really hyped for this they even have things like fil oh filter on a generator oh man and I just learned about the chaining Behavior oh boy thank you Gabriel as always the main thing with iterators is that it'll run everything in one computation so L the map. filter. ruce andfind happen if you chain them all together it will compute them as one big reducer in the engine assuming that they implemented correctly in the VM yes but man if they get that and they get that right this is this is so cool nobody told me take was happening this is a new discovery for me I should have read this before oh man I'm trying to find the right way to explain why this is so cool hopefully you can look at this and see why it's cool but if you can't which is also totally reasonable this effectively lets you generate data with a cap that's defined where you're consuming it so if I have a thing that generates I don't know the one that I had a lot at twitch was we were generating video manifests for picking what episode we would stream next it would keep going until it ran out of files we could add a bunch of checks to make sure it didn't run out of files but we could also just take the right amount or another common case is that we're running this across multiple servers and we know we can only process up to three videos at a time before we hit CPU limitations now we can just take the amount that we actually want to take this is so cool this is a really good Syntax for a ton of libraries like here's a thing that we could see that would be great for this what if we wanted to generate test data we want to generate a specific amount this looks great drop is just as cool where you can skip values so this is iterating and if we drop three then we skip Z through two and then the next value is going to be three then four then five this is so cool flat map again so cool God if you did do take and then do flat map I think you can chain them right for those who aren't watching live which is going to be most of you knowing how my videos work we just discovered that most of this is already in the browser which is huge huge so we're going to drop that generator function and I want to play because I want to specifically try out I was geeking out over flat map which is cool CU you can map the values to something different when they come through which is huge because if you want to split this set of data into a different set of chunks like maybe I want to parse every word instead it's that easy to just parse every word instead so cool what I want to play with is to array cuz I want to use this to generate an array with incrementing numbers cuz as we all know generating an array with default values in JavaScript is weirdly annoying and also weirdly runtime intensive so let's do const count array equals Naturals take 8.2 array count array this changes everything I see why all the everyone was so hyped about these holy there are so many things this makes way easier and you can tell from chat freaking out yeah wow this is good enough I almost want to make a video dedicated to it Jesus you've been using the polyfill for 2 years I I fully understand now this is one of those things where I'm going to refactor a lot of code that is that is just so clean and the best part const more array equals Naturals take 5.2 array and now we get the rest wait is not the rest again is it a does it reset what we've taken when we convert that does that not count as taking yeah because um it's a function it's not like in a state so the thing hasn't been consumed we'd have to uh take the naturals call so if I was to do uh const current state equals Naturals current or const M1 equals current state. take 5.2 array that will work for M1 and now if I do const M2 equals current state. take 6.2 array we'll get I spelled State wrong if you ignore the fact that I can't spell that's a little Annoying the fact that once you set a take value on an iterator you can't take more at that point forward I get it but it's annoying this is how most people are going to consume it anyway so it's fine but uh was expecting a bit more State and flexibility there I'm curious to see what people do and recommend with this going forward of course we have a for each which is really handy to get a set of values and then do something for each of them in this case we're pushing to log for each value that's what you would expect pretty simple and then sum to check if any value in the iterator matches a given predicate sum can be used it takes an argument which returns true or false yep. sum true. sum V true false iterator already been consumed interesting yeah so since the sum has resolved to True after we've done Naturals that take four here with this iterator once we've done this we've consumed the iterator so we can't reuse it for another check but we can go on to do take four on that trolls directly we every time we call the generator function we're making a new iterator so that works that makes sense there are so many of these that are huge every this one's really handy especially for a stream where we have data that we don't know when it ends or if if it even ends having the ability to make sure every single value coming down the stream is correct huge golden and this just being built in is so nice and of course find we want to find the value where a certain thing is true that is not trivial iterator do from object from is a static method unlike others listed above which takes an object as an argument the method allows wrapping iterator like objects with an iterator cool so here we have a class iterator that has a next function that returns done false value one now we can wrap it with iterator from and it just does what we expect that's pretty cool too one more important piece here all of the iterator producing methods in this proposal are lazy they will only consume the iterator when they need the next item from it especially for iterators that never end this is key without gener support for any form of iterator different iterators have to be handled differently huge this is the magic here is you don't actually consume any of the data until you're actually using the value so if you have massive maybe even infinite data sets like I don't know the billion row challenge this is phenomenal for that type of stuff the only time I spent just trying to read the chunks and like iterate through them when I was trying to do the billion row challenge was obnoxious and here you just don't have to anymore huge so hyped for this this is one of those like oh my God why do we not have this already type things and I'm really hyped that not only is it coming it's in the browser like this is so simple and elegant and these types of problems were so annoying to solve before it just it feels like the beauty of pipes and maps that I'm used to from something like elixir finally making its way into jsland which is so cool to see yeah it's lazily loaded oh so so good this is so good I'm so happy about iterators we can agree as we see here a lot of the fancy new iterator functions specifically iterator filter the one I checked Works in Chrome Edge and Opera which is all the chromium based stuff so it doesn't made his way to Firefox yet or Safari so I can't roast Firefox as hard as I would like to but uh yeah Firefox B Firefox we'll continue to roast it because of who I am as a person iterators are looking really promising very excited to see where they go but they're not the only really cool proposal here let's dig into temporal I I think temporal might be the single JavaScript thing that I've been asked about the most that I haven't talked about the reason for that is I wanted to dive a lot deeper and give meaningful input I still can because I've read about it so long and it's now far enough in stage three that I'm actually pretty confident it's going to ship but man temporal is cool remember the days of using many different date time libraries like good old momentjs the browser should always have had a better way to deal with date times the browser is possibly the single platform where date times are the most valuable like how many web pages are there on the internet that don't have a single date time on them I like honestly can't really imagine many as I sit here thinking about it like most websites have some need for date time somewhere so this the fact that browser handles them so poorly is obnoxious and I'm very excited for it to not handle it so poorly as we see in this proposal date has been a long-standing paino in ecmascript that's putting it lightly this proposes temporal a global object that acts as a top level name space like math that brings a modern datetime API to to the ecmascript language for a detailed breakdown of motivations see fixing JavaScript date did Maggie just write a huge article about this yeah there's a lot to dig into here let me know in the comments if I should do a video about the history of date time and JavaScript because it's a complex and long story or a negative one story if you ask JavaScript how long it was so what what's the goal here this is the proposal for temporal a global object that acts as a top level name space similar to math and it brings a modern datetime API to the equiscript language the principles are as follows all temporal objects are immutable date values can be represented in local calendar systems but they should be convertible to and from the poptic Gregorian calendar you could have shown me this name and asked if it was made up and it would be a 50-50 shot for me all time of day values are based on a standard 24-hour clock that is very necessary and leap seconds are not represented cool leap seconds sorry Google so let's take a look at the actual uses of this the documentation as well as the poly if you really want to this now you can I do think a lot of browsers support it already though if I go to can I use oh no browser support it yet weird temporal that instant dis supported in Safari okay we're still very early with temporal still I thought so but it's sad to see CU I believe this is pretty far St yeah stage three so this should be in browsers by now but as per always if you guys don't know um the problem with time and time zones I've referenced this video more than possibly any other in my history of YouTube yeah date time's hard and it seems like the browsers are putting off dealing with it because it's hard so we'll see when they actually get it in I actually read the docs for what this looks like to use though because it is really cool temporal do now. instant get the current system exact time temporal now time zone ID get the current system time zone Zone date time which is current date and wall clog time in the system all these now things make pretty clear sense you could even get plain time and plain date time all here it's pretty handy it works how you would expect temporal instant is in interesting it represents a fixed point in time called the exact time without regard to calendar or location like July 20th 1969 at 2017 for a human readable local calendar date or clock time use temporal time zone or temporal calendar cool so instant temporal instant from this exact thing two string Epoch cool so it represents a specific moment crazy to think this didn't really exist before usually that the difference between like duration time date and how they combine has never been particularly clear so having the ability to have a specific moment and then a duration a separate Concepts is huge plain year month oh how many times have you needed this where you just want to get the year and the month and none of the other or just month and day and then you have this new date object where you can get date. day of week or year month. days and year so much useful stuff here duration again how do we not have this before why is it so hard for us to take two date times and figure out how much time occurred between them I know I've had to deal with that a bunch I know others have to and then like adding that duration to something else mess and now it's not now it's trival temporal duration from and then you just pass it hours minutes whatever key values you want here that are numbers and it just spits out the number God you know that this previously was 69420 and they changed it that's all I see when I look at 46900 this was previously 69420 so you can find the G history to prove it I love that no commitment temporal time zones making time zones actually dealable finally temporal calendar represents a calendar system most code will use the iso 8601 calendar but other calendar systems are available cool weird fine temporal doc calendar. from ISO 8601 dates Cal date from Fields there you go date months and year date. days and year all make sense I like they documented this that exact times are different from calendar dates and wall clock times and the Zone date time and these other pieces are what link these things together string resistance parsing and formatting I have needed this diagram for things for so long I love that they have like documented the standard and what part represents what here very very handy good stuff I finally understand the temporal hype this is huge even just having duration as a primitive is enough a reason to want this desperately so I'm very excited for the future where all browsers have this stuff built in because we should have this years ago but if you can't do something years ago the best time is now we're down to the last two make sure you stick to the end cuz the last one is very fun and spooky it's the shadow realm but first we have to do pattern matching I've already talked about pattern matching and sadly since then it is not Advanced past stage one I think a big part of why is that it's been handed over to a new crew of people to run it cat was running it when she was at Microsoft I think she's still at Microsoft I'm not positive about that though yeah cat might have left Microsoft but Daniel Rosen waser who is the guy in charge of typescript at Microsoft he's the manager of the team is one of the top Champions which is very promising very promising weird to have the typescript manager proposing things in JS but when you think about it it kind of makes sense and a bunch of other really talented people as well so what's the problem what are we doing here there are many ways to match values in the language but there's no ways to match patterns Beyond regular expression for Strings however wanting to take different actions based on patterns in a given value is a very common desire do X if the value has a food property do y if it contains three or more items Etc I've already done a whole video of pattern matching and I highly recommend it if you haven't checked it out it's a pattern that I desperately love and need in JavaScript because I hate switch statements and there isn't really a nice way to do this with switches we take a look at the syntax which should be at the bottom somewhere in here match we have this five integers array so it's five integers it's integers five so this is 1 through five so here we have the match pattern if we have when let a in the array this is matching when there's one value in the array matching a generator against an array pattern obtain conin the iterator which is just above the generator then pull two items one to match the a second to verify the iterator only has one item which fails when let a let B is us having two values instead here so if we only have two values and it fails when it pulls the third this is where we'll end up but otherwise we hit the default this is the magic of pattern matching is you can have different patterns that you're trying to match to so instead of having to write a bunch of weird if thing is true type cases you just assign the values and if that is the correct assignment it just works it's a really cool pattern this works for objects as well um is the code just not loading here or did they kill the proposal some way where I can't see them anymore okay what the hell yeah this is just in their markup they just deleted the code from the example what the that's annoying that's one of the specific patterns I wanted to show one more example there's tons more in my video that you should check out is checking for specific things on an object so here we use math. random to decide if we're returning a number or string so get number or string returns math. random if the random value is less than .5 so 50% of the time it's the number one the other half it's the string one and now in the pattern matcher we can pass this object and if number or string comes out to a number then we'll log this and we'll go down that path like a switch but if it's a string we go down this one instead the magic of matching is it only can match one thing it has to match the top thing of the list so yeah hype think of this like early escapes where I'm sure we've all done the pattern like if I was to rewrite WR this instead of match what we would probably do is if type of that is number then we would console log number and then return or we do an else is what we probably do and now you get the idea we'd be doing this type of stuff where we have a bunch of like these nested if checks probably full of early returns and stuff now we have an actual syntax that describes what we want we want an object where number or string is number or number of string is string this might seem like a semantic thing but once you get to increasingly complex cases this really really nice people are mentioning switch true is another option but like I'll be honest as a big JavaScript Defender switch true statements feel like we're admitting that our language sucks and I I hate that it also like those don't work for iterators at all where matching works with iterators matching isn't some weird syntax hack matching lets you check for specific things with this new syntax in the shape of the pattern huge very excited and now for the final proposal that is currently in the Line Shadow realm Shadow realm is actually pretty far along it's in stage two has a bunch of legendary people who are advocating for it but uh what is it what are Shadow Realms Shadow Realms are distinct global environment with its own global object containing its own intrinsic and built-ins separately from the browser so standard objects that are not bound to Global variables like the initial value of object a prototype they have a whole explainer dock here too Shadow realm proposal provides a new mechanism to execute JS code within the context of a new global object instead of JS built-ins API enables control over the execution of different programs within a realm providing a proper mechanism for virtualization this is not possible in the web platform today and the proposed API is aimed to a seamless solution for all JS environments there are various examples where the shadow realm API can be well applied such as web-based IDE or any kind of thirdparty code execution like imagine building code sandbox with the ability to actually isolate chunks or Dom virtualization like Google amp and like making isolated versions of the Dom to grab things in and out test Frameworks in reporters like inows tests but also in node using the VM calls testing and mocking in general are huge for this SSR to avoid collision and data leakage again huge in browser code editors and even in browser transpilation so much cool potential use cases for this somebody ask if you could hack this with iframes kind of but you have no ability to go in or out of the if frame it just exists by itself and you show it or you don't show it you don't have any way to interface with it this would give you a way to interface with something as well isolated as an ifame so cool sadly they requested stage three in 2021 and I don't think they got it yeah this is the meeting where they proposed it pretty sure they got even more feedback oh that's cute nice little ending but uh hopeful that we'll see this one go a bit further because I've seen more and more hype around it recently people seem to be pushing it now more than ever here's what it would look like to consume we Define a new Shadow realm named red in this case red ad equals a wait red. import value inside code JS add see what's going on here we're loading different JavaScript to live inside of this realm Realms can import modules that will execute within their own environment when the modules resolved it captured The Binding value or it creates a new value that's a WP function that is connected to the callable binding so here we're binding ad from inside code JS to this Red Shadow realm so now when we call Red ad with two and three it will give us back five because we have bound this function which is exported from this JS code to here as an isolated box let result equals red ad yep you get the idea it's a wrap function exotic object that chains its call to the respective imported binding the evaluated method can provide quick code evaluation within the constructed Shadow realm without requiring any module loading while it is still required CSP relaxing uh yeah this is the client security protocol stuff just making sure it's secure which is cool because now we can update things in global this and then have our VM call Global this as well which yes you can safely call your Shadow realm. evaluate and that's okay because it just lives in its own world and now we can change Global this. some value in both places and it will not affect the current um JS VM that you're running within that's so cool this is like proper meaningful isolation to the point where using eval in quotes obviously is actually somewhat safe here where it never was before this is huge the WAP functions can also wrap other functions the other way around so we can set unique values red. import value set unique value that's pretty cool where this set unique value function lives within the in imported code and now we can call that function from outside and it will update the stuff on the inside as well as updating the value that we're using here that's pretty cool yeah the code in there set unique values uh CB Global this has some value time 2 yeah so the call back gets called with this and then it gets multiplied by two so we started with the value of two we then I always forget what the double times does that's exponent right so 2 the^ of 3 which is 8 and then we multiply this by two again inside of the Shadow realm which makes it 16 get the 16 here as the result I think that's pretty cool the ability to execute code inside and outside pass strings to the safely so much cool also a lot of potential for people to find and also create really subtle exploits and things when they use this but I think this is huge and I think if used right this would enable applications we can't even think of right now the safe execution of code that is input from something other than your team and your developers this is like theoretically like comp time for JS is now a viable path I am hyped for this this is really really cool this might be my favorite so far yeah H iterators is really cool yeah this is tough these are all dope there's a lot of cool stuff coming to JS I hope you guys are as hyped as I am because I'm really excited and not just to make videos about it that said let me know what your favorites are in the comments so I can plan accordingly and make videos about the ones that we're most excited about I know I'm personally really hyped on the iterators and set stuff but honestly after seeing Shadow realm that's quickly bumping up my list too so let me know what you like so I can cover it more in the future and until next time peace nerds

Channel: Theo - t3․gg

Views: 82,446

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: nT0j7ze5jqE

Length: 39min 2sec (2342 seconds)

Published: Tue Apr 23 2024