Is it possible to combine optional chaining with arrays and map (in Javascript)?

Question

I recently learned about optional chaining in Javascript and have been making use of it in a React/NodeJS project. Works great.

I noticed I have been using it with arrays map, even without thinking about it much -- it seemed a natural use (here items is an array, or possibly undefined)

        {items?.map(postListItem => ....

That is, it will map if items exists, but not if items is undefined, but would avoid any run-time errors if I were to call map on undefined

Nonetheless I don't know if this is an acceptable use or whether I'm mis-using optional chaining. I searched for an answer but as of yet haven't been able to find one, which makes me suspect I'm mis-using it. Any info much appreciated!

@NinaScholz It's JSX syntax - `{` can be put at some positions (like as a prop, or a child of an element) to insert what the following JS expression evaluates to. Eg `
{ true ? 'foo' : 'bar' }
` results in `
foo
`. — CertainPerformance, Feb 11 '20 at 09:20

score 13 · Answer 1 · answered Jan 15 '21 at 19:52

13

See answer here regarding the typescript usage. You need a period for array null safe Optional Chaining.

    this.mostRecentMfaAttempt = this.verificationsAttempts?.content?.[0]

How to use optional chaining with array in Typescript?

Using optional chaining operator for object property access

answered Jan 15 '21 at 19:52

Matthew Payne

2,996
2
19
15

2

Maybe worth noting that this crashes if the array exists but is empty. – charles-allen Jun 01 '21 at 08:55

CertainPerformance · Accepted Answer · 2020-02-11T09:26:22.333

If the chaining fails, the expression will evaluate to undefined.

When a child is evaluated to undefined, it just won't render.

Conditional rendering is already quite a common strategy. Previously, when you have something that may be an array or may be undefined, and you want to map if there's an array, you would have had to do something like:

{ items && items.map( ...

This works because, if items is undefined, the whole expression will be evaluated to undefined, and no rendering will happen, and no errors will be thrown.

Using optional chaining works exactly the same way, except that it's more concise. So yes, this is a perfectly valid thing to do.

Optional chaining is stage 4, so you can count on it working reliably.

Arrays are objects. But optional chaining isn't only for objects - it can work for anything which may have a property or method. Eg const bar = foo?.toFixed(2) will work fine if foo is null, undefined, or a number (numbers have a toFixed method).

score 3 · Answer 3 · answered Feb 11 '20 at 09:14

3

The optional chaining way to your problem is:

{items?.map?.(postListItem => ....)

Read more here: MDN Web Docs: Optional chaining

answered Feb 11 '20 at 09:14

Arber Sylejmani

2,078
1
16
20

This could help if one doesn't know if `items` is an array or not, but if one is sure it will either be an array or `undefined`, there's no need for the second `?.` – CertainPerformance Feb 11 '20 at 09:15
True but since he said he just started learning about optional chaining, I was just showing of how to do it using only optional chaining, not necessarily the best way of doing it. – Arber Sylejmani Feb 11 '20 at 09:21

score 0 · Answer 4 · edited May 12 '22 at 09:17

0

To get data from the MongoDB database by filtering use below system.

cars.filter(car => car.email === user.email)?.map(car => {
    return (
        <tr key={car._id}>
            <td>{car.userName}</td>
            <td className=''>{car.email}</td>
            <td>{car.name}</td>
            <td><img src={car.img} alt="" /></td>
        </tr>
    )
})

edited May 12 '22 at 09:17

Jakub Kurdziel

3,216
2
12
22

answered May 05 '22 at 20:54

Abu Kawsar

1
2

Please edit your question and place code in `code` blocks properly, and maintain indentation. – Sunderam Dubey May 06 '22 at 02:31

Is it possible to combine optional chaining with arrays and map (in Javascript)?

4 Answers4

Linked

Related