Javascript: Proposals Ready for Use

av paul

Last Updated on Fri, Sep 06, 2019

04 mins read

If I say that Javascript is one of those languages on fire, that would be 100% true! In the last four years, ECMA TC39 released four specifications adding new features to the language!

Javascript and the TC39

TC39 means Technical Committee number 39. It's part of ECMA International, the standardizing body behind ECMAScript. If you are confused by here don't worry, this article from Wikipedia has more in-depth explanations. One of the functions TC39 members have to do is to evaluate and consider proposals for complementary or additional technologies.

You can guess it, overseeing the growth of a programming language is not an easy task. TC39 uses maturity stages based process. A feature undergoing that process is called a proposal, and features at state 3 of the process are more likely to be added to the language spec. Currently, there are 14 proposals in stage 3. Some of them are worth learning and you should use them in your next project🤓

Optional Chaining (my favorite🕺)

You made an API request to get the information of the user who is logged in. Your UI has placeholders for the user names, and address. The user address is optional which means that some users left it empty. Without optional chaining this is the code you will probably write:

const userData = API.get('/avpaul');
// to access the user address street which must be displayed on the UI
// you have to check if the address is there first
const userStreet = userData.address && user.address.street;
// or
const userStreet = userData.address ? user.address.street : undefined;

Every time you need a deeply nested value you have to check if the parent is not null or undefined. Optional chaining operator allows handling many of these cases without repetition and/or assigning intermediate results in temporary variables. If the operand on the left side of the ?. evaluates to undefined or null, the expression evaluates to undefined.

const userStreet = userData.street?.street;
// using nullish coalescing operator you can assign a value directly
const userStreet = userData.street?.street ?? 'some other value';
// optional chaining is not limited to objects only
// arrays
const location = userData.locations?.[0];
// functions
const bankBalance = BANK?.getBanlance()

To start using it, add it as a babel plugin in your .babelrc

Nullish Coalescing

Consider the following object👇you can notice that some properties are null. Others have values but those values are not correct by design.

    const userPreference = {
    firstName = 'paul',
    theme= 'dark',
    name = null,
    language = '',
    notifications = false,
    workDays = 0
}

// To use the pref default name
const preferredName =  userPreference.name || userPreference.firstname;

In many cases, the || operator is enough when you want to pass a default value. But In some cases it behaves surprisingly😱

// evaluates to true which is unintended
const isNotificationOn = userPreference.notifications || true; 

// evaluates to 5 which is unintended
const workingDays = userPreference.workDays || 5; 

To fix this, the nullary coalescing operator is intended to handle these cases better and serve as an equality check against null or undefined.

// evaluates to paul
const preferredName =  userPreference.name ?? userPreference.firstname;

// evaluates to false
const isNotificationOn = userPreference.notifications ?? true; 

// evaluates to 0
const workingDays = userPreference.workDays ?? 5; 

To start using it, add it as a babel plugin in your .babelrc. As the proposal authors say the intent is to provide a complementary operator to the optional chaining operator.

Throw expressions (stage 2)

Let say you are writing a function that accepts parameters and you want to throw an error if the parameters are not provided or something is wrong.

function uploadFile(file // you cant throw an error here) {
if(!file) throw new TypeError('File is required');
// implementation ...
}

Throw expressions proposal gives you the ability to throw errors in an expression context. That means that you can throw errors from parameter initializers, arrow function () => new Error(), conditional expressions, and logical opeartions.

function uploadFile(file = throw new TypeError('File is required')) {
// implementation ...
const ressourceURL = response.url || throw new Error('File upload failed');

Though it is still at stage 2, you can start using it as a babel plugin by adding it to your .babelrc.

There are many proposals that I won't talk about here but worth knowing. Like BigInt, a new primitive to represent whole numbers larger than 2^53 which is the largest number Javascript can reliably represent with the Number primitive. There is function implementation hiding which provides a way to indicate that implementation details should not be exposed as it is with Function.prototype.toString and Error.prototype.toString. And all the others in this repo.

If you want to check your knowledge of ES5 to ESNext, read this article by Flavio Copes and share with us how good you are😁

Thanks for taking the time to read this, just want to know what you think about it! Tweet about this to share with others. Se you soon👋

  back home