ESNext: Proposals To Look Forward To

Hi, ES Next proposes to look forward to. My name is Bramus and we're at Yes Nation. So, let me just focus the correct screen here, yes.

So if you take a look at the ECMAScript timeline, we see this like this big divide between pre-2015 and post-2015. That's because TC39 is a committee which maintains and evolves the ECMAScript language. They put into place this development process that they started to use to advance the language.

Now, since we're short on time here today, because it is a lightning talk, I will give you the very short version of it. Stage zero is the straw person stage that's basically like, okay, here's a wide ID. I can propose one, you can propose one, everybody can propose one. For your proposal to advance to stage one, then it makes it into the proposal stage. That's basically TC39 saying, okay, we're kind of interested in this proposal. Let's see where this goes. Then by the time your proposal advances to stage two, it is a draft stage, TC39 basically confirms that, okay, we seem to be on to something, let's develop it. So you develop, develop, develop, develop, develop it. And finally, your proposal can make it into stage three, which is the candidate stage. At this point, the proposal is considered to be done, but they require feedback. Feedback from implementers, those are the browsers, and you are still developers. If all goes well, your proposal advances to stage four, which is the finished stage without any changes. So at this stage here from stage three to four, only critical changes are allowed to be made. So stage four, the finished stage, everything checks out, and then at the January meeting of TC39, the January meeting of TC39 holds, they will gather all the stage four proposals, and then they will put it into the next ES release. So this January, that we just had, then the ES 2020 release was collected.

So let's take a look at a few of my favorite proposals. The first one is optional chain. This is already part of ES 2020, and I like it a lot and I use it a lot personally. We have this object right here, message with a user and so forth on there. If we select the first thing from it, it is outputted, no problem there. Now say we select something that doesn't exist, for example, a last name, we get back undefined. We can add default value there, like a default file back in case it is falsey. What I use there is a short circuit logic with an or. So here in this case, anonymous will be returned.

But this is not 100% covering all scenarios. For example, if we select meta.publicationDate, we don't get back undefined, we get back an error. Can I read property publicationDate of undefined, the undefined being here, the message.meta is undefined, so we get an error.

How can we fix this? Well, enter the optional chaining operator. Well, of course we have some workarounds. I don't recommend you to do those. They are really nasty workarounds, but the optional chaining operator, that's actually the solution that makes it into the ECMAScript language. It looks like this. It's a question mark and the period.

How does it work? Well, it says the operand. If it sees one, it's gonna do a little check. If the operand at the left-hand side of the optional chaining operator evaluates undefined or null, then the whole expression evaluates undefined. That's the rule. Message, that's undefined, so it continues. The next time it encounters the optional chaining operator, it's gonna check message.meta. Is that undefined or null? That is the case here. The whole expression is gonna evaluate to undefined, undefined or the new date, ISO string. We get back actual date here on screen. Do note the operator is spelled question mark period. It's not just a question mark. You can also use it to do property access or to call functions.

Then no coalescing. We saw this right before. We use the operator to check if it's null or undefined, but there's a problem here because we do message.settings.show splash screen. That is false or true. That yields true, but we do wanna see false there. This is where the no coalescing operator comes into play. It's like this and it will yield the correct result. How does it work? So the double question mark is the operator. How does it work? Well, it serves as an equality check against null or undefined.

So if thing on the left-hand side is null or undefined, then only the thing on the right-hand side will be returned. So here we get false, double question mark, true. That will yield false, which is the correct result.

Cool. Logical assignment. That's also a nice one. This is stage three. It's seeking advancement to stage four on the next meeting. That's in July. So it's probably gonna be ES 2021.

Say we don't have a value for options.foo. Well, we can use our null coalescing operator and their option.foo double question mark bar, but this always does a right. Options.foo will either be assigned or bar will be assigned to option.foo. So we always have a right there. Logical assignment operator, they look like this. The logical assignment looks like this. So it's question mark, question mark equals bar. So if options.foo is null or undefined, it will set the value of bar to that variable. It also works with or, it also works with and. A really nice feature. This is gonna save me some time when writing JavaScript.

And decimal, let's count to zero to three. This is a nice one. If we add 0.1 and 0.2 in JavaScript, we get back 0.30004.com. Hmm, weird. Is this a fault with JavaScript? No, it's not a fault with JavaScript. It's a falling computers. Basically, they're bad at falling point math. There's this wonderful website with a magnificent URL, 0.30004.com, that does this for us. It explains it for us. So what's the solution there? Well, the solution is to add the new decimal type. It's this, the m-suffix. So the decimal 0.1 and decimal 0.2, if you add these, you get back the decimal 0.3, which is the correct result.

Stage zero, by the way, I don't know where this is headed. Then stage one, the cancellation API. Say we have a promise here and we call it, we call this function with the promise inside there. First, it's a log promise at start, and then after 2.5 seconds, it will be promise resolved in sunscreen. But how can we cancel the execution? There's no real way to do it. Well, the solution is the cancellation API, stage one. Do note the syntax is about to change, but this is how it looks. Basically, it consists of three steps. One, you pass in the cancellation token. Then two, with that cancellation token, the first thing you do, well, if it's already canceled, you stop the execution. You then register a callback when the cancellation token, the cancel method, is being called. This function will be executed, and then right before it resolves, you unregister your callback. The usage looks like this. So you make a cancellation token source. You pass it into your function. Then, for example, after one second, you call source.cancel. So this will be promise started. And then, after one second, the promise will be canceled, which is the correct result.

Side note with that, the abort control, it's something that already exists. This is a vendor-specific solution. This is not part of ECMAScript or JavaScript itself. This is something you can't already use in browsers, but it's not part of the ECMAScript syntax.

And then the last one, pattern matching, which I'm going to talk about. Say you want to calculate the length of a vector. Well, depending on if it's a 3D vector or a 2D vector or something else, you have to use a different formula. x, y, and z, you have to use formula one. It's a 2D vector. You have to use another formula. If it has a length, you have to return the length. But what if you would like to just basically match the shape of it? Well, this is what pattern matching does. It says, look at the shape of vector. When there is an x, y, and z present there, use this formula, x and y, the other formula. If it's spreadable so it has a length, return the length, else true and error.

This is nice. A use case, for example, fetches. If a 200 is returned, if a 400 is returned, you can just look at the shape and then do action based on that. And this, my friends, is just a selection. There's a lot more stuff to come in ECMAScript. Proposes going from stage zero to stage four. They're all in the open, so you can check them out in GitHub, tcturr9. They work in the open. Or you can also check my blog, bram.us, or use the short link here below to see a few proposals that I wrote about.

I want to thank you for your attention. My name is Bramuis. I also have a blog, bram.us. It's also on Twitter, at bramusblog. Thanks.