6 New JavaScript Proposals

It's a great name. Looks really cool.

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.

virtual environment.

make your own It's a fancy way to say you can concatenate multiple iterators together into a single

you'll want to check out Sentry at century.i0forward/

DOM, of data. And often, you will want to loop over

syntax.

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.

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/

third party code, you're importing some testing code,

global scope

in the browser is essentially

of

So a shadow DOM So if you don't want that to happen, you have to switch your require syntax. Right? You have to switch from, evaluation or lazy module initialization.

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 APIs have been making their way into Because it's floating.

in JavaScript without having to an issue with JavaScript you'll know that if if like Scott said, if you are adding up numbers, there I have a.

have 1 global scope. And if those things monkey with the global scope Mhmm. Then third party code into it. They have a whole bunch of different examples of, like, 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,

context that cannot be tainted by

virtual 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.

Give me Shadow Realm.

move to another execution context.

And if you want to see all of the errors in your application,

syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

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

Next 1 we have here is deferred module So, like, anybody can propose something at stage 0, and then one is under considers

deferred evaluation it's not just a 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 what is the period in regex? It matches, like, 1 or or more characters, something like that. So, you just want it as text. So now with regex dot escape, it will simply take the input 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.

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

required. Right? It goes through the entire require tree, and as soon as it loads, that code will actually run.

This is kinda cool because if you have a module And there's, you will have to escape that period because a period or a forward slash or any of those characters new little nuggets and new little, like, handy things added to 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

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

will simply allow you to mark where plus and what it does is it looks for both a period and or you have a collection of data in JavaScript,

get run on initialization.

I mean, I would just use the just normal the

low stakes. It does seem nice. I honestly had never

what are your options? Probably what would you reach for, Scott? So that is in stage 2.7. Next 1 we have here, shadow realm.

Now the reason why it's sum precise

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.

heard of this. So

a more intense operation than just the generic sum.

it's kinda that's what I love about doing these episodes because

and not

normal math inside of the normal operators and then just truncate if the

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

3. It seems pretty,

assurance

that the sum that you're going to be doing will be precise.

in the last year or 2, we've been getting a lot of these helper methods a just the regular JavaScript DOM API. So you don't have

So giving you that control

you might be thinking, yeah. That's a that's an array, Wes. We have that already. Mhmm. However, is that oversees when you have a function where they've been clawed back both at 2.73, will also happen, but there are many cases regex looking for like, for example, in the syntax website, I have a regex that looks for the end of a sentence, goes lower level. It has an algorithm behind it, and you're not gonna get those LOL.

might see a change. But, again, I think a lot of these kinda So this will allow you to to do that. Some other examples, template libraries, code Bos segmentation, mean something to a regex, whereas it just, like, short shorted it to to reduce, but, like, Exactly.

would be great. Next 1 is proposal Peach is my all time favorite fruit. It is my favorite flavor.

existing

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, that's a good question. Why is it a float? Why is a floating 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 sending data from your regular

iterator

node list. There's lots of different types of iterators in JavaScript that is essentially a collection Window.location

iterators.

and that kinda sounds like it kind of is what it sounds like. It allows you to create iterators by sequencing

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.

sequencing, super reliable in terms of being exact. And Yeah. Some precise gives you that

the that does the exact same thing with, regex They'll often, like, be proposed to at a at a meeting. It's kinda interesting to look at the slide decks

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, execute the code in that thing until Yes. It is actually needed. So, again Give me that. One of those handy dandy little things.

in your iterator. And we see a lot of people what is iterator sequencing? other things. So why might that be useful? Well, if you have global scope on something, if you're importing some of those meetings because often those are where the initial ideas sort of start.

Okay. And that is what we have. That one is currently in stage 2 right now, so we Because decimal point can float to different positions within the number representation, 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 on on the iterator it will escape those for you. So at a very basic level, if you are writing a, the proposal, and nice. So what is promise dot try is is equal to 0. So, like,

iterator sequencing.

Why would you use this? Yeah.

So is the committee that

if you have a sequence of values, you can say, okay. This is gonna happen. Usually, stuff at 2.7

These are just going to be things that are upcoming in JavaScript

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.

then you can put your function in there that will that will give it to you. But this promise Scott try to a on demand import inside of a function, a new line.

is nice. And what if you could use the Scott catch API So the idea with the shadow realm

these things are not you JS equal to h t p s 0.1 plus 0.2.com, a import as deferred, meaning that it will not

However, they are Because it has that is cannot be tainted by anything else in there. You sort of have your own little point number called a float? Yes. LOL JavaScript. 0.1 plus 0.2 equals here. What is the thing that everybody uses here? t c 39 yeah. Big fan. I I think that that will probably make it. It's currently in stage

that may or may not each of those items 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.

to it. And all of the use cases out there. And then there's 3, which is has been pnpm recommended for implementation.

groundbreaking.

the Scott catch API

And in that case, I put a period in there, and I have to escape the actual period because

Next one is proposal regex escape. Now oh, man. Regex, one of those things that

Wow. That's nice enough. Really simple utility. You Node, that's the type of thing that I,

anything to make projects easier for me. Absolutely. Yes.

like, a period in it,

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

that you want to put into a regex, but if that I just tell them to write this code.

I need because I I go straight to chat GPT for.

Can you tell me what regex escape does?

Yeah. So often, It seems like the promise API just keeps getting,

to JavaScript. So and allow you to 1 is under consideration.

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

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, 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 I guess, 5 stages Like Scott says, some of them are at different stages of the,

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?

I'll show you this real quick of, like, what are the stages of getting something added

consideration.

Generally, once something hits 3, 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, sandbox where you can run everything, but it is still part of the actual DOM. Whereas a shadow realm is a whole JavaScript execution DOM virtualization.

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?

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 you will have a string prototype Floating point numbers are yeah, you don't have to escape. This will escape it for you. That's it.

2.7. I don't know if this is new or not, but there's quite a few in 2.7.

Yeah. Float.

which can be an issue. So this that you can go through. 0 is just a proposal.

just for 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, 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

use a fixed number of bits to represent a wide range of values 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 you can create your own DOM the same set of APIs, and sometime and there's also, like, this expense

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

0.2 allowing the numbers to have a wide range of values.

The classic. 0.1

and you put it in, and it goes to a website

Let's find this. There we go. Oh my god. That's so funny. Every time somebody LOLs this, 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

had dot sum the top level import

it could be not very precise, is simply just a native API to do that type of thing. So So I kinda wish that we and then 4 is it's part of the language. Yeah. Famously, decorators clawed back.

with the decimal point allowed to float to different positions.

explaining how floating point math and how it is not web workers or something like that. But they are you can essentially 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, 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

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.

I really like it. Big fan.

Oh,

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 And then it goes into 2.

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

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? just down the street from me. I could walk and get some Pepsi peach today. Alright. After this.

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

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.

That way, you can either potentially

that you should probably know about now.

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.