Say you have this problem: you are making an asynchronous call, and you need the result of that call to be returned from the original function.

Like this:

const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}

but asynchronousFunction() performs some asynchronous call in it (for example a fetch() call), and can’t directly return the result value. Perhaps internally it has a promise it needs to wait for, or a callback. Like this:

const asynchronousFunction = () => {
  return fetch('./file.json').then(response => {
    return response
  })
}

What can you do instead?

Using Async/Await

Async/await is the most straightforward solution. You use the await keyword instead of a promise-based approach:

const asynchronousFunction = async () => {
  const response = await fetch('./file.json')
  return response
}

In this case in mainFunction we need to add async to the function signature, and await before we call asynchronousFunction():

const mainFunction = async () => {
  const result = await asynchronousFunction()
  return result
}

Now this returns a promise, because it’s an async function:

mainFunction() //returns a Promise

So to get the result back you can wrap this in an IIFE like this:

(async () => {
  console.log(await mainFunction())
})()

The code looks like synchronous code you are used to from other languages, but it’s completely async.

Using Callbacks

Another approach is to use callbacks. But while with async/await we could change just the asynchronousFunction() code, in this case we have to:

1. modify the asynchronousFunction() code
2. modify the mainFunction() code
3. modify the calling code, too

Here’s an example. asynchronousFunction() receives a new function as a parameter, which we call callback. It invokes it passing the response object:

const asynchronousFunction = callback => {
  return fetch('./file.json').then(response => {
    callback(response)
  })
}

This function is passed by mainFunction:

const mainFunction = () => {
  const callback = result => {
    console.log(result)
  }

  asynchronousFunction(callback)
}

The final piece of the puzzle is in the function that calls mainFunction. Since we can’t return the response straight from mainFunction, because we get that asynchronously, the calling function must change how it processes it.

So instead of const result = mainFunction(), we could use:

const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => {
  asynchronousFunction(callback)
}

//call the code
mainFunction(callbackFunction)

Lessons in this unit:

0:	Introduction
1:	Generate Random Numbers in a Range
2:	Get Index in for...of Loop
3:	Unlimited Function Parameters
4:	▶︎ Return Result from Async Function
5:	Encode and Decode URLs
6:	Destructuring Tips
7:	Number Formatting
8:	Regex Recipes
9:	Dynamic function name in JS