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-07T09:27:36.280

5

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 07 '23 at 09:27

answered Mar 07 '23 at 07:35

Lars Vonk

623
5
13

2

`Employee.addresses || {}` will throw an exception if `Employee` is null or undefined ... – derpirscher Mar 07 '23 at 07:57
so how can i overcome that issue ? @derpirscher – V2rson Mar 07 '23 at 07:59
3

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 || {}` – derpirscher Mar 07 '23 at 08:05
You are absolutely right i will edit my nswer – Lars Vonk Mar 07 '23 at 09:27

score 3 · Answer 2 · edited Mar 12 '23 at 09:29

3

for the second issue:

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

edited Mar 12 '23 at 09:29

Zach Jensz

3,650
5
15
30

answered Mar 07 '23 at 07:58

V2rson

137
1
10

score 1 · Answer 3 · answered Mar 07 '23 at 09:45

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.

optional chaining in javascript causing error in eslint

3 Answers3