DEV Community

Cover image for The future of Javascript - features to keep an eye on
Christopher Kade
Christopher Kade

Posted on • Originally published at christopherkade.com

The future of Javascript - features to keep an eye on

We take a lot of Javascript features for granted, map, filter, reduce, const/let, ternaries... each one of these had a major impact on our code bases when they were introduced & allow for us to write cleaner and often times more performant code.

Let's cover who decides on the future of Javascript briefly, and then introduce some features that should arrive in the near & not so near future.

If you're only interested in concrete features, skip to the next section below by clicking here πŸ‘‡

paul-esch-laurent-oZMUrWFHOB4-unsplash

ECMA? TC39?

In 1959, computers were being used more and more, which brought in multiple new manufacturers. Something was clear: they needed to find a way to standardize technical operations such as (but not only) programming.

And so, the 27th of April 1960 in Brussels, the European Computer Manufacturers Association (or ECMA) was born, looking to standardize this mess.

Note: in 1994, ECMA became ecma international, where they dropped the acronym and used the latter word to show their international scale.

ECMA elects a new president every single year, usually someone from a major actor in computer science: IBM, HP, Siemens, Philips etc. Jochen Friedrick from IBM currently resides as president for the 2018-2019 period.

Here's how it's structured:

Screenshot 2019-10-23 at 09 18 17

The general assembly includes ordinary members of ecma and is its highest authority. It controls its management, secretariat & executive committee. It's currently composed of some of the biggest names in tech, including Apple, AirBnb, Facebook, Netflix & Google. Full list of members

It's the secretariat's role to organize and create Technical Committees (TCs) and Technical Groups (TGs) who handle specific aspects of computer science.

Each TC manages the evolution & future of things such as Programming Languages, Product Safety and of course: ECMAScript.

Screenshot 2019-10-23 at 09 22 50

You now have a general overview of how things work, but what's the lifecycle of a new JS feature?

TC39 proposals

So TC39 manages the evolution of our beloved (and sometimes hated) language, almost everything they do is open-sourced so it's always cool to check out new proposals and how they evolve over time.

The stages of an ECMAScript feature

A new ECMAScript feature goes through 5 stages:

  • Stage 0 (Strawperson): which allows initial input into the specification
  • Stage 1 (Proposal): allows to make the case for the addition, describe the shape of the solution & identify potential challenges
  • Stage 2 (Draft): allows to precisely describe the syntax and semantic using formal specification language
  • Stage 3 (Candidate): indicates that further refinement will require feedback from implementations & users. Basically requires that all semantics, syntax and APIs are completely described
  • Stage 4 (Finished): Indicate that the addition is ready for inclusion in the formal ECMAScript standard

You can get more information and dive into great details about these stages here.

Stage 4 features

Let's get to concrete stage 4 features, meaning features that are finished and that will be included in the soonest practical standard version of ECMAScript. I'll also display their current browser support.

Object.fromEntries

Code Snippet Object.fromEntries

Array.flatMap

flatMap snippet

The MDN docs mention that it's even slightly more efficient.

BigInt

BigInt snippet

globalThis

globalThis snippet

String.trimStart & String.trimEnd

trimStart snippet

Promise.allSettled

Promise.allSettled snippet

Stage 3 features

Stage 3 features won't get released in the near future, but some of them are so cool that it's worth mentioning them.

I won't mention their browser support though, as it's not relevant.

Optional chaining

This one might be my favorites, bye bye user && user.name !

Optional chaining snippet

Nullish Coalescing

Do you know how Javascript can be weird sometimes? When you need to do some validation with a value equal to 0 but forget that it's considered as falsy?

nullish coalescing snippet

Did you learn anything new? What feature excites you the most? I'd love to here your thoughts either here or on Twitter @christo_kade !

Top comments (14)

Collapse
 
aaron_powell profile image
Aaron Powell

I think optional chaining is in typescript 3.7 for anyone interested

Collapse
 
victorcorcos profile image
Victor Cordeiro Costa • Edited

Looks like Promise.allSettled is the same as $.when() which is provided by jQuery, am I correct?
Both of them returns a Promise that will be executed when the inner promises are done.

I prefer 200% the when syntax than the allSettled.

Promise.when([promise1, promise2]).done...
Enter fullscreen mode Exit fullscreen mode

Sound so much more succinct and readable!

Collapse
 
nlepage profile image
Nicolas Lepage

No, $.when() is like Promise.all(), they both fail/reject as soon as one of the given promises rejects.
Promise.allSettled will resolve when all given promises have either resolved or rejected, and then you have to manually check the results...

Collapse
 
victorcorcos profile image
Victor Cordeiro Costa

Great! Thanks for the response!

Collapse
 
georgecoldham profile image
George

Can someone give a quick overview of the benefits of flatMap? Im still struggling to get my head round a useful use-case.

Collapse
 
wormss profile image
WORMSS • Edited

Let's say you have a bunch of objects, let's say they are People{}, and they have an array of children[].

If you wanted the list of children, of an array of people, you could use flat map.

people.flatMap(p => p.children)

So you return the array of children, and all those arrays get flattened into 1 giant array.

Collapse
 
georgecoldham profile image
George

Ahh I see, so it’s like .map().flat()?

Makes sense, still only seeing limited use cases. But saves looping twice I guess.

Thread Thread
 
wormss profile image
WORMSS

Might be dependant upon your projects you do. We deal with a lot of nested dynamic data at work, we use this technique a lot.

Collapse
 
johnkazer profile image
John Kazer

I try to use Ramda lenses to create a sort of interface to objects, so my code doesn't really need to know the details of the structure. You can also protect against missing data and generate default return values.

So I would consider optional chaining to be a bit of a hack that a more functional approach to JavaScript can already solve more cleanly.

ramdajs.com/docs/#lens
ramdajs.com/docs/#pathOr
etc.

Collapse
 
mateiadrielrafael profile image
Matei Adriel

Most language consider 0 to be falsy -_-

Collapse
 
seanmclem profile image
Seanmclem

In C# you had to parse it to a boolean to test if it was false. Last time I used it. Like how you can't just drop a string into an If-condition, you have to test if it's null or empty, but not with js.

Collapse
 
mateiadrielrafael profile image
Matei Adriel • Edited

Yes, but for example c++ just lets you if (number)

Collapse
 
dahmon profile image
Dahmon Bicheno

Optional chaining and nullish coalescing are going to be absolute life savers!
Definitely the two features I will most often use, honestly surprised they haven't been introduced earlier.

Collapse
 
shadowwarior5 profile image
Konstantin Meiklyar

Long live optional chaining