title: How to make an object property of type array optional in javascript?
body: <p>I'm testing a react native expo app that access the device contacts.</p>
  <p>on an emulator with only 5 contacts, everything was Ok. But when I Was testing on my physical android device, I got this error 'TypeError: TaskQueue: Error with task : undefined is not an object (evaluating 'contact.phoneNumbers[0]')'.</p>
  <p>here is how I access the contacts in the App component.</p>
  <pre><code>useEffect(() =&gt; {
          let isMounted = true;
          const fetchAllContacts = async () =&gt; {
              const { status } = await Contacts.requestPermissionsAsync();
              if (status === &quot;granted&quot;) {
                  const { data } = await Contacts.getContactsAsync({});
  
                  if (isMounted) {
                      setContacts(data);
                  }
              }
          };
  
          fetchAllContacts();
  
          return () =&gt; {
              isMounted = false;
          };
      }, []);
  
      const renderItem = ({ item }) =&gt; &lt;ContactCard contact={item} /&gt;;
  
  
      return (
          &lt;SafeAreaView style={styles.container}&gt;
              &lt;View style={styles.header}&gt;
                  &lt;Text style={styles.headerText}&gt;Contacts App&lt;/Text&gt;
              &lt;/View&gt;
              &lt;Text style={{ padding: 20, fontWeight: &quot;600&quot;, color: &quot;#aaa&quot; }}&gt;All Contacts&lt;/Text&gt;
  
              &lt;FlatList
                  data={contacts.sort((a, b) =&gt; a.name.localeCompare(b.name))}
                  renderItem={renderItem}
                  keyExtractor={(contact) =&gt; contact.id}
                  style={{ padding: 8 }}
              /&gt;
          &lt;/SafeAreaView&gt;
      );
  
  </code></pre>
  <p>here is the contact card component where I am trying to access the contact first phoneNumber from the phoneNumbers array.</p>
  <pre><code>import React, { memo } from &quot;react&quot;;
  import Contact from &quot;./Contact&quot;;
  
  const ContactCard = ({ contact }) =&gt; {
      const phoneNumberWithoutSpaces = contact?.phoneNumbers[0].number.toString().replace(/\s+/g, &quot;&quot;);
  
      const firstLetter = phoneNumberWithoutSpaces.slice(0, 1);
  
      return &lt;Contact contact={contact} colour=&quot;yellow&quot; network=&quot;MTN&quot; /&gt;;
  }
  </code></pre>
  <p>Which I also pass to the Contact component</p>
  <pre><code>import React from &quot;react&quot;;
  import { StyleSheet, Text, View } from &quot;react-native&quot;;
  
  export default function Contact({ contact, network, colour }) {
      return (
          &lt;View style={styles.card}&gt;
              &lt;View style={[styles.contactIcon, { backgroundColor: colour }]}&gt;
                  &lt;Text style={styles.iconText}&gt;{contact?.name[0]}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={{ flex: 1 }}&gt;
                  &lt;Text style={styles.name}&gt;{contact?.name}&lt;/Text&gt;
                  &lt;View style={styles.subTitle}&gt;
                      &lt;Text style={styles.phone}&gt;{contact?.phoneNumbers[0].number}&lt;/Text&gt;
  
                      &lt;Text style={{ color: colour, fontWeight: &quot;500&quot; }}&gt;{network}&lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  <p>so please how do I solve this issue.</p>