Introduction

You do not return the final value from an asynchronous call in the same synchronous way you return from a normal function. Instead, you return something asynchronous, usually a Promise, and the caller waits for that promise with await or .then(...).

That is the core mental shift. The function returns immediately, but the asynchronous result arrives later.

Why A Normal return Does Not Work

A common mistake is trying to assign the result outside the callback and return it immediately:

1function loadUser() {
2  let result;
3
4  fetch('/api/user')
5    .then(response => response.json())
6    .then(data => {
7      result = data;
8    });
9
10  return result;
11}

This returns before the network request finishes, so result is still undefined. The asynchronous work is not done yet.

Return A Promise Instead

The correct pattern is to return the promise chain itself:

1function loadUser() {
2  return fetch('/api/user')
3    .then(response => response.json());
4}
5
6loadUser().then(user => {
7  console.log(user);
8});

Now the caller receives a Promise that will eventually resolve to the response data.

Use async And await For Cleaner Code

The same idea is usually clearer with async and await:

1async function loadUser() {
2  const response = await fetch('/api/user');
3  const user = await response.json();
4  return user;
5}
6
7async function main() {
8  const user = await loadUser();
9  console.log(user);
10}
11
12main();

Even though the code looks more linear, loadUser() still returns a Promise. await just makes consuming it easier to read.

Returning From The Right Function

Another common source of confusion is returning from the callback instead of returning from the outer function. In this example:

1function loadUser() {
2  fetch('/api/user')
3    .then(response => response.json())
4    .then(data => {
5      return data;
6    });
7}

return data only returns from the inner .then(...) callback. The outer loadUser() function still returns undefined because it never returned the promise chain. The fix is:

1function loadUser() {
2  return fetch('/api/user')
3    .then(response => response.json());
4}

That single outer return is the important one.

Error Handling Still Belongs To The Async Flow

Once you return a Promise, error handling belongs to that same async path.

1async function loadUser() {
2  const response = await fetch('/api/user');
3  if (!response.ok) {
4    throw new Error(`HTTP ${response.status}`);
5  }
6  return response.json();
7}
8
9loadUser()
10  .then(user => console.log(user))
11  .catch(err => console.error(err));

Or with try and catch inside another async function:

1async function main() {
2  try {
3    const user = await loadUser();
4    console.log(user);
5  } catch (err) {
6    console.error(err);
7  }
8}

This keeps the result and failure handling in the same asynchronous model.

Callbacks Are The Older Equivalent

If you are working with callback-style APIs rather than promises, the same rule still applies: you cannot synchronously return the eventual value. You either pass a callback forward or wrap the callback API in a promise.

1function loadUserWithCallback(done) {
2  fetch('/api/user')
3    .then(response => response.json())
4    .then(data => done(null, data))
5    .catch(err => done(err));
6}

Modern JavaScript usually prefers promises and async or await, but the underlying timing problem is the same in both models.

Common Pitfalls

One common mistake is trying to read a value immediately after starting the async operation. Another is returning from the inner callback instead of returning the promise from the outer function. Developers also often mix callback and promise styles in one function, which makes control flow harder to follow. Finally, some code handles the success path asynchronously but still throws synchronous assumptions into the caller, which leads to undefined values and confusing logs.

Summary

• You cannot synchronously return the final value of an asynchronous operation.
• Return a Promise and let the caller use await or .then(...).
• With async functions, return still produces a promise result.
• Make sure the outer function returns the promise chain, not just the inner callback.
• Keep error handling inside the same async model as the success path.