6 New JavaScript Proposals

Welcome to Syntax. On this Monday, Sanity treat, we're gonna be talking about 6 amazing new JavaScript proposals that are, well, they're on their various stages, some of which are at stage 3, some of which are at 2 point something.

These are just going to be things that are upcoming in JavaScript that you should probably know about now.

That way, you can either potentially help prepare for them being ready. Maybe you can learn some of these things ahead of time, or maybe you can even get involved in the discussion about how these things end up actually in the browser.

Pepsi peach. I gotta get one of these, Wes. So good. It's so good. It's they've been, like, having a bunch of weird.

Canada is is known for having, like, weird flavors of, like, chips, but it seems so spilled out into the, yeah, ketchup, but, like, also, like like, off the chain flavors too. You know? Like, we have, like, butter chicken, and that's not really off the chain. Butter chicken is, like, the most white guy ever. But we have lots of, like, very interesting chips, but it's, like, spilled out into pops now. So now I've got Pepsi peach, which I really like it. Big fan.

Peach is my all time favorite fruit. It is my favorite flavor.

Given the option for peach anything, I will choose peach. If it were ice cream, it's peach. Peach is pretty good. Fuzzy flavor. About the fuzzy peach candy? Oh, please. Yeah. Give me give me a whole giant bag of those. Yes, please. But it looks like, Wes, it does look like they have Pepsi peach at King Soopers just down the street from me. I could walk and get some Pepsi peach today. Alright. After this.

Yes. Alright. Well, we've got 6 new JavaScript proposals to talk about today.

Like Scott says, some of them are at different stages of the, the proposal, and I'll show you this real quick of, like, what are the stages of getting something added to JavaScript. So t c 39 is the committee that oversees what language features to add. So they are not in charge of, like, web APIs, which is like like, oh, the fetch is being added to the browser or, web workers or something like that. But they are in charge of, like, core language features, which JS, like, async await and and new variables and how regexes work and, like, stuff like that. Right? And there's, I guess, 5 stages that you can go through. 0 is just a proposal.

1 is under consideration.

So, like, anybody can propose something at stage 0, and then one is under considers consideration.

They'll often, like, be proposed to at a at a meeting. It's kinda interesting to look at the slide decks of those meetings because often those are where the initial ideas sort of start.

And then it goes into 2.

That's when they've chosen their preferred solution, but they still need to, like, sort of chew on it and go through what does the API look like. Is this really something we wanna do? And then 2.7. I don't know if this is new or not, but there's quite a few in 2.7.

They probably had to add a Node new step between 23, and that's why we have that. Yeah. It does seem like the stuff that occasionally in that 2 to 3 range can sometimes feel like the Bermuda Triangle where it just, like, goes in and never comes out. Right?

Yeah. So they're just testing invalidation. So I guess that's like the it's it's implemented. It's Deno, but now we need to, like, make sure that it it passes all of the use cases out there. And then there's 3, which is has been pnpm recommended for implementation.

Generally, once something hits 3, you can say, okay. This is gonna happen. Usually, stuff at 2.7 will also happen, but there are many cases where they've been clawed back both at 2.73, and then 4 is it's part of the language. Yeah. Famously, decorators clawed back.

Exactly.

Yeah. The first one we have here is promise Scott try.

It seems like the promise API just keeps getting, new little nuggets and new little, like, handy things added to to it. And these things are not groundbreaking.

However, they are nice. So what is promise dot try is when you have a function that may or may not be a promise, but you still want to run, you still wanna await it, you still wanna dot then it, and you still wanna dot catch any errors it could possibly throw, which is really cool because the Scott catch API is nice. And what if you could use the Scott catch API for things that were not promises? Right? And Yeah. There's ways that you can go around it now or you can use, like, promise dot resolve and and that will then you can put your function in there that will that will give it to you. But this promise Scott try is simply just a native API to do that type of thing. So yeah. Big fan. I I think that that will probably make it. It's currently in stage

3. It seems pretty, low stakes. It does seem nice. I honestly had never heard of this. So it's kinda that's what I love about doing these episodes because

