javascript - JS destructuring. How to deal with null or undefined values - Stack Overflow

admin管理员组

文章数量:1023230

How to implement Nullable feature in es6? I need to support the source code of my previous co-worker, who used too much destructuring feature of es6. Something like this, every where:

dispatch(
    loadImports(response.items.map(({ importRecord: { ['import']: importId } }) => importId))
)

In this example, it's possible that I may get TypeError: Cannot read property 'import' of null error.

I don't want to rewrite the whole destructures to regular conditions. Or if there isn't, how to deal with them, without rewriting?

UPD:

Expected version by co-worker: ,console

Current version: ,console

How to implement Nullable feature in es6? I need to support the source code of my previous co-worker, who used too much destructuring feature of es6. Something like this, every where:

dispatch(
    loadImports(response.items.map(({ importRecord: { ['import']: importId } }) => importId))
)

In this example, it's possible that I may get TypeError: Cannot read property 'import' of null error.

I don't want to rewrite the whole destructures to regular conditions. Or if there isn't, how to deal with them, without rewriting?

UPD:

Expected version by co-worker: https://jsbin./fesewiy/edit?js,console

Current version: https://jsbin./qirixil/edit?js,console

• javascript
• ecmascript-6

Share Improve this question Follow edited Jan 20, 2018 at 9:20 xurshid29 asked Nov 20, 2017 at 10:41 xurshid29xurshid29 4,21011 gold badge2323 silver badges2525 bronze badges 12

• What would the code look like if you did rewrite it - ie what should happen if you do pass in null? Either the code block should handle it, in which case pure destructuring is wrong because it doesn't handle the null case, or it shouldn't handle it and should throw an error anyway, in which case you're left with changing your calling code to check for nulls before you pass them. – James Thorpe Commented Nov 20, 2017 at 10:51
• @JamesThorpe Above example could look like this with conditions: loadImports(response.items.map((item) => item.importRecord && item.importRecord.import && item.importRecord.import.id)) – xurshid29 Commented Nov 20, 2017 at 10:55
• But that fundamentally changes the meaning of what the code does. Now you allow nulls to be mapped. – James Thorpe Commented Nov 20, 2017 at 10:56
• @JamesThorpe Plus, find and fix them, too much time. – xurshid29 Commented Nov 20, 2017 at 10:56
• @JamesThorpe It's ok, if I allow nulls, backend can handle them properly. – xurshid29 Commented Nov 20, 2017 at 10:57

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 2

Because you are using map, you need to get some result for each item. The best solution with minimum changes will be to use only one level of destructuring and then filter the array to stay with array of values that are not falsy.

dispatch(
    loadImports(response.items
        .map(({ importRecord }) => importRecord && importRecord.import)
        .filter(v => v)
))

You can set the value of the default parameter to a plain object, use OR operator to return either importId or null

arr.map(({ importRecord: { ['import']: importId } = {}}) => importId || null)

How to implement Nullable feature in es6? I need to support the source code of my previous co-worker, who used too much destructuring feature of es6. Something like this, every where:

dispatch(
    loadImports(response.items.map(({ importRecord: { ['import']: importId } }) => importId))
)

In this example, it's possible that I may get TypeError: Cannot read property 'import' of null error.

I don't want to rewrite the whole destructures to regular conditions. Or if there isn't, how to deal with them, without rewriting?

UPD:

Expected version by co-worker: ,console

Current version: ,console

How to implement Nullable feature in es6? I need to support the source code of my previous co-worker, who used too much destructuring feature of es6. Something like this, every where:

dispatch(
    loadImports(response.items.map(({ importRecord: { ['import']: importId } }) => importId))
)

In this example, it's possible that I may get TypeError: Cannot read property 'import' of null error.

I don't want to rewrite the whole destructures to regular conditions. Or if there isn't, how to deal with them, without rewriting?

UPD:

Expected version by co-worker: https://jsbin./fesewiy/edit?js,console

Current version: https://jsbin./qirixil/edit?js,console

• javascript
• ecmascript-6

Share Improve this question Follow edited Jan 20, 2018 at 9:20 xurshid29 asked Nov 20, 2017 at 10:41 xurshid29xurshid29 4,21011 gold badge2323 silver badges2525 bronze badges 12

• What would the code look like if you did rewrite it - ie what should happen if you do pass in null? Either the code block should handle it, in which case pure destructuring is wrong because it doesn't handle the null case, or it shouldn't handle it and should throw an error anyway, in which case you're left with changing your calling code to check for nulls before you pass them. – James Thorpe Commented Nov 20, 2017 at 10:51
• @JamesThorpe Above example could look like this with conditions: loadImports(response.items.map((item) => item.importRecord && item.importRecord.import && item.importRecord.import.id)) – xurshid29 Commented Nov 20, 2017 at 10:55
• But that fundamentally changes the meaning of what the code does. Now you allow nulls to be mapped. – James Thorpe Commented Nov 20, 2017 at 10:56
• @JamesThorpe Plus, find and fix them, too much time. – xurshid29 Commented Nov 20, 2017 at 10:56
• @JamesThorpe It's ok, if I allow nulls, backend can handle them properly. – xurshid29 Commented Nov 20, 2017 at 10:57

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 2

Because you are using map, you need to get some result for each item. The best solution with minimum changes will be to use only one level of destructuring and then filter the array to stay with array of values that are not falsy.

dispatch(
    loadImports(response.items
        .map(({ importRecord }) => importRecord && importRecord.import)
        .filter(v => v)
))

You can set the value of the default parameter to a plain object, use OR operator to return either importId or null

arr.map(({ importRecord: { ['import']: importId } = {}}) => importId || null)

本文标签： javascriptJS destructuring How to deal with null or undefined valuesStack Overflow