ECMAScript & New Features

[00:00:00]
>> Maximiliano Firtman: Actually ECMAScript is officially, or legally the ECMA-262 that's kind of the loan number, okay, within the Ecma organization. So and it's creating new versions now once per year. So ECMA-262 is actually ECMAScript, not matter the version. And then we have it in different versions. For example, right now, as of today, these are the versions.

[00:00:26]
We have from version, we have even older versions. But let's say that the latest one that appears in the website, it's the 13th edition. Actually, we have also 14th. But for some reason, it's not on that list. So every time you see ECMA-262 is actually JavaScript, okay? ES, ECMAScript, JavaScript, we're just talking about the same thing.

[00:00:52]
And the technical committee, this is actually also a consecutive number within the Ecma foundation, it's 39. So that means that when you see TC39, it's the technical committee. It's just a bunch of people from companies that have an online group, they have meetings, and they propose new things.

[00:01:18]
They vote and those are the ones that are defining the new things that will appear in the language, okay? So, then ECMAScript, it's a standard for a scripting language. The technical committee is TC-39, and it's basically the JavaScript used by browsers or Node or ECMAScript engine. So it's just the same, okay?

[00:01:42]
But there are other engines as well that are using ECMAScript that are not JavaScript. For example, ActionScript. It's kind of dead these days, but ActionScript was the language behind Flash, and also it's still there for Apache Flex. That was originally Adobe Flex and then Apache, now it's open source to create rich apps client side but with with a flash player.

[00:02:08]
And it was using ActionScript. And ,NET has today JScript.NET that it's a .NET language, but based on ECMAScript. And as we mentioned before, since ES6 or ES2015, we will get into that difference in a second, we have one version published per year, okay? As developers, we cannot specify which version we want to use.

[00:02:36]
It's up to the engine where the script is going to be executed. The engine can be the user's browser, or it can be the node engine. Maybe if you're using Node, you have more control because the version of Node that you have, or you are using, will actually define the version of ECMAScript that will actually be executed.

[00:02:59]
But on the browser, of course, you don't have control because it's up to the user. So what happens if you use syntax of an ECMAScript version that is not supported on the engine running the code? I mean you are using something new and fancy but then your user is on an old Firefox and it's not supporting that feature.

[00:03:21]
So there are two possibilities. It depends on the nature of the new feature that you're using because sometimes the new feature is a new method available on objects or available on arrays. In those cases, you will get a runtime exception because, of course, that method is not available in that browser.

[00:03:44]
But sometimes it's a new operator. It's something new in the syntax itself. Like, for example, we have a new operator that will let you make the power of. So two to the power of three. We will see that later. Well, it's a new operator, it's double asterisk. So if you run that on an older engine, you will get a syntax error.

[00:04:10]
And let's say that syntax errors are worse than runtime exceptions. Because when the browser, when the engine actually, finds a syntax error, it stops rendering the rest of the JavaScript code, okay? So to know the ECMAScript version that your engine is using, you can use these tools. For node, there is a website, node.green.

[00:04:39]
And for browsers, caniuse that's a website that we typically use for browser APIs, has also a section of ECMAScript. Okay, so let's see this in action. This is node green. Actually, the website is confusing at first, okay? So because we have a lot of information here, but you will see here different columns for node versions.

[00:05:03]
So these are the node versions. So if you are in node 2014, you can see here all the compatibility table. And then you have all the features available in ECMAScript. So you can see that modern Node.js is currently running most of the stuff, everything seems green, right? So if we scroll down, we will start seeing some red at some points because these are new things.

[00:05:30]
For example, ES2024, okay, so things that are not yet at the time of doing this workshop is not yet published. So ES2024 is not yet published. So yeah, here you can see that from Node 20, most of the ES2024 features are implemented, but not Unicode 15.1, for example, okay?

[00:05:58]
So in case you have a question about your Node version, you can go to this website and check that. Now for the browser, you go to, can I use /ecmascript and you will find a lot of subgroups here from ECMAScript 5. And then we have version by version, for example, ECMAScript 2017, 2018, 2020.

[00:06:26]
And here you can go to the feature support list where you will see feature by feature on ECMAScript 2020 which versions are implementing that feature. Because sometimes a browser might partially implement a version of ECMAScript. Okay, it's not so common, but it happens a lot of times. Okay, makes sense?

[00:06:55]
So you go here and say, okay, from 2020, we can see that right now 96% of the current market share of people browsing the web can support that version. There are still IE users that, of course, is red. So there are still people on IE. Opera Mini, this is a mobile browser.

[00:07:20]
But most of the things are already compatible with 96, 97%, okay? And also you can customize here and say, I want only mobile, only desktop or you can see the information only for one region or country as well.