ESNext: Proposals To Look Forward To

Hi, ES Next proposes to look forward to. My name is Bramus and we're at ES 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, that's 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 idea. 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. And by the time your proposal advances to stage two, it is a draft stage. TC39 basically confirms that, okay, you seem to be onto something, let's develop it. So they 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, us 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, it's 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 fallback in case it is falsy. 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 meta, 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 chain 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 going to do a little check. If the operand at the left-hand side of the optional chain operator values undefined or null, then the whole expression evaluates undefined, that's the rule. Which that's not defined, so it continues. The next time it encounters the optional chain operator, it's going to check message.meta, is that undefined or null? That is the case here. So the whole expression is going to evaluate to undefined, undefined or the new date to isostring. So we get back an 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 like to call, to do property access or to call functions. And null coalescing, so 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.showSplashScreen. That is false or true, that yields true, but we do want to see false there. This is where the null 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 the 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 back 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. It's in July, so it's probably going to be ES2021. Let's say we don't have a value for options.foo, well, we can use our null coalescing operator in there, options.foo, double question mark, bar. But this always does a write. Options.foo will either be assigned to options.foo or bar will be assigned to options.foo, so we always have a write 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 going to save me some time when writing JavaScript. And decimal. Let's count to 0.3. This is a nice one. If we add 0.1 and 0.2 in JavaScript, we get back 0.300004.com. Hmm, weird. Is this a fault with JavaScript? No, it's not a fault with JavaScript. It's the falling computers. Basically, they're bad at floating point math. There's this wonderful website with a magnificent URL, 0.300004.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, the 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 this function with the promise inside there. First it will log promise at start, and then after two and a half seconds, it will be promise resolved at end screen. But how can we cancel the execution? There's no real way to do it. Well, the solution is the cancellation API, stage one. I do know 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. Then right before the resolve, you can register your callback. 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 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 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's 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 many more stuff to come in ECMAScript, proposals going from stage zero to stage four. They're all in the open, so you can check them out on GitHub, tc39, 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 Bramuisblog. Thanks.