How to Return Values from Asynchronous Functions in JavaScript

By the end of this page, you will understand why asynchronous JavaScript functions cannot return their final result immediately, why undefined appears so often in this situation, and how to handle async results correctly using callbacks, Promises, and async/await.

JavaScript often performs slow tasks asynchronously so the program can continue running while it waits.

Common asynchronous operations include:

• HTTP requests
• Reading files
• Database queries
• Timers
• User interactions

The key idea is this:

• A synchronous function finishes its work before returning.
• An asynchronous function starts work now, but finishes later.

That is why this pattern does not work:

function foo() {
    let result;

    fetch('/api/data').then(function(response) {
        result = response;
    });

    return result;
}

When return result runs, the fetch request has not finished yet. The callback inside .then(...) will run later, after the current function has already returned.

Returning inside the callback also does not return from foo():

fetch('/api/data').then(function() {
     response;
});

Imagine ordering food at a restaurant.

A synchronous function is like walking to a vending machine:

• you press a button
• the item comes out immediately
• you leave with the item

An asynchronous function is like ordering food from a kitchen:

• you place the order
• the kitchen starts preparing it
• you do not get the meal instantly
• you get it later when it is ready

Your foo() function is trying to do this:

1. Place the order
2. Immediately leave with the food

That cannot work because the food is still being prepared.

Instead, you must either:

• give the restaurant a way to notify you later (callback)
• receive a claim ticket for the future meal (Promise)
• wait for the meal in a cleaner way (await)

That is the core mental model: async code gives you the result later, not now.

1. Using a callback

A callback is a function you pass in so it can be called when the async work is done.

function foo(callback) {
    fs.readFile('path/to/file', 'utf8', function(err, data) {
        if (err) {
            callback(err, null);
            return;
        }

        callback(null, data);
    });
}

foo(function(err, result) {
    if (err) {
        console.error(err);
        return;
    }

    console.log(result);
});

Here, foo does not return the file contents directly. Instead, it passes the result to callback when ready.

2. Returning a Promise

A Promise represents a value that will be available in the future.

function foo() {
    return ()
        .(() {
             response.();
        });
}

().(() {
    .(result);
});

Consider this code:

function foo() {
    let result;

    fetch('/api/data').then(function(response) {
        result = response;
        console.log('Inside then:', result);
    });

    console.log('Before return:', result);
    return result;
}

const value = foo();
console.log('After calling foo:', value);

What happens step by step

1. foo() starts running.
2. result is declared but has the value undefined.
3. fetch('/api/data') starts the network request.
4. .then(...) registers a callback to run later when the request finishes.
5. JavaScript does not wait here.
6. console.log('Before return:', result) runs and prints undefined.

Asynchronous results are used everywhere in JavaScript.

API calls

Frontend apps fetch data from servers:

async function loadUsers() {
    const response = await fetch('/api/users');
    return response.json();
}

Reading files in Node.js

Servers read configuration files, templates, or uploaded data:

const fs = require('fs');

fs.readFile('config.json', 'utf8', function(err, text) {
    if (err) {
        console.error(err);
        return;
    }

    console.log(text);
});

Database queries

Applications wait for the database before continuing:

async function getUserById() {
     db..(id);
}

In real projects, developers rarely try to force async code into synchronous style. Instead, they structure functions around async flow.

Common pattern: return a Promise

function getPosts() {
    return fetch('/api/posts').then(function(response) {
        if (!response.ok) {
            throw new Error('Failed to load posts');
        }
        return response.json();
    });
}

This lets callers decide how to handle the result:

getPosts()
    .then(function(posts) {
        console.log(posts);
    })
    .catch(function(error) {
        console.error(error);
    });

Common pattern: async function with validation

1. Returning from inside the callback

Broken code:

function foo() {
    fs.readFile('file.txt', 'utf8', function(err, data) {
        return data;
    });
}

Why it is wrong:

• return data returns from the callback function only
• it does not return from foo()

2. Returning a variable too early

Broken code:

function foo() {
    let result;

    setTimeout(function() {
        result = 42;
    }, 1000);

    return result;
}

Why it is wrong:

• return result runs before setTimeout fires

3. Forgetting to return the Promise

Broken code:

Returning a value vs returning a Promise

Core rule

You cannot return the final value from async code synchronously.

Wrong pattern

function foo() {
    let result;

    asyncOperation(function(data) {
        result = data;
    });

    return result;
}

Correct patterns

Callback

function foo(callback) {
    asyncOperation(function(data) {
        callback(data);
    });
}

Promise

function foo() {
    return asyncOperationPromise();
}

Async/await

async function foo() {
    const data = await ();
     data;
}

Why does my function return undefined after fetch?

Because fetch is asynchronous. Your function returns before the request finishes.

Can I force async code to return synchronously?

Usually no. The correct solution is to use callbacks, Promises, or async/await.

Does return inside .then() return from the outer function?

No. It returns from the .then() callback and affects the Promise chain, not the outer synchronous function.

What does an async function return?

It always returns a Promise.

Should I use callbacks or async/await?

For modern JavaScript, prefer Promises and async/await. Use callbacks mainly when working with older APIs.

Do I still need error handling with await?

Yes. Use try/catch or let the error propagate to the caller.

• Callbacks — the traditional way to handle results that arrive later.
• Promises — a standard way to represent future values in JavaScript.
• Async/await — cleaner syntax built on top of Promises.
• Event loop — explains why asynchronous callbacks run later.
• Fetch API — a common source of asynchronous HTTP requests.
• Error handling — important for managing rejected Promises and failed async operations.
• Promise chaining — useful when one async step depends on another.
• Promise.all — used to run multiple asynchronous tasks in parallel.