async/await
async/await is modern syntax that makes working with Promises easier.
Learning Goals
The Core Concept
`async` and `await` make dealing with promises incredibly easy. The keyword `async` before a function makes that function always return a promise. Inside that function, the keyword `await` tells JavaScript to pause and wait until a promise finishes.
This makes asynchronous code (like downloading a file from the internet) look and behave like normal, top-to-bottom synchronous code, which is much easier to read.
### Best Practices
- **Always use Try/Catch:** When using `await`, wrap your code in a `try/catch` block. If the internet fails, the `catch` block will handle the error gracefully.
- **Run tasks in parallel:** If you are downloading two unrelated files, don't use `await` twice in a row. Use `Promise.all()` to download them both at the same time.
### Common Mistakes
- **Using `await` outside an `async` function:** You cannot use `await` inside a normal function; it will throw a syntax error.
### Interview Questions 1. **Can you use `await` in a regular loop?** *Answer:* Yes, but it will pause the loop on every iteration. If the tasks are independent, it's faster to map them to an array of promises and use `Promise.all()`.
Visual guide
JavaScript concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
// Fake API function returning a Promise
function fetchUser() {
return new Promise(resolve => setTimeout(() => resolve({ name: "Alex" }), 1000));
}
// Using async/await
async function getUserData() {
try {
console.log("Fetching user...");
const user = await fetchUser();
console.log("User found:", user.name);
} catch (error) {
console.error("Failed to fetch user");
}
}
getUserData();Expected Output
Fetching user... (After 1 second) User found: Alex
Practical Project: async/await Implementation
Hands-on practice task
The Challenge
Apply your knowledge of async/await to build a real-world feature. This project helps you move beyond theory and understand how JavaScript works in professional settings.
Helpful Hints
- •Refer back to the 'Steps' section for the correct sequence.
- •Check the 'Tips' for common optimization patterns.
- •Look at the 'Code Highlights' to ensure you're using the right syntax.
Quick Knowledge Check
Can I use await without async?
Continue Learning
Next steps after this lesson
Apply your knowledge of async/await to build a real-world feature. This project helps you move beyond theory and understand how JavaScript works in professional settings.
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.