title: Why is async required to call await inside a JavaScript function body?
body: <p>One has to use <strong>async</strong> keyword on the containing function to use the <strong>await</strong> inside the function body.</p>
  <pre><code>async function fetchMovies() {
    const response = await fetch('/movies');
    console.log(response);
  }
  
  fetchMovies();
  </code></pre>
  <p>The <strong>await</strong> is being used to block on completion of the asynchronous <strong>fetch()</strong> call. As can be seen in the code, the function <strong>fetchMovies()</strong> is not even returning any value. And even if it did, it would affect the way the return value is consumed by the caller, but why should it matter to the call to another asynchronous call from the function body?</p>
  <p>My question is <strong>why</strong> is this required? Is there some good explaination of that? Is it related to the need for actual implementation of <strong>await</strong> and supporting it in older JavaScript versions?</p>
  <p>I know <strong>iffi</strong> pattern is used be able to use <strong>await</strong> but does that change the semantics for the code that follows the <strong>iffi</strong> code block in any way?</p>
  <pre><code>(async () =&gt; {
    const response = await fetch('/movies');
    console.log(response);
  })();
  </code></pre>
  <p>I am also aware of top level <strong>await</strong> being supported in modules.</p>
  <p>May be I am missing something really obvious.</p>