Professional JS: Features You Need to Know

Language Enhancements

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Professional JS: Features You Need to Know

Check out a free preview of the full Professional JS: Features You Need to Know course

The "Language Enhancements" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano discusses language enhancements that have been introduced after ES6. He covers topics such as the global `this` object, trailing commas in arrays and objects, optional catch binding, converting a function to a string, and changes in class declarations.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Language Enhancements" Lesson

[00:00:00]
>> Maximiliano Firtman: So, it's time to see what's new after ES6, but in this case, we won't be covering features by ECMAScript version, because sometimes it doesn't make any sense. You won't remember if it's ES2019 or 2023. It doesn't really matter a lot, mostly if you are going to be using modern browsers or a transpiler, okay?

[00:00:24]
So we will just cover everything after ES6 group by topic, okay? And I will mention here and there, okay, this is from 19, this is from 20, but it's not really what's important. So let's start talking about language enhancements. Here, we will talk about some small changes, okay, it will be really, really straightforward.

[00:00:48]
The global, this optional catch binding, function to a string, new operators, actually we have a couple of new operators. Some of them will be very niche purposes but some others will become your new best friends, class declaration some changes in class declarations that are actually pretty good and also weird.

[00:01:16]
So at the same time, so you will see. Changes on the object class, changes or additions to working with the strings, and numbers, okay? So, let's jump in. Now, we'll go back to our interface here, and I'm going to load first from Language Enhancement, GlobalThis. So, remember I mentioned before that based on where we are running JavaScript, the global object is different.

[00:01:49]
It can be self on workers or service workers. It can be window on browsers or global on Node.js. If you are creating global variables or functions, those elements are actually tied to a global option. The problem when you're writing cross-platform JavaScript is that it depends if you're running on the server or if you're running client-side, that global object is just different.

[00:02:20]
Well, it can be window, it can be global or it can be self, okay? So now, from ES2020, we have something known as GlobalThis. So we can replace everything with GlobalThis and on every platform is always the global context, is just that. Okay, so it's a pointer created in ECMA Script directly that points always to the this global object, not matter the platform, is just that, nothing really more complicated than that.

[00:02:56]
And that makes our cross platform jobs script code better and cleaner because then we don't need to start asking if this is in the browser, then use window, if this is in Node.js, use global. Okay, it's just that, GlobalThis everywhere and it will work. Trailing commas, also something really straightforward.

[00:03:23]
From ES2017, actually 2017 was a version that didn't add a lot of things, and this is one of those things. We can add trialing commas at the race, add objects, be careful because this is not done JSON compatible. So it works in JavaScript but it's not validated against a JSON schema.

[00:03:47]
So if you're trying to do JSON parse, or if you're trying to read that with other language isn't gonna work, okay? But it works in JavaScript, and it also works for a function arguments. So, why this is useful it makes things simpler at least, when for example you are using multilines and then you start changing the order, doing things like that.

[00:04:12]
So if you have a trailing comma, you don't need to always remember that the last element doesn't need the comma. And then, I mean, when you're doing this without the trailing comma, you start creating problems in your syntax that you need to add the comma here, remove the comma here, and so on.

[00:04:30]
It's just that, nothing really important. But it's safe to add trailing commas now here. This is interesting because this was making a lot of problems with linters. A linter is a tool that you use that will give you hints or warning messages, for example, when you are not using a variable.

[00:04:54]
I mean, we know that every time we do try-catch, we should do something with the error, we should be doing something. Logging the error, retrying, okay, but if you're a developer, you know that there are some situations and sometimes we are lazy. And yeah, in the catch, we just do nothing, okay?

[00:05:18]
But it was mandatory to create a variable for the error, it was mandatory, okay? Well from 2019 from ECMAScript 2019, this is optional. So we can just remove the error object declaration and it work. Of course, we won't get the details of the error, okay, but it's optional now.

[00:05:47]
We don't need to create a variable that then a linter will complain that we are not using. It's like, hey, you have a variable that you're not using the variable, something may be wrong here. Well, now optional catch binding will let you override that problem, okay? Small changes that makes the code cleaner, okay?

[00:06:09]
Function to a string, actually, I don't think it's really useful, okay? But now when you have a function, you can convert the function to a string and you say, why do I want to do that? Well, when you convert the function to a string, what you get is the actual text of the function, that you may want to eval or run in a different context.

[00:06:33]
So it has to do with reflection APIs. So you can get the text, the actual source code of the function and try to execute that in a different runtime or if you're doing multi threading, things like that, actually it's not really useful, but that wasn't available before and it's available from 2019.

[00:06:56]
>> Speaker 2: So obviously differs in the way it's structured, but with this offer other benefits compared to just like JSON stringify for serialization to JSON.
>> Maximiliano Firtman: But this is only for functions.
>> Speaker 2: Okay, sorry.
>> Maximiliano Firtman: So it's not converting data, this is just giving you the source code of a function, having the function as a variable, having the function as a reference.

[00:07:24]
>> Speaker 2: I didn't check the prototype chain, sorry.
>> Maximiliano Firtman: That's fine, that's fine, but it's function only, okay? So that's why I say it's not something that you would probably use on a daily basis for sure.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now