Fetch an array from API endpoint in async function I've been studying javascript for the love of it, I'm currently learning how to use async functions and my code actually works, but I know there is always room for improving.

I'm open to any help regarding my use of async functions and how I use the return of sizeJokesArray() in fetchJokes().



const jokeContainer = document.querySelector('.joke-container');

async function sizeJokesArray() {
  let url = 'https://api.icndb.com/jokes/count';
  let data = await (await fetch(url)).json();
  return data.value;
}

async function fetchJokes() {
  let url = `https://api.icndb.com/jokes/random/${length}`;
  let jokesData = [];
  let data = await (await fetch(url)).json();
  for (jokePosition in data.value) {
    jokesData.push(data.value[jokePosition].joke);
  }
  return jokesData;
}

sizeJokesArray().then(size =&gt; (length = size)); // return of sizeJokesArray

jokeContainer.addEventListener('click', event =&gt; {
  if (event.target.value === 'Fetch') {
    fetchJokes(length).then(jokesData =&gt; (jokesArray = jokesData)).then(jokesData =&gt; (console.log(jokesData)));
  }
});
&lt;div class="joke-container"&gt;
    &lt;div class="joke-text"&gt;
        &lt;p&gt;Fetch some jokes bro!!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="joke-controls"&gt;
        &lt;button type="button" value="Fetch"&gt;Fetch Jokes&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;




the existing console.log() it's not actually used in my code just used it here to log my results for the question purpose.
I've improved a few things to your script, making it more consistent over all:


;(function () {
  const jokeContainer = document.querySelector('.joke-container')

  async function fetchCount() {
    const url = 'https://api.icndb.com/jokes/count'
    const { value } = await (await fetch(url)).json()

    return value
  }

  async function fetchJokes(length = fetchCount()) {
    const url = `https://api.icndb.com/jokes/random/${await length}`
    const { value } = await (await fetch(url)).json()

    return value.map(({ joke }) =&gt; joke)
  }

  jokeContainer.addEventListener('click', async event =&gt; {
    if (event.target.value === 'Fetch') {
      const jokes = await fetchJokes()

      console.log(jokes)
    }
  })
}())
&lt;div class="joke-container"&gt;
  &lt;div class="joke-text"&gt;
    &lt;p&gt;Fetch some jokes bro!!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="joke-controls"&gt;
    &lt;button type="button" value="Fetch"&gt;Fetch Jokes&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;




Wrapped your script in an IIFE to avoid polluting the global scope.
Removed your bizarre usage of the global length variable, which you defined without using var, let, or const, and is considered bad practice.
Used object destructuring to improve the readability of your code in some places.
Declared your event listener as async in order to take advantage of await instead of using a then() chain to improve consistency and readability.
Converted your imperative initialization of jokesData into a functional idiomatic approach using Array#map() in order to further improve readability.