JavaScript Async Await and Promises Explained for Interviews and Real Projects

 Introduction

JavaScript runs on a single thread. One thing at a time. That sounds slow and painful. Yet JavaScript handles network requests, timers, and file operations without freezing your app. This works because of asynchronous programming.

If you do not understand async code, you will fail interviews and write fragile production code. This post fixes that.

What Asynchronous Means in JavaScript
Synchronous code runs line by line. Each line blocks the next one.

Example

console.log("A");
console.log("B");
console.log("C");

Output
A
B
C

Asynchronous code does not block. Long tasks run in the background. JavaScript moves on.

Example

console.log("A");

setTimeout(() => {
  console.log("B");
}, 1000);

console.log("C");

Output
A
C
B

JavaScript did not wait for the timer. That is the whole point.

The Problem Before Promises

Old JavaScript used callbacks. Lots of them.

Example

getUser(id, function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      console.log(comments);
    });
  });
});

This is callback hell. Hard to read. Hard to debug. Easy to break. Everyone hated it for good reasons.

Promises Fixed This

A Promise represents a value that will exist later.

A Promise has three states
pending
fulfilled
rejected

Basic Promise example

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Data loaded");
  } else {
    reject("Something broke");
  }
});

Consuming a Promise

promise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  });

then runs on success
catch runs on failure

Promises make async code predictable.

Real Example With fetch

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

This is already better than callbacks. Still not great to read.

Async and Await Made It Human

async and await are syntax on top of Promises. They do not replace Promises. They clean them up.

Basic async function

async function getData() {
  return "Hello";
}

This returns a Promise automatically.

Using await

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

This looks synchronous. It is not. JavaScript still stays non blocking.

Error Handling With try catch

async function getUsers() {
  try {
    const response = await fetch("https://api.example.com/users");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

This is how you handle errors in real projects. If you skip this, bugs will eat you alive.

Promise vs Async Await

Promises:
You chain with then and catch
Good for simple flows
Gets messy with many steps

Async Await
Cleaner and easier to read
Uses try catch
Better for complex logic

Interviewers expect you to know both.

Parallel Async Operations
await runs sequentially by default.

Slow version

const user = await getUser();
const posts = await getPosts();

Fast version

const [user, posts] = await Promise.all([
  getUser(),
  getPosts()
]);

This matters in real apps. Performance is not optional.

Common Interview Questions

1) Does await block JavaScript
No. It pauses only the async function.

2) Can you use await outside async
No. Except at top level in modern modules.

3) Is async await faster than Promises
No. Same engine. Different syntax.

4) What happens if a Promise rejects and you do not catch it
You get unhandled promise rejections. Production bugs. Logs full of regret.

Real Project Rules You Should Actually Follow
Always wrap await calls in try catch
Use Promise.all for independent tasks
Never mix callbacks with async await
Never ignore rejected Promises
Read error messages instead of guessing