I feel like I look at this repo all the time of new proposals. Yeah. Never never seen this one. So yeah. And, like, people love the bellyache after things have been added to the language. Yeah. So, like, check it out now. You know? And, also, it's it's interesting to read these because you understand the why behind something. So, for example, the next Node, math dot some precise. Yes. I love this. Yes. If you wanted to add up a list of numbers in JavaScript right now, what are your options? Probably what would you reach for, Scott?

I mean, I would just use the just normal the normal math inside of the normal operators and then just truncate if the if the the number's gone off the rails and added a whole bunch of extra decimals when it shouldn't or whatever. You know, you know, math and JavaScript is one of those things that I guess a lot of people don't realize that it's Scott super reliable in terms of being exact. And Yeah. Some precise gives you that assurance that the sum that you're going to be doing will be precise.

Now the reason why it's sum precise and not some is that they want people to understand that this is a more expensive operation than just Yes. Sum this up. So by putting some precise, it it does feel like, alright. This is a a more intense operation than just the generic sum.

Yeah. I thought that was kinda interesting how they had to explicitly name it that because it could be. So, like, the other alternative is, like, we don't have math dot sum in JavaScript. You have to use a reduce Yeah. Which is kind of annoying to add them all together.

So I kinda wish that we had dot sum just for it just, like, short shorted it to to reduce, but, like, you'll know that if if like Scott said, if you are adding up numbers, it could be not very precise, which can be an issue. So this goes lower level. It has an algorithm behind it, and you're not gonna get those LOL.

Yes. LOL JavaScript. 0.1 plus 0.2 equals here. What is the thing that everybody uses here?

The classic. 0.1

plus 0.2 is equal to 0. So, like, there I have a.

Let's find this. There we go. Oh my god. That's so funny. Every time somebody LOLs this,

I just tell them to write this code.

Window.location JS equal to h t p s 0.1 plus 0.2.com, and you put it in, and it goes to a website explaining how floating point math and how it is not an issue with JavaScript and how it Node. Point math specifically. Like, I I don't understand enough about this. So It it goes down to, like, the CPU. Like, this is just how computers work.

So Yeah. I you know what? If we're being entirely honest, Wes, I don't know if I know why a float is called a float. I don't I don't think I've ever paid attention to anything other than that's how you use decimals.

Yeah. Float.

Because it's floating.

Because it has that's a good question. Why is it a float? Why is a floating point number called a float? Because decimal point can float to different positions within the number representation, allowing the numbers to have a wide range of values.

Floating point numbers are use a fixed number of bits to represent a wide range of values with the decimal point allowed to float to different positions.

Yeah.

Oh. That makes sense. It couldn't Deno that either. Anywhere. Yeah.

So that is in stage 2.7. Next 1 we have here, shadow realm.

It's a great name. Looks really cool.

So the idea with the shadow realm is that you can essentially make your own global scope in JavaScript without having to move to another execution context.

So a shadow DOM in the browser is essentially you can create your own DOM that is cannot be tainted by anything else in there. You sort of have your own little sandbox where you can run everything, but it is still part of the actual DOM. Whereas a shadow realm is a whole JavaScript execution context that cannot be tainted by other things. So why might that be useful? Well, if you have global scope on something, if you're importing some third party code, you're importing some testing code, you have 1 global scope. And if those things monkey with the global scope Mhmm. Then like, a very simple example is if there's 2 variables that both have the same name, then you're kinda pooched. Right? So this will allow you to import third party code into it. They have a whole bunch of different examples of, like, DOM virtualization.

So right now, if you wanna do DOM virtualization, a lot of people will put it in a web worker, which is another context. But a web worker is not the same as a just the regular JavaScript DOM API. So you don't have the same set of APIs, and sometime and there's also, like, this expense of sending data from your regular Dom API to a web worker. Like, you have to cross the bridge. And if you're sending a lot of data back and forth, it could be a bottleneck.

So this will allow you to to do that. Some other examples, template libraries, code Bos segmentation, virtual DOM, virtual environment.

So, again, this is probably not something you're gonna be using every single day, but I I know there is a subsection of developers who work on tooling being like, yes.

Give me Shadow Realm.

Yeah. No kidding. Because it sounds sick. Like, it sounds sick. It sounds like a game. You know? Like, oh, man. I stayed up till 3 AM last night playing Shadow Realm. Yes. Shadow Realm, Shadow Dom, all that stuff. Shadow DOM the hedgehog. I I I love all this stuff. So, yeah, just being able to scope by creating new context is is pretty fantastic.

