optional chaining in javascript causing error in eslint

Question

i tried to use optional chaining in javascript but my eslint rules causing error .

Error : Unsafe usage of optional chaining. If it short-circuits with 'undefined' the evaluation will throw TypeError no-unsafe-optional-chaining

const { homeAddress, officeAddress} = Employee?.addresses;

Error : Unsafe arithmetic operation on optional chaining. It can result in NaN no-unsafe-optional-chaining

const AddressesCount = homeAddress?.length + officeAddress?.length

how can I fix this issue ? I do not want to violate the rule

Lars Vonk · Accepted Answer · 2023-03-07 09:27:36Z

12

There are multiple ways to fix this, or you can use /* eslint-disable-next-line no-unsafe-optional-chaining */. Which I would not advise but it will fix the errors. The best way to fix this in my opinion is by using const { homeAddress, officeAddress } = Employee?.addressess || {};. What you can also try is const { addresses: { homeAddress, officeAddress } } = Employee;

edited Mar 7, 2023 at 9:27

answered Mar 7, 2023 at 7:35

Lars Vonk

7486 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

derpirscher Over a year ago

Employee.addresses || {} will throw an exception if Employee is null or undefined ...

V2rson Over a year ago

so how can i overcome that issue ? @derpirscher

derpirscher Over a year ago

Like you did in your original code: Employee?.addresses but you need the fallback to an empty object, so that the deconstruction won't throw an error on null or undefined. So Employee?.addresses || {}

Lars Vonk Over a year ago

You are absolutely right i will edit my nswer

Zach Jensz · Accepted Answer · 2023-03-12 09:29:41Z

3

for the second issue:

const AddressesCount = (homeAddress?.length || 0) + (officeAddress?.length || 0 )

edited Mar 12, 2023 at 9:29

Zach Jensz

4,0986 gold badges19 silver badges32 bronze badges

answered Mar 7, 2023 at 7:58

V2rson

3572 gold badges3 silver badges12 bronze badges

Comments

pope_maverick · Accepted Answer · 2023-03-07 09:45:38Z

2

Provide a default value

const { addresses: { homeAddress, officeAddress} = { homeAddress: '', officeAddress: ''} } = Employee

console.log(homeAddress) // <empty string>
console.log(officeAddress) // <empty string>

This way you're making sure keys exists and you'll be getting a default value(empty string in this case) and your code doesn't breaks.

answered Mar 7, 2023 at 9:45

pope_maverick

9808 silver badges16 bronze badges

Collectives™ on Stack Overflow

optional chaining in javascript causing error in eslint

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related