DEV Community

Cover image for Use JavaScript Optional Chaining, Today!

Use JavaScript Optional Chaining, Today!

Abdelrahman Ismail on October 31, 2019

Optional Chaining is a new JavaScript API that will make developers' lives easier :D. Optional Chaining is currently at Stage 3, and soon enough wi...
Read full post
Collapse
 
njugunapm233 profile image
njugunapm233 •

console.log(restaurant.openingHours[tue] ? .open);
on saving I get a gap between . and ? as seen above.
The on console this is the error.
Uncaught SyntaxError: Unexpected token '.'

Collapse
 
ender_minyard profile image
ender minyard •

Try removing the spaces between . and ?.

console.log(restaurant.openingHours[tue] ? .open); //Error: expected expression, got '.'
console.log(restaurant.openingHours[tue]?.open);  // Evaluates expression
Enter fullscreen mode Exit fullscreen mode
Collapse
 
njugunapm233 profile image
njugunapm233 •

"eslint.autoFixOnSave": true,

the above code seems to be deprecated.
kindly assist.

Thread Thread
 
ender_minyard profile image
ender minyard •

Can you disable ESLint? ESLint may be causing the error.

Collapse
 
njugunapm233 profile image
njugunapm233 •

The error occurs when I save the file.

Collapse
 
floroz profile image
Daniele Tortora •

Thank you!

If you use React with CRA and upgrade to CRA 3.3.0 you just have to add the .vscode./settings.json to your repository.

Collapse
 
decibel_dj profile image
Dhaval Patel •

where can I find .babelrc & .eslintrc files ?
Inside node-modules folder, I can see lot of files with the same name.

Collapse
 
brittanmcg profile image
Brittan McGinnis •

They should be at your project's top level. 



MyProject
|_ .babelrc
|_ .eslintrc
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thalisses profile image
Thalisses Jenn •

Very helpful this config of VS Code, thanks!

Collapse
 
ehsansarshar profile image
Ehsan sarshar •

what is the difference between x?.y?.z || 24 and x?.y?.z ?? 24

Collapse
 
ismail9k profile image
Abdelrahman Ismail • • Edited

The main difference between the Logical OR (||), and Nullish Coalescing Operator (??) is the that (??) returns its right-hand side operand when its left-hand side operand is only null or undefined and doesn't respect the other falsy value (e.g. 0, false, '').

See the outputs:

const x = { y: { z: 0 } } };
x?.y?.z || 24; 
// => 24

x?.y?.z ?? 24
// => 0

For sure, the behaviour for ?? will be exactly the same as || if z is undefiend or its value is null