Throughout the past years we've witnessed the Javascript Community grow and thrive. It's noticeable that not only the ecosystem has become bigger and more reliable but also the language itself is moving towards a more mature stage in comparison to eight years ago for example. In this article I will introduce you to some new useful features coming to Javascript.
Although these features are still in their experimental stage, we at Delivery Hero Logistics like to try out new things through experimenting carefully with features currently not found in our apps. In fact, you can use them today via Babel. However, be careful when choosing this option. There’s no guarantee that the proposal will remain as-is. It might dramatically change, and therefore you will have to refactor some code (or not).
( The idea behind this post is to provide some examples of real problems we've been facing throughout the years and to show how we can solve them today.)
Feel free to skip this section if you are already familiar with TC39.
It is important to understand that Javascript is standardized under the ECMAScript specification. Therefore, there is a committee called TC39 guiding the community through the stages of the implementation of the new proposals. (If you are really interested in this I'd suggest you to check out their website).
This being said, I'd encourage you to take a brief look at the stages of maturity of the proposals:
- Stage-0: Allow input into specification
- Stage-1: Proposal
- Stage-2: Draft
- Stage-3: Candidate
- Stage-4: Finished
For further information, such as criteria of acceptance, check their process document.
Stage: 1
Proposal: https://github.com/tc39/proposal-optional-chaining
The main premise of this feature is that there is no need to check intermediate properties to assert a deep property value in a tree-like structure anymore. Let's take into consideration the following problem:
const street = restaurant && restaurant.address && restaurant.address.street;
In this case we are using a short circuit expression. Javascript returns the last encountered value when using a short circuit expression.
Although currently there are many solutions out there for this problem you won't find an elegant solution like this new proposal in Vanilla JS:
const street = restaurant?.address?.street;
Currently, you could implement a solution using Monad, Lodash, Ramda or even write a solution that implements try catch.
I would suggest taking a careful look into this proposal due to its versatility.
Stage: 1
Proposal: https://github.com/tc39/proposal-pipeline-operator
This operator was inspired in other languages such as F#, Elixir, Elm and Unix pipes. The idea behind this operator is to essentially provide a syntax sugar on a function call with a single argument in a readable fashion. The following expressions are equivalent:
double(2);
2 |> double;
Pipeline operator is pretty useful when using function composition. Let's take in consideration the following example:
const double = x => x * 2;
const add = (x, y) => x + y;
const boundScore = (min, max, score) => Math.max(min, Math.min(max, score));
const restaurant = { score: 25 };
// without pipeline operator
boundScore(0, 100, add(7, double(restaurant.score))); // 57
// with pipeline operator
restaurant.score
|> double
|> (value => add(7, value))
|> (value => boundScore(0, 100, value)); // 57
Note that the value param is not required; It's an arrow function and therefore you can name the param as you wish.
Stage: 1
Proposal: https://github.com/tc39/proposal-do-expressions
The do expression allows you to write a block of statement(s) to be evaluated. The "completion value" is returned as the result of it. Let's take a look at this example:
const result = do {
7 * 7
};
result // 49
Using side effects within a do expression make them easier to read and we can also declare scoped variables.
let data = do {
const data = foo();
bar() // side effect
data // implicitly returns data
}
A do expression is a powerful ally when it comes down to working with JSX due to its ability to manipulate conditionals.
Usually we use short circuits to manipulate conditionals in JSX, like so:
<Fragment>
{loading && <Loading />}
{error && <Error message={error.message} />}
{!loading && !error && <HomePage />}
</Fragment>
By using do expressions you get rid of the short circuit and its side effect of dealing with falsy expressions such as 0 or ''.
<Fragment>
{
do {
if(loading) {
<Loading />
} else if(error) {
<Error message={error.message} />
} else {
<HomePage />
}
}
}
</Fragment>
Although none of these features are a silver bullet, give them a shot! Try thinking about how these new features might clean up or help you out in your current project.
In fact, Javascript is continuously evolving, which is why there's always something new to talk about. That’s the fun part. However If you want to help support these features in their journey in becoming a part of the language, you can visit the TC39 Proposal page.
(Source code GITHUB)
Happy Coding