What can we expect from the new features of JavaScript that will come out in the nearest future? Are there any changes in the syntax? Let’s stay tuned and find out the latest updates that have occurred so far to start using all the features right now.
A long way of changes
If you have heard something about the Ecma TC39 committee regarding JavaScript, you can go to the next section of this article. If you wish to get to know some facts about the long way of JavaScript, we’ll give you some essential information.
There’s ECMAScript appeared to set all the language implementations to one norm and JavaScript is one of these implementations. This happened when the first browsers started to come out. You can find eight versions of the ECMAScript and seven releases as the fourth one was not allowed. Every engine makes the required changes after a new release comes out. There are some engines that require more time to make all the changes for all the new features to fit to one single norm.
Proposal stages
This stage means going through a series of check-ups. If a new proposal has some value, it will be added to the nest edition. Here we have five stages starting from 0. You won’t see such on this page. There are two reasons for the changes to be at these stages. The first one is not meeting all the requirements to move on to the next stage or it has appeared little time ago, so it hasn’t been presented to the committee.
It’s good to never use proposals from the zero stage as there’s no guarantee that they will be less volatile than at the moment. Or you can get a great chance to lose time if the new change is not implemented in the future.
Testing stage
One of the most comfortable ways to see if a new feature is working or not is testing it. As you may often see that code snippets in the books or manuals are not related to the context directly. That’s why we often run the test that’s not about the code made by us but about the language that we use for programming. You can use this approach for any API or the features of other languages.
Transpilers
Have you ever heard about this? If yes, you may skip this section. There’s one question that you may already have in your mind. It’s how we can use new features of a language if they haven’t been implemented. Take a look at the transpilers that can compile JavaScript into JavaScript.
You can use the zero stage proposals for the code and they will be compiled to the executable code. You can use browsers or Node.js for executing the code. How do the transpilers work? You have a code and it undergoes some changes as if you have created it for the older version of JavaScript. Babel is one of the most popular transpiler these days and we’ll show you how to use it.
Setup
All you need to have a good beginning is NPM and Node.js. You may wish to go along the code, arrange a new npm project and set up all the dependencies.
Just use this command for the new directory:
Add a new package.json file in a while:
And the final stage will be creating a .babelrc file:
It’s time to start creating the first tests.
1. Optional Chaining
You deal with the Objects when using JavaScript. You can see that these objects are of not the shape that you expect them to be. Take a look at an imaginary sample of the data object that was probably taken from the API call or a database.
You may notice that one user hasn’t finished the registration process:
There’s a chance to get such an error when I attempt to get to the street from the dashboard of the app:
If you don’t want to have it, you should go to the “street” this way:
What I think about such an approach is that it’s awful, difficult to carry out and lengthy. And take a look at the optional chaining here:
I think it looks like an easier way to follow. You know that this feature can be helpful, so we will take a closer look at it. It’s time to create the first test.
The dot notation functionality remains thanks to the optional chaining. You can see it. And it’s time to run the test for the unhappy path.
Take a look at the work of the optional chaining to access the array property:
It may happen that you don’t really know whether a function is inside an Object. Think of any browser that you are used to. And think of the older versions of them and if they all had the same functions. The reason for using optional chaining is to find out if a function is ever implemented.
Make the chain intact to let the expressions become executable. You can see that expressions can be turned into the following:
If you have an optional operator ?, check whether you have a null or undefined value. In this case, nothing will be executed. Take a look at the test to make sure I’m telling the truth:
A tiny warning
Optional chaining goes together with the use of the minimal overhead and you have probably checked it yourself. Use conditional logic for wrapping in ? to check every level. You will easily come up with a performance hit in case you use it too many times.
There’s one way out that I can offer here. You can have a kind of validation for the Object after you get or create it for the first time. You will have less performance hits and the number of checks that are required here.
And here’s the link to the proposal: https://github.com/TC39/proposal-optional-chaining
2. Nullish coalescing
The word coalescing means coming together or blending
When using JavaScript, you will see some most common operations like:
- Null or undefined values checks.
- Making values default ones.
- Checking that 0, ‘ ‘, and false are not made as default.
It looks like the following:
Or like this (wrong way):
The thing here is that the condition for the third operation is not working. I mean the second implementation. The following things are false for this: zero, empty string and a boolean phrase. So check these things as you can see here:
That is equal to:
That’s the right place where you can watch how a nullish coalescing come out. Here’s what you can do:
Such a line will save you from making false values default ones. And sometimes you can see how it gets undefined or even null with no triple or != check.
Let’s take a look at the live test after a short description of the syntax to make sure everything works fine.
Take a closer look at the tests and the default values for void 0. undefined and null. You will not see that a 0 value can become default.
3. Pipeline operator
Composition is a term that we use for chaining several function calls into one. It’s used in functional programming. The input of the function becomes the output of the function that was before it. Take a look at the example that is written in plain JavaScript:
It’s so popular to string together that you can find the composition functions in lodash or ramada libraries.
If you start using a new pipeline operator, you will turn the code from above into the following:
The goal here we have is to make the code easy to read. It will become a great part of an application in some time and it looks like the following below:
Once we have the syntax ready, we can run one more test.
After adding the async function to the pipeline, there’s the need to wait a while. The reason for this is that the value turns into a Promise. You can find a few proposed changes for supporting |>await async Function and check of they have been implemented or not. I hope this article was valuable for you and you enjoyed reading and testing.