Optional chaining obj?.[expr]

[laggingreflex]

The obj?.[expr] syntax of optional chaining don't work as expected:

Input

let nestedProp = obj?.['prop' + 'Name'];
let arrayItem = arr?.[42];

Expected (no change)

let nestedProp = obj?.['prop' + 'Name'];
let arrayItem = arr?.[42];

Actual

Space between . and [

let nestedProp = obj?. ['prop' + 'Name'];
let arrayItem = arr?. [42];

[bitwiseman]

@laggingreflex
These are equivalent to:

let nestedProp = (obj === null || obj === undefined) ?  null :  obj['prop' + 'Name'];
let arrayItem = (arr === null || arr === undefined) ?  null :  arr[42];

Correct?

Also, these do not cause syntax errors, they just look wrong. Correct?

[laggingreflex]

These are equivalent to:

let nestedProp = (obj === null || obj === undefined) ?  null :  obj['prop' + 'Name'];
let arrayItem = (arr === null || arr === undefined) ?  null :  arr[42];

@bitwiseman Not sure I understand the question. Are you asking what the optional chaining operator ?. expands to? Like as if it were parsed by Babel? Babel expands it to this:

var _obj, _arr;

var nestedProp = (_obj = obj) === null || _obj === void 0 ? void 0 : _obj['prop' + 'Name'];
var arrayItem = (_arr = arr) === null || _arr === void 0 ? void 0 : _arr[42];

Also, these do not cause syntax errors, they just look wrong. Correct?

Yes, they don't cause any errors, just look wrong.

[bitwiseman]

@laggingreflex
I'm trying to understand the behavior of the language feature and the severity of the formatting problem.

I don't have time to work on this right now, but the change should be pretty easy.

Adding another branch to this conditional is prably the right place:
https://github.com/beautify-web/js-beautify/blob/e4f9763c69ba8cf2a2fb1f10f19ef9d9611d1892/js/src/javascript/beautifier.js#L1260-L1273

[bitwiseman]

Doh, this was a duplicate of #1727 which as fixed by #1779. Fix released in 1.11.0.

[h0rn3z0r]

@bitwiseman
This issue is not fixed. The latest js-beautify still inserts an extra space character after the optional chaining operator.

[bitwiseman]

@h0rn3z0r
Hm, tests:
https://github.com/beautify-web/js-beautify/blob/4738a1dc43f95e92190d341aae8e310075a7074a/test/data/javascript/tests.js#L1054-L1075

Ah, I see the problem.