title: Why async/await and then produce different results
body: <p>I'm just asking this question to clarify and get a better understanding at javascript promises. The following two codes look very similar to me, but why both gives different results. Also how to get the result of <strong>async/await</strong> function in <strong>.then</strong> way. Thanks.</p>
  <p><strong>async/await</strong></p>
  <pre><code>const getFieldValue = async (collection, userid) =&gt; {
    let response;
  
    const querySnapshot = await firestore()
      .collection(collection)
      .where(&quot;userid&quot;, &quot;==&quot;, userid)
      .get();
    querySnapshot.forEach((doc) =&gt; {
      const { name } = doc.data();
      response = name;
    });
  
    return response;
  };
  </code></pre>
  <pre><code>async function fetchData() {
    const name = await getFieldValue(&quot;Users&quot;, userid);
    console.log(&quot;name&quot;, name);
  }
  fetchData();
  </code></pre>
  <p><strong>.then</strong></p>
  <pre><code>const getFieldValue = (collection, userid) =&gt; {
    let response;
  
    firestore()
      .collection(collection)
      .where(&quot;userid&quot;, &quot;==&quot;, userid)
      .get()
      .then((querySnapshot) =&gt; {
        querySnapshot.docs.find((doc) =&gt; {
          const { name } = doc.data();
          response = name;
        });
      })
      .catch((e) =&gt; console.log(e));
  
    return response;
  };
  </code></pre>
  <pre><code>const name = getFieldValue(&quot;Users&quot;, userid);
  console.log(&quot;name&quot;, name);
  </code></pre>
  <p><strong>async/await</strong> returns correct name and <strong>.then</strong> returns undefined</p>