With the yearly ECMAScript releases (ES2015..ES2019) of a lot of things have changed in JavaScript-land, and there's even more to come. This talk takes a look at a few of the newest (ES2020) and some of the upcoming ECMAScript features, which (hopefully) will become part of the ECMAScript Language Specification in the near future.
ESNext: Proposals To Look Forward To

AI Generated Video Summary
ES Next proposal stages include straw person, proposal, draft, candidate, and finished. Optional chaining and null coalescing operators are solutions for handling undefined and null values. Logical assignment and null coalescing operators are seeking advancement to stage four. Decimal type is introduced to address floating point math issues. Cancellation API and abort control are solutions for canceling promise execution. Pattern matching allows matching the shape of a vector and performing actions based on it.
1. Introduction to ES Next and Proposal Stages
Hi, ES Next proposes to look forward to. My name is Bramus and we're at Yes Nation. TC39 is a committee which maintains and evolves the ECMAScript language. They put into place this development process to advance the language. The process consists of several stages: straw person, proposal, draft, candidate, and finished. At the January meeting of TC39, the stage four proposals are gathered for the next ES release. One of my favorite proposals is optional chain, which is already part of ES 2020.
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.
2. Optional Chaining and No Coalescing Operators
But this is not 100% covering all scenarios. We have some workarounds, but the optional chaining operator is the solution that makes it into the ECMAScript language. It evaluates undefined if the operand is undefined or null. The no coalescing operator serves as an equality check against null or undefined.
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.
3. Logical Assignment and Null Coalescing
If the thing on the left-hand side is null or undefined, the thing on the right-hand side will be returned. This is stage three, seeking advancement to stage four in July. The logical assignment operator, represented as question mark, question mark equals bar, sets the value of bar to the variable if options.foo is null or undefined. It also works with or and and.
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.
4. Decimal Type and Floating Point Math
If we add 0.1 and 0.2 in JavaScript, we get back 0.30004.com. Is this a fault with JavaScript? No, it's not. Computers are bad at floating point math. The solution is to add the new decimal type with the m-suffix.
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.
5. Introduction to Cancellation API
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.
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.
6. Abort Control and Pattern Matching
The abort control is a vendor-specific solution, not part of ECMAScript or JavaScript itself. Pattern matching allows matching the shape of a vector and performing actions based on it. It's useful for cases like fetches. ECMAScript has more proposals from stage zero to stage four, which can be found on GitHub or my blog.
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.
Comments