And if you want to see all of the errors in your application, you'll want to check out Sentry at century.i0forward/ syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head head on over to century.ioforward/ syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

Next one is proposal regex escape. Now oh, man. Regex, one of those things that I I go straight to chat GPT for.

Can you tell me what regex escape does?

Yeah. So often, you will have a string that you want to put into a regex, but if that regex has, like, a period in it, you will have to escape that period because a period or a forward slash or any of those characters mean something to a regex, whereas you just want it as text. So now with regex dot escape, it will simply take the input and allow you to it will escape those for you. So at a very basic level, if you are writing a, regex looking for like, for example, in the syntax website, I have a regex that looks for the end of a sentence, and what it does is it looks for both a period and a new line.

And in that case, I put a period in there, and I have to escape the actual period because it's not just a what is the period in regex? It matches, like, 1 or or more characters, something like that. So, yeah, you don't have to escape. This will escape it for you. That's it.

Wow. That's nice enough. Really simple utility. You Node, that's the type of thing that I, I need because anything to make projects easier for me. Absolutely. Yes.

Next 1 we have here is deferred module evaluation or lazy module initialization.

This is kinda cool because if you have a module where some work is done when the module is loaded, so maybe you create, like, a cache or maybe you go off and fetch some data, that will run as soon as the module has been required. Right? It goes through the entire require tree, and as soon as it loads, that code will actually run.

So if you don't want that to happen, you have to switch your require syntax. Right? You have to switch from, like, this require to you have to put it inside of an actual function. Or if you're using the import, probably you're using ESM import. You have to switch from the top level import to a on demand import inside of a function, which is annoying because then your build tooling might not know about it, you know, and that's a big pain in the butt as well. So the deferred evaluation will simply allow you to mark a import as deferred, meaning that it will not execute the code in that thing until Yes. It is actually needed. So, again Give me that. One of those handy dandy little things.

Yeah. I always I that is always a thing. It's like you do all these imports. You're like, well, this doesn't even get run on initialization.

Why why do I need this code right now? Sometimes it's Sanity. They just have it available.

So giving you that control would be great. Next 1 is proposal iterator sequencing, and that kinda sounds like it kind of is what it sounds like. It allows you to create iterators by sequencing existing iterators.

Why would you use this? Yeah.

Oh, like a so an iterator I I feel like I've explained this a 1000000 times on the podcast, but I'm gonna do it again because, I don't think a lot of people don't understand what iterator is. In JavaScript, if you have a sequence of values, or you have a collection of data in JavaScript, you might be thinking, yeah. That's a that's an array, Wes. We have that already. Mhmm. However, if you want a custom data type or there are other custom data types in JavaScript you have, obviously, we have arrays, but we have maps and sets. You have, node list. There's lots of different types of iterators in JavaScript that is essentially a collection of data. And often, you will want to loop over each of those items in your iterator. And we see a lot of people when they need to loop over, you do the whole spread it into an array or convert it array Scott from or you do something to move it into an array. Well, in the last year or 2, we've been getting a lot of these helper methods on on the iterator prototype so that you don't have to convert it to an array to to even work with it. Plus, like, another benefit of an iterator is that iterator has this, like, cool. You can use, like you, of course, can use, like, a for in or for of API in it, but you can also use the .next API inside of it. Like, it's a generator, and it can also tell you when you're done and return a value from that that iterator as well, which is really, really nifty.

So what is iterator sequencing? It's a fancy way to say you can concatenate multiple iterators together into a single long iterator. So if you were thinking of it as an array, you have 3 arrays of data, and you wanna make them into 1 big array, the that does the exact same thing with, iterator sequencing.

Okay. And that is what we have. That one is currently in stage 2 right now, so we might see a change. But, again, I think a lot of these kinda APIs have been making their way into

into the iterator prototype, and I think we'll probably see it in the next 6 months or so. Wow. Well, I love I love this stuff. It gives me an idea about what's coming even if even if maybe all these aren't entirely useful to me. I think definitely some of them will get quite a bit of use. So, yeah, sick. Alright. That's it for today. Thanks, everybody, for tuning in. We will catch you later.