JavaScript Async/Await for Beginners: A Simple Guide

If you searched for "JavaScript async/await explained for beginners," here is the short answer: async/await is a way to write code that waits for slow things (like loading data from the internet) without making your code confusing. It lets you write "wait for this, then do that" logic in a style that reads top to bottom, just like normal code.

In this guide, we will build up to async/await one small idea at a time. You do not need any prior experience with promises or asynchronous code. Every term is explained the first time it appears, and every code example is short enough to copy, paste, and run yourself.

What does "asynchronous" mean?

Most of the code you write runs synchronously, meaning line by line, in order, and each line waits for the one before it to finish. But some tasks take an unknown amount of time, such as fetching data from a server, reading a file, or waiting a few seconds before doing something. These are called asynchronous tasks.

JavaScript does not want to freeze your whole program while it waits for a slow task. So it lets that slow task run in the background and continues running other code in the meantime. Async/await is the modern way to say "pause here, in this specific spot, until the slow task finishes" without freezing anything else.

A quick primer on promises

To understand await, you first need to know what a promise is, because await only works with promises. A promise is an object that represents a value you will get later, not right now. Think of it like a food delivery tracking number: you do not have your food yet, but you have something that will eventually tell you it arrived (or that something went wrong).

A promise can be in one of three states: pending (still waiting), fulfilled (it succeeded, and you now have a result), or rejected (it failed, and you get an error instead). Functions like fetch(), which loads data from the internet, return a promise immediately, even though the actual data has not arrived yet.

The async keyword

Adding the word async in front of a function turns it into an async function. An async function always returns a promise, even if you write a plain value inside it. JavaScript automatically wraps your returned value in a promise for you.

async function greet() {
  return "Hello!";
}

greet().then((message) => console.log(message));
// Output: Hello!

Line by line: `async function greet() { ... }` declares an async function named greet. Inside it, `return "Hello!";` looks like a normal return, but because the function is async, JavaScript actually returns a promise that resolves to the string "Hello!". On the last line, `greet()` runs the function and gives us that promise, and `.then((message) => console.log(message))` says "once the promise is fulfilled, run this code with the result."

The await keyword

The await keyword can only be used inside an async function. It pauses that function on the current line until the promise next to it settles (either fulfilled or rejected), then gives you the result directly, instead of making you write a `.then()` call.

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function sayHiLater() {
  console.log("Waiting...");
  await wait(1000);
  console.log("Hi! (this printed after 1 second)");
}

sayHiLater();

Here is what each part does. `wait(ms)` is a helper function that returns a new promise, which resolves (finishes successfully) after `ms` milliseconds, using JavaScript's built-in `setTimeout`. Inside `sayHiLater()`, we log "Waiting..." first. Then `await wait(1000)` pauses the function for one second (1000 milliseconds) before moving to the next line. Finally, we log the second message. Notice that the code reads top to bottom, even though it includes a real delay — that is the whole point of async/await.

A real example: fetching data from an API

The most common place you will see async/await is when loading data from a server using the built-in `fetch()` function. Fetch returns a promise, so it pairs naturally with await.

async function getUser() {
  const response = await fetch("https://api.github.com/users/octocat");
  const data = await response.json();
  console.log(data.name);
}

getUser();

`fetch("https://api.github.com/users/octocat")` starts a request to a web address and returns a promise, so we `await` it to get the actual response once it arrives. That response contains raw data, so `response.json()` converts it into a usable JavaScript object — this is also asynchronous, so we `await` it too. Once both steps finish, `data` holds the real information, and we can read `data.name` like any normal object property.

Handling errors with try/catch

When a promise is rejected (something went wrong, such as no internet connection), an `await` on that promise throws an error. You can catch that error using a try/catch block, the same way you would catch errors in regular JavaScript code.

async function getUserSafely() {
  try {
    const response = await fetch("https://api.github.com/users/octocat");
    const data = await response.json();
    console.log(data.name);
  } catch (error) {
    console.log("Something went wrong:", error.message);
  }
}

getUserSafely();

The `try` block wraps the code that might fail. If any `await` inside it throws an error, JavaScript immediately jumps to the `catch (error)` block instead of crashing your program, and `error.message` gives you a readable description of what went wrong. This is the standard, recommended way to handle errors with async/await.

async/await vs. .then(): what's the difference?

Async/await does not replace promises — it is just an easier way to write code that uses them. Under the hood, both approaches do the same thing. Here is a side-by-side comparison of the two styles:

Common mistakes beginners make

• Forgetting to add async before a function that uses await — this causes a syntax error.
• Forgetting to write await in front of a function call that returns a promise, so you get a Promise object printed instead of the actual value.
• Thinking async/await makes code run faster — it does not. It only makes waiting code easier to read and write.
• Wrapping the entire function body in one giant try/catch when you only need to catch errors around the risky part.
• Trying to use await inside a regular function that is not marked async.

Practice: put it together

Try writing your own async function that fetches a joke from a public API and prints it to the console. Start with the getUser() example above, change the URL, and change data.name to whatever property the new API returns. Making small changes to working code like this is one of the fastest ways to build confidence with async/await.