title: Why do I need to await an async function when it is not supposedly returning a Promise?
body: <p>Consider this code:</p>
  
  <pre><code>async function load() {
    const data = await new Promise(resolve =&gt; {
      setTimeout(() =&gt; resolve([1, 2, 3]), 10);
    }).then(data =&gt; data.map(i =&gt; i * 10));
    console.log(`Data inside the function: ${JSON.stringify(data)}`);
    return data;
  }
  
  function main() {
    const data = load();
    console.log(`Loaded data: ${JSON.stringify(data)}`);
  }
  
  main();
  </code></pre>
  
  <p>This is the output I'm getting:</p>
  
  <pre><code>Loaded data: {}
  Data inside the function: [10,20,30]
  </code></pre>
  
  <p>But if I change the code to this:</p>
  
  <pre>
  async function load() {
    const data = await new Promise(resolve => {
      setTimeout(() => resolve([1, 2, 3]), 10);
    }).then(data => data.map(i => i * 10));
    console.log(`Data inside the function: ${JSON.stringify(data)}`);
    return data;
  }
  
  <b>async</b> function main() {
    const data = <b>await</b> load();
    console.log(`Loaded data: ${JSON.stringify(data)}`);
  }
  
  main();
  </pre>
  
  <p>I'll get this:</p>
  
  <pre><code>Data inside the function: [10,20,30]
  Loaded data: [10,20,30]
  </code></pre>
  
  <p>I'm confused because based on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await" rel="noreferrer">the documentation</a>, <code>await</code> should pause the execution till the promise is resolved. In which case, the first example should return <code>data</code> as an array. But as you can see, it's returning a <code>Promise</code> and I have no idea why!?</p>
  
  <p>At the same time, the documentation has this part which I don't understand what it is talking about:</p>
  
  <blockquote>
    <p>An await can split execution flow, allowing the caller of the await's
    function to resume execution before the deferred continuation of the
    await's function. After the await defers the continuation of its
    function, if this is the first await executed by the function,
    immediate execution also continues by returning to the function's
    caller a pending Promise for the completion of the await's function
    and resuming execution of that caller.</p>
  </blockquote>
  
  <p>It seems to me the <code>await</code> is working only if <strong>all</strong> of the functions in your code are <code>async</code> which is ridiculous since if I'm using a function from another module, how should I know if it's an <code>async</code> or not!? Or maybe I should take the cautious side and always call all the functions with an <code>await</code> regardless of whether they are <code>async</code> or not!!!</p>
  
  <p><strong>[UPDATE]</strong></p>
  
  <p>Thanks to everyone participating and providing me with insight. But I'm still confused how should I be using <code>await</code> and <code>async</code>. Should I always call all of my function with an <code>await</code>?</p>
  
  <p>Let's say I'm writing a code composed of multiple functions within multiple files. If I end up using a library which returns a <code>Promise</code> or it's an <code>async</code> function, should I trace back all my function calls from the asynchronous point to the entry point of the application and add an <code>await</code> before all the function calls after making them <code>async</code>? Or maybe I should just get into the habit of calling all my functions with an <code>await</code> regardless of whether they are <code>async</code> or not?</p>