console.log(getValue()) shows a Promise because getValue() returns an object representing an asynchronous result—not the result itself. To log the actual value, wait for the Promise with await or handle it with .then(). The displayed Promise {} is a developer-console representation; its braces are not the value the operation will eventually produce.
What “Promise {}” means
A Promise represents the eventual completion or failure of an asynchronous operation and its resulting value. When you call a promise-returning function, JavaScript gives you the Promise immediately. The operation may still be pending, so its fulfillment value is not yet available to log. A console may display the Promise as Promise {} or use another representation depending on the runtime and the Promise’s state. See MDN’s Promise reference and its JavaScript debugging guide.
As an Amazon Associate I earn from qualifying purchases.
A Promise can be pending, fulfilled, or rejected. When fulfilled, it supplies a value; when rejected, it supplies a rejection reason rather than a successful result. Handle that rejection as an error instead of expecting a value to print.
How to log the fulfilled value
Use await with an async function
Use await when the surrounding code is an async function. It pauses that function until the Promise settles: the expression evaluates to the fulfillment value, or throws the rejection reason. It does not block the entire main thread.
#1 Best Overall
async function showValue() {
try {
const value = await getValue();
console.log(value);
} catch (error) {
console.error(error);
}
}
showValue();await is also allowed at the top level of a JavaScript module. In an ordinary script, put it inside an async function as above. See MDN’s await reference.
Use .then() and .catch()
Alternatively, attach handlers directly to the Promise. The fulfillment handler receives the value, and the rejection handler handles an error.
Rank #2
getValue()
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
});Both patterns handle asynchronous work; neither makes it synchronous. Choose the one that fits the surrounding code:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches| Pattern | Useful when | Error handling |
|---|---|---|
await |
Sequential steps inside an async function, or at module top level | try/catch |
.then() |
Continuing an existing Promise chain | .catch() or a rejection handler |
In a Promise chain, return asynchronous work from a handler when later steps depend on it. Otherwise, that work is not tracked by the chain and later handlers cannot reliably wait for its completion. MDN explains this in Using promises.
Why an async function still logs a Promise
Every call to an async function returns a Promise, even if the function returns an ordinary value. An await inside that function affects its own next statements; it does not give the caller a synchronous value.
async function getValue() {
return 42;
}
console.log(getValue()); // Promise objectThe caller must also wait for the result or attach a handler:
Rank #4
getValue().then((value) => console.log(value));For the function above, that handler logs 42 after the Promise fulfills. See MDN’s async function reference.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →When the Promise comes from fetch()
fetch(url) returns a Promise for a Response; it does not immediately return the response body. Calling response.json() also returns a Promise, so await that step too before logging the parsed data. A completed fetch does not necessarily mean the HTTP status was successful; check response.ok if unsuccessful status codes should be treated as errors.
async function showData(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}This follows the pattern in MDN’s How to use promises.
Quick Recap
Quick checks if you still see a Promise
- Check whether the expression being logged calls an async function or another Promise-returning operation.
- Make sure you log the value received by
awaitor by a.then()handler, not the original Promise. - If one Promise handler starts another asynchronous operation that later code depends on, return that operation from the handler.
- Handle rejection with
try/catchor.catch(); a rejected Promise does not produce a successful value.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
