Best alternative for optional chaining in javascript

Question

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);

It is strange that for something that would be a number (`age`) you want to return a string (`''`) when the property does not exist. That seems like a bad choice. — trincot, Jun 17 '22 at 10:07
Of course the best option is to upgrade node, `Node. js 12 will reach End-of-Life status on 30 April 2022`. Unsupported Node versions is of course a massive security issue. — Keith, Jun 17 '22 at 10:09
[How to avoid 'cannot read property of undefined' errors?](https://stackoverflow.com/questions/14782232) — adiga, Jun 17 '22 at 10:11

VLAZ · Answer 1 · 2022-06-17T10:31:58.043

4

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

edited Jun 17 '22 at 10:31

answered Jun 17 '22 at 10:13

VLAZ

26,331
9
49
67

Was about to point out optional chaining equalivalent is more than just using `&&`, but your Typescript output is kind of showing it anyway.. :) Athough you forgot to put the `var _a` bit. – Keith Jun 17 '22 at 10:17
@Keith actually, my bad. I made a slightly more realistic example that better represents how/when optional chaining is used. – VLAZ Jun 17 '22 at 10:32

score 0 · Answer 2 · answered Jun 17 '22 at 10:20

0

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

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

answered Jun 17 '22 at 10:20

Shahin Nazer

166
1
6

bitifet · Answer 3 · 2022-06-17T11:09:30.113

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.

Best alternative for optional chaining in javascript

3 Answers3