Experimental features with Babel to make your project explode

Learn is a constant in technology, when people starts his career must understand this. Technology constantly makes updates: languages, process, architectures, etc. So we need to be ready even before the releases of features in production environments.

Babel was a big changer in the way we do JS, we can use new features or proposals in our code and it’s very cool do that because when features arrives to production we just need change the options in transpilation to avoid do unnecessary transformations in our code.

That is why i’m making this posts to show some experimental features added via Babel, some ones maybe become part of the standard ECMA, some ones not, but is interesting play with them to imagine improvements in our code.

Yo can see all Available plugins

Optional chaining

In my opinion this feature is one of the most wanted, actually in some tools the support of this feature has been adopted, like in create-react-app. This feature allow access deep in properties from objects and don’t throw error if the object is null, undefined or some property doesn’t exist. Reference in babel

To follow the next example I recommend watch my test file

Example: You create a function to get the Id from user’s account, to get this value you need to use this path user.account.id

The function looks like this

If this path is unreachable try to access directly causes an Error(TypeError)

Solving unreachable paths with && operator

With this solution we avoid errors and just need it to check if return is not a falsy value

Solving unreachable paths optional chaining

With chaining we have code simpler to read and we have the “same” result comparing with && operator.

The only difference is working with null because is object for chainins is an object, but for && operator is a falsy value, that is why with with chaining the result is undefined and with && operator the result is null when we pass null parameter.

Nullish Coalescing Operator

A very common task in development handle with Falsy values, because sometimes the values we need are evaluated like false but we need to distinguish null and undefined for the rest, This case typically applies getting a default value. Reference babel

To follow the next example I recommend watch my test file

Example: Create a function to get the role of user and role property can be: null, undefined or empty.

The function looks like this

In this case empty string is a valid value, but is a falsy value so we get a wrong result

Solving this problem using typeof

We need to check the value of user.role and if is not null or undefined we can return the value in other way returns a default value

Solving this problem using Nullish Coalescing Operator

We just add the operator and that’s all

Throw Expressions

Throw sentence only can be used in sentences… not anymore, with this feature we can use throw in expressions, this is useful when we are expecting some expression be evaluated in particular way. Reference babel

To follow the next examples I recommend watch my test file

Using throw like default value if parameter is missing

Using if condition

Logical Assignment Operators

This feature is interesting because let us logical operators in assignments expression likes in arithmetic operators. This add supports for three: &&, || and ??. Reference babel

To follow the next examples I recommend watch my test file

&&= Verify the first part of the assignment if is a true value then assign the value, else if is false do nothing

||= Verify the first part of the assignment if is a false value then assign the value, else do nothing

??= Verify the first part of the assignment if is null or undefined then assign the value, else do nothing

Do Expressions

This features is interesting because let us execute a block of code one or many sentences at the end the execution of the final sentence(or expression) becomes in the value of do expression. Reference babel

To follow the next examples I recommend watch my test file

Many examples of this feature are related with react (the code looks nice), but we can use it in other things like Factories, this structures help us to don’t forget the returning of values.

Partial Application

This is one of my favorites because i’m fan of functional programming, partial application consist in reduce the number of parameters in a function, this help us a lot because with few parameters we reduce the possibility to get a mistake. To apply this technique before this feature we used bind method of functions to create a copy of the function adding default parameters. Reference babel

To follow the next example I recommend watch my test file

Example: You create a function add rol to a user.

The function looks like this

There is not a problem with function but remember less parameters is better because reduce the risk to get a mistake.

Solution using bind

Solution using partial application

This approaches looks similars but have different use cases, I created a function called multiply 3, take 3 parameters and make a multiplication, that’s all.

So, I gonna apply partial application using with both approaches

It’s not working?

Why bind approach works and the other fail?

Because, for Partial Application you need to know how many parameters needs the function, because if you not define the parameter with a value or placeholder this gonna be undefined (because is not passed), with bind we don’t need to know how many parameters need the function. See this implementation works correctly:

Then why Partial Application exists? Bind is good but, you can only set values no placeholders and you can do it only left-to-right order, but with partial application we can define in the order we want.

Pipeline Operator

Great, this is the final feature :D

If you are fan of composition you gonna love this feature, basically let us pass a value in a serie of functions and collect the result at the end. Reference babel

To follow the next example I recommend watch my test file

Example: Create a user, we need to add a serie of attributes to user, to do this we use functions to build a object (this can be done with a design pattern but this is not the case)

The function looks like this

In this sample you can see we return an object passed for serie of functions “pipeline”. The first function take the value, the return of that function is passed to the next, the result to the next, over and over again until to get the value of the last one.

Conclusion

Thanks to everyone for reading I hope this helps you to understand this features. You can see all project here, if you are a community lead and are interested in this content or another, feel free to contact me.