title: Javascript fetch api
body: <p>i'm trying to assign the variable <strong>countries</strong> to the response of the fetch api but when i print out countries i get <strong>undefined</strong> ? can anyone explain to me why ? and a solution if it is possible.</p>
  
  <pre><code>async function getCountries(url) {
      const data = await fetch(url);
      const response = await data.json();
      return response;
  }
  
  let countries;
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
      getCountries('https://restcountries.eu/rest/v2/all')
      .then(res =&gt; countries = res)
      .catch(err =&gt; console.log(err));
  
  })
  
  console.log(countries);
  </code></pre>