Safe navigation operator coming to JS/TS

Whatever you do, do it with love. I really like to apply this when I'm coding. Think that the code that you write will be the code that someone will read later.

In this post, let's discuss a little bit about validations against objects that can be null at runtime on JS and TS.

We need to do that to assert the response that came from an Http Request:

if (response.data && response.data.result)
  return response.data.result.map(mapFunction());

to validate that certain function parameter was passed into correctly:

function onSuccess(response) {
  if (!response || (response && !response.data))
    return new Error(`Hmm, where's my param?`);

  // else, do something
}

or to access some property in a model that have nested data like this:

if(account && account.role && account.role.permission)
  account.role.permission.ToString();

Deal with this can lead to code that is difficult to read, to test and to maintain.

Some actions can help a lot with that, like a shared layer (like an Http client wrapper) that deals with Http error codes and reduce the number of validations on your components and modules.

A concise API Design, to help your clients to deal with your data. A bad API Design can really do harm to your clients code! Try to avoid several levels of data, have a clear contract, a resource should only have one contract, a different contract should lead to a different resource. If you're doing microservices, GraphQL may be a good option. TypeScript already helps by telling at development time if something can be null.

That said, a language-level feature to help with that is really good! And we have good news! Just a few days ago, the Safe Navigator feature has gone to Stage 3, and to the TS 3.7.0 roadmap!

When this rollout, we will be able to do:

return response.data?.result?.map(mapFunction());
// undefined if something is undefined/null or the method result

if(!data.result?.length) return new Error('Hmm, still not getting it');

account.role?.permission?.ToString();

I believe this will help us create a smaller and more readable code. Angular 2+ already have that on the Html side, with the Template Syntax feature.

Despite this being a great addition to a fast-evolving language such as JS, is important to notice that you have other actions to improve the overall quality of your code.

Next steps...

Now, we can follow on Github the implementation of that feature.

The TC39 group makes a great job to make sure that JavaScript keeps evolving and became an even more consistent and strong language each year. TypeScript follows along, helping and giving us a great option in the JS ecosystem.

If you want to know more about the process of new features coming to JS/TS, give a look at these links:

TC39 Github
TC39 process