Home > OS >  Best alternative for optional chaining in javascript
Best alternative for optional chaining in javascript

Time:06-17

I have the following chaining operator

const age = data.student?.age ? data.student.age: '';

this works fine in my local machine but seems to have problem in another machine. on further investigation i could understand that node js lower version(i suppose version below 12) doesn't support chaining operator. I understand that i can replace this with if condition like below but would like to know suggestions on what is the best possible alternative for this.

function checkAge(data){
  if(data && data.student && data.student.age) {
    return data.student.age;
  } else {
   return '';
  }
}


const age  = checkAge(data);

CodePudding user response:

There is no need for code change. You only need to modify the target option in your TypeScript configuration and set it to anything ES2019 or below. Then you can use optional chaining in your TypeScript code and the compiler will produce the equivalent code.

The TypeScript code

const foo = a?.b?.c;

becomes

"use strict";
var _a;
const foo = (_a = a === null || a === void 0 ? void 0 : a.b) === null || _a === void 0 ? void 0 : _a.c;

when compiled: Playground Link

CodePudding user response:

If the problem is readability, you could probably try object destructing. So, your assigment would look something like this:

const {
  student: {
    age = ''
  } = {}
} = data

CodePudding user response:

Assuming declaring age as const, not to polluting scope with intermediate variables, and returning a number even for '0' and empty string in case of undefined are all a must, shorter option that comes to my mind would be following:

const age = (d=>(isNaN(d=(d.student||{}).age)?'':d))(data);

For less strict approaches, cleaner solution would be:

const age = (data.student || {}).age || "";
// In this case, though, numeric 0 would also be returned as empty string.

On the other hand, if you need to do this more than a few times, I would recommend to implement a handy picking function like:

const pick = (target, path)=>path.split(".")
    .reduce(
        (acc,key)=>acc&&acc[key]
        ,target
    )
;
// And then...
const age = pick(data, 'student.age');

For picking approach it would be worth to reduce the number of function calls performed by pick() function. I just used reduce for the sake of brevity and simplicity.

  • Related