A long way of changes
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.
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.
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 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
- 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
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.