 Hi everyone, I'm Santosh, I'm from Hyderabad, I work as a senior development engineer at Pramati Technologies. So as a developer, we should also have a side interest which is also related to development, which should also be related to development. So that's where I've been involved with Mozilla for the past like six years or something. I started getting involved with Mozilla like when I was a student, I was a student ambassador and now I'm a Mozilla tech speaker where I go to conferences, events and meetups and talk about what I learn at work as a web development engineer. So that's what I do. And at Pramati, we build products and technologies for multiple companies. We have our own in-house products. So that's where I get a chance to get involved with more than one product and learn something more than that. So today I'm going to talk about optional chaining and null coalescing. So these two topics, like I'm going to repeat the same question. How many of you have read the abstract on the website for this talk? One hand. Yeah, a few hands. So yeah, so this is something like when we talk about like JavaScript, so we directly like think about framework, right? So but at my previous job, I was learned to do some things using vanilla JS rather than a framework. That's where I have been involved with to like completely check like what is new with JavaScript and what is going to be released next in JavaScript. So this is my agenda. I'll be going to talk about optional chaining and null coalescing. These are the two only two topics which I'm going to cover. So I'm going to talk about some usage scenarios and what hacks I generally use right now at this point before these features are released. And what is the current status of these two proposals and how I can start using them already before even like getting released into some EX9 or ES10. So this is something I mean many must have gone through it, right? So these are the top three errors in JavaScript. Either you might have worked on your React code base, your Angular code base or view code base. So I think everyone must have went through this error, right? So these are the top three errors according like in any code base and the three errors are common. It's like we are trying to access something which is not there. So often in all our web apps or websites, we work like most of our data we try to get from an API and we assume, okay, so this must be the structure of the data object and we try to access something. At a time, maybe of any error, so it might not be available. So at the time, it throws out an error and these errors you might have like you will definitely see if you're working with new code bases because someone know how to run it but you don't know how to run it initially and you will run through these kind of errors. So optional chaining and null coalescing are two features which actually fixes, helps us fix these errors. And coming to optional chaining. So this is what the MDN website tells about optional chaining. So we use the question mark dot syntax and if we have a JSON object and if we are trying to access any property in the nested object, it will, if there is no object present then it will return undefined and if we are still trying to access a property of undefined, it shows like some property of undefined is like not there. So that's when this optional chaining comes into picture. Before actually accessing, it actually validates if there is a property for that particular object. And let us consider this example. So I have a person object which has a name and which have an object called as pets. So in the first like log, I'm like just displaying the length of the first name. And in the second line, I'm trying to display the length of the last name, but it throws me an error, like cannot read property text of undefined because when we say person dot name dot last, it gives an undefined because it's not there. And we are trying to access the text property of that undefined, which will throw an error. So this reminds me of a JavaScript pun which I came across recently. So how do you comfort a JavaScript bug? You just console it. That's what this is like. So it throws an error to us instead of like and for this one, we have to handle it in multiple ways. So this is the hack I personally use. So I check each property until the last property and see if it exists. So if it exists, then I will use the property and I'll check first name and I'll see then if there is a like last property in that point. Yeah. So there is a last property in that. And if there is a text property in last, and then I'll calculate the length at any point of time if some property doesn't exist, like in this case last, so it doesn't throw an error. It will just log me and undefined. So you see this code, right? So this is the current hack which I usually use. But with optional training, what happens is there is a like a new operator, question mark dot, which is available in JavaScript. So I can simply use it in one line and it doesn't throw any error anymore. The same code which I was showing in the slide one doesn't throw an error if I use optional training. And it's not only for object. If, for example, if I'm trying to access something in arrays or functions, so I can use the same thing here. Even though the length of my like arrays are two, and I can access only up to like pets of one. But if I'm trying to access pets of two or pets of three, it throws an error. But if I combine it with optional training using this question mark dot of pets of three. So it doesn't throw an error. It just locks and undefined instead. And the same thing can be used for functions as well if we have any functions in any closures or in any of the objects. So you can use optional training to first validate the existence of the particular function and then actually call it. And coming to browser compatibility. So the current stage of optional training according to like TC three nine which actually defines the proposals for JavaScript. It's in stage four. That means the development is completed and it can be called anything like ES nine or ES 10, whatever you call it in the next version. It's ready to be included. And so it's available in Chrome 80, but it's in experimental version. I'll show you how to enable it in experimental JavaScript. And for Firefox, from Firefox 74, it's available. And for OPERA, it's available from 67. So once it is released as an ES proposal, so then other browsers also jump in and they will try to include this feature in the next upcoming releases. So but it's not so it's JavaScript. So we can do anything we want, right? So even before releasing, if you are any one of you are using table compilers or transpilers, so you can there is a plug-in already available called this plug-in proposal optional training and start using it in your table code. So this is the link for the plug-in. And if you want to quickly try it, you can use be able CLI and just use this command in your terminal. And you can like compile the script.js to build.js. And if you want to integrate in your package.json, you can write your own script and do that. So this is about optional chaining. And how does the code compile to? So the same thing, the one which we were using optional chaining. So this is how the be able, if I run the same be able CLI command, so this is how it like transpiles to. So it will check if person is null and or if person is undefined, what zero is undefined. There is also an interesting blog post about like why we use void zero instead of like checking with person equal to equal to undefined or type of person equal to equal to string of undefined. So it checks each property. So now it stores person.name in person dollar name and then it checks for both. And then again, it like checks for last. And this is what it does. So whatever I was doing in like the hack I was using, it is doing the same thing in different way. And current state of this one I already talked about it's in stage four on TC three, nine proposals. And enabling it in Chrome. So since it is an experimental feature, you cannot use this optional chaining. If you want to quickly try it on your console in your DevTools. So go to Chrome Flags and enable experimental JavaScript. So then you will be able to like start using optional chaining in your consoles. Yeah, so that's about optional chaining. And let's talk about null coalescing. So it's something like which you might have used. Like I mean, not null coalescing but something which resembles similar to this null coalescing. So you will use question mark, question mark operator for this. And what it does is if you are trying to do some operations on null and undefined and you don't want to do that particular operation for these two values, then you will assign a default value. So that's when you use this null coalescing. So hack I generally use. So this is something which I use. I use this R operator. So if my product is like null or undefined, so I'll, I has to check like my product ID is null or product ID is undefined. So instead of doing that multiple checks, I'll use this R operator and assign an empty string. So what happens is if my product ID is zero empty string NAN or null or undefined. So it comes to like an empty string. So I can only compare using one condition. If param is like, if like, sorry, if product ID is empty string, so then like it is not empty string, then do my thing or else don't do anything. So this is another thing which I was talking about. The initial one also considers zero NAN and also empty string. But my product ID might be zero, right? So at the time I cannot use that R operator. I have to like do this like check like if it is not undefined or if it is not null. So then I can do my thing. But that becomes challenging if we have to compare like multiple properties into multiple, like multiple properties in the same condition. So that is when null coalescing is actually very helpful for us. So this is how I do it, but the hack I usually use, but it will also consider the zero empty string which I was talking about. But with null coalescing, I can do this. So it will only be considered if my value is null or undefined. It will only consider for those two values. My zero will be still valid, has a product ID. And there is a challenge with this. You cannot like chain it with our R operators which I was using in my hack. So I have to use my these brackets, circular brackets and then do the optional chaining if I want to do something. So coming to browser compatibility, it's available in Chrome 80 and Firefox 72. And maybe once even this proposal is also in stage four. So once it is released as an ES next, other browsers will also attempt to include it in their standard. And this is a Babel plugin which is available for null, nullish coalescing. So if it is not yet released in ES proposals and you still want to use it. So there is already a plugin available in Babel and if Babel is your transpiler, a trans compiler. So then you should start using it. And quick try the same thing. You can use Babel CLI and plug into you do that. And you can write it in your script tag to use that to generate the bill. And what does Babel trans compile to? So it does the same thing. So it will like check if my like whatever my variable is either null or undefined. And if it is either of that, then it will assign like my unknown, like whatever default value I'm giving it. Or else it will like consider the variable value. So this is in stage four of TC 39 proposal. So it's ready to be included. And you can see it in any of the ES next releases. And finally a combination of how I use both of them. So consider this. So I have a function called as gate of data, which returns me a promise. And that one has a data. And that data has both my first name and last name. So at this point of time, without optional chaining and null coalescing, this is what I do. And this doesn't work again. If my name is expected to be zero or empty string, right? So at that time, like I have to again do like, I have to compare if it is null or undefined and do all those calculations. I have to manually write them. But so with the, so this is one example. So if this is an example from MDN website. So consider the people card which J was talking about in the initial slide. So if the place city is undefined, so I can, I have to show unknown city. So with null coalescing, I'll like directly compare it and get the unknown city. And do that. And so the initial before slide, which I was doing it. So using null coalescing and optional chaining, I can like use it in like, I can do it in like two lines. So there are some advantage. So I'm skipping it because I have less time. So there are some advantages and disadvantages as well. So bundle size will surely go up. So if you have this object and if you have trans-compiled using babyload type script. So that bundle size has increased like from 196 bytes to 971 bytes. That is like four times more than what the initial code I actually wrote. So there is obviously a performance cost when you have to use it, right? Like if something cool comes up in JavaScript, it's definitely gonna mess up something else. So this is what exactly happened here. So there are two things which you should consider. If the data object is something the code which you write. So you already, you can make an assumption that, okay, this property exists in my data object. So there is no need to use that optional changing or null coalescing. But if there is something like, if your data object is something that comes from the backend, then at that time it's like, yeah, you should actually use this one to avoid the top three areas which I was talking about in the first slide. So this is the performance I was talking about. So it's like performances like 40 times slower because of my trans-compiled code. This is also from one of the tests in jsperf.com. It's already available there. So this is what internally happens. It's 40% slower. So use it like responsibly. Like that's what I could see. Yeah, I think I'm done. Thank you for this opportunity. Thank you, everyone. Maybe we can have one or two questions if we want in just one minute. Anybody having questions? Yes. No, at that time also it would be the same thing because you are writing the same trans-compiled code in your JavaScript code directly, right? So, yeah, even that one will be also a performance. Like it will be off less. So it's not a decent way. It's like when you should actually use it. So if the data object is from your code, then it is a disadvantage because it's going to trans-compile to a lot of code. You already know what your data object actually looks like in your code, right? At that time, there is no use case of using optional chaining. If the data object is something from an API response, then you don't know what is the format of it. At that time, optional chaining should be definitely used to avoid the errors which was discussed in the initial slide. Okay, so there is also the link of where I got this analysis from. So you can actually see that. There is a blog post link here which you can access it. The slides are already on the JS for website. So it cannot read properties, something of undefined. And undefined is not an object and null is not an object. Yeah, I cannot hear you. Yes, yeah, no, but even at that time, internally JavaScript compiler actually does that, right? So at that time also it would be the same thing. So you should decide when you should use that feature or when you should not. Performance-wise, yes, bundle-size-wise, no. Yes. Which set or get? Yes. No, I think at that time, it stops validating at certain point, right? So whatever you want to set, I think it assigns at that particular point. I should, we both will try it together after this one, yeah. Because it won't go into the, it won't go into the deep nest adoption. Yeah, if it's there, it will go. If it is not there, then it stops at that, validating at that point. So it might not, like, set it, yeah. Positive point for you later. All right, thank you, Santosh, for your talk.