Wait, Does 'await' Make My Code Synchronous? Understanding Async/Await's Double Nature

I'm a backend developer learning frontend, and I just encountered something confusing. I use await login({ email, password }) and my code waits for the response before continuing—isn't that synchronous? 🤔 But the method is marked async, so it's asynchronous? My frontend mentor explained the beautiful double nature of async/await: it makes code look synchronous inside the function but stay asynchronous to the outside world. This conversation finally made async/await click for me.

The Confusing Await Statement

Me (Backend Dev): I'm learning asynchronous JavaScript for my login form. Look at this code:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);
  setError(null);
  setSuccess(false);

  try {
    await login({ email, password });  // Line 20
    setSuccess(true);                  // Line 21
    setEmail('');
    setPassword('');
  } catch (err) {
    // Handle error
  } finally {
    setLoading(false);
  }
};

My question: At line 20, await login({ email, password }) makes the code wait until the response comes back, right? We don't go to line 21 or the catch statement until the response arrives. Doesn't that make it synchronous?

But the method is marked async, so it's asynchronous. This seems contradictory! Can you clarify?

The Beautiful Double Nature of Async/Await

Frontend Mentor: Excellent question! You've identified the most confusing aspect of async/await. Let me explain this step by step:

The Key Insight

async/await has a double nature:

1. Inside the function: Code behaves synchronously (waits at await)
2. Outside the function: Function doesn't block the browser (stays async)

You get the best of both worlds! ✨

Inside the Async Function (Lines 19-24)

try {
  await login({ email, password });  // ⏸️ PAUSES HERE until response
  setSuccess(true);                  // ⬅️ Only runs AFTER line 20 completes
  setEmail('');                      // ⬅️ Only runs AFTER line 21
  setPassword('');                   // ⬅️ Only runs AFTER line 22
}

✅ You're correct! Inside this function, await makes it behave like synchronous code:

• Execution WAITS at line 20 until login() finishes
• Line 21 (setSuccess(true)) won't run until the response comes back
• If login() throws an error → jumps directly to catch block (skips lines 21-24)

This is intentional! It makes async code easier to read and reason about.

Outside the Async Function (The Rest of Your App)

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);

  try {
    await login({ email, password });  // ⏸️ Function pauses HERE
    // ... rest of code
  } catch (err) {
    // ...
  }
};

❌ handleSubmit does NOT block other processes!

When user clicks "Login":

1. handleSubmit starts executing
2. Gets to await login(...)
3. Yields control back to the browser
4. Browser can still:
   • ✅ Respond to other clicks
   • ✅ Update the UI
   • ✅ Run other JavaScript
   • ✅ Handle animations
5. When API response arrives → handleSubmit resumes from where it paused

This is the magic of async/await!

Visual Timeline: What's Happening

Me: Can you show me a timeline of what happens?

Frontend Mentor: Absolutely! Here's the complete flow:

The Timeline

USER ACTION          HANDLESUBMIT FUNCTION              BROWSER/UI
─────────────────────────────────────────────────────────────────────
Click Login    →     Line 14: e.preventDefault()
                     Line 15: setLoading(true)     →    Button shows "Logging in..."
                     Line 16: setError(null)
                     Line 17: setSuccess(false)

                     Line 20: await login(...)     →
                     ⏸️ PAUSES (but doesn't block!)

                     [Function yields control]     →    User can still:
                                                        - Scroll page ✅
                                                        - Click other buttons ✅
                                                        - See animations ✅
                                                        - Type in other fields ✅

                     ⏳ Waiting for API response...
                     (Browser continues working!)

[500ms pass]         [API responds with success]

                     ▶️ RESUMES at Line 20
                     Line 21: setSuccess(true)     →    Shows green success box
                     Line 22: setEmail('')
                     Line 23: setPassword('')

                     Line 37: setLoading(false)    →    Button back to "Login"

Key Observation

While handleSubmit is paused at await:

• ✅ Your app's UI is still responsive
• ✅ Users can interact with the page
• ✅ Animations keep running
• ✅ Other JavaScript executes normally
• ✅ React can re-render other components

The function pauses, but the browser doesn't!

Synchronous vs Async/Await vs Callbacks

Me: How does this compare to truly synchronous code?

Frontend Mentor: Great question! Let me show you all three approaches:

1. Truly Synchronous (Doesn't Exist in JS for HTTP)

// ❌ This doesn't exist, but imagine if it did:
function syncLogin() {
  const response = loginSync();  // Blocks ALL JavaScript!
  console.log(response);         // Browser frozen until response
}

// If this existed:
syncLogin();  // ← Browser completely FREEZES
console.log("This won't run until login finishes");

Result:

Browser: 🥶 FROZEN
User: 😤 Can't click anything
Animations: ⏸️ Stopped
Other code: ⏸️ Blocked

This is why JavaScript doesn't have synchronous HTTP requests for the main thread!

2. Async/Await (Modern Approach)

async function asyncLogin() {
  const response = await login();  // Pauses function, NOT browser
  console.log(response);           // Runs after response
}

asyncLogin();  // ← Function runs but doesn't block
console.log("This runs immediately!");  // ← Prints first!

Result:

Console output:
"This runs immediately!"  ← Prints first
[...500ms later...]
"Login successful"        ← Prints second

Browser: 😊 Responsive
User: ✅ Can interact
Animations: ▶️ Running
Other code: ▶️ Executing

3. Callbacks (Old Approach)

function callbackLogin() {
  login((response) => {  // Callback hell!
    console.log(response);
    updateProfile((profile) => {
      loadDashboard((data) => {
        // 😱 Callback pyramid of doom!
      });
    });
  });
}

callbackLogin();
console.log("This runs immediately!");  // ← Also prints first

Same async behavior, but harder to read!

The Mental Model: Restaurant Analogy

Me: Can you give me a real-world analogy?

Frontend Mentor: Perfect question! Here's a restaurant analogy:

Synchronous (Blocking) - Bad Restaurant

You: "I'll have a burger."
Waiter: *Goes to kitchen and STANDS THERE waiting*
         *Restaurant FREEZES*
         *No other customers can order*
         *No other waiters can move*
[30 minutes pass...]
Waiter: *Brings burger*
You: "Thanks!"
Restaurant: *Unfreezes*

Everyone is blocked! Terrible experience! ❌

Async/Await (Non-Blocking) - Good Restaurant

You: "I'll have a burger."
Waiter: "Sure! I'll bring it when ready." *Writes order*
        *Gives order to kitchen*
        *Goes to serve other customers* ✅

[Meanwhile:]
- Other customers can order ✅
- Kitchen is cooking ✅
- You can chat with friends ✅
- Restaurant keeps running ✅

[30 minutes later]
Kitchen: "Order ready!"
Waiter: *Brings your burger*
You: "Thanks!"

Everyone stays productive! Great experience! ✅

Mapping to Your Code

// You (the user) click Login button
await login({ email, password });
// Waiter (JavaScript) takes your order

// While waiting for response:
// - You can scroll the page (customer can chat)
// - Other buttons work (other customers can order)
// - UI updates (restaurant keeps running)

// When API responds:
setSuccess(true);  // Waiter brings your burger

Inside vs Outside: The Code Flow

Me: So inside the function it waits, but outside it doesn't block?

Frontend Mentor: Exactly! Let me show you this clearly:

What Happens Inside handleSubmit

const handleSubmit = async (e: React.FormEvent) => {
  console.log("1. Starting");

  await login({ email, password });  // ⏸️ Pauses here

  console.log("2. After login");  // ← Won't run until login completes
  setSuccess(true);

  console.log("3. Done");  // ← Won't run until line above completes
};

Execution order inside the function:

Console output:
"1. Starting"
[...waits for API...]
"2. After login"
"3. Done"

Linear, predictable, synchronous-looking! ✅

What Happens Outside handleSubmit

console.log("A. Before button click");

// User clicks Login button
handleSubmit(event);  // Starts async function

console.log("B. After button click");  // ← Runs IMMEDIATELY!

// Meanwhile, in another component:
console.log("C. Other code");  // ← Also runs immediately!

Execution order:

Console output:
"A. Before button click"
"1. Starting"                 ← From inside handleSubmit
"B. After button click"       ← Runs while handleSubmit is waiting!
"C. Other code"               ← Runs while handleSubmit is waiting!
[...handleSubmit is paused at await...]
[...500ms later, API responds...]
"2. After login"              ← handleSubmit resumes
"3. Done"

Non-blocking, asynchronous! ✅

Error Handling: Try/Catch Makes Sense Now

Me: So if await throws an error, we jump to catch?

Frontend Mentor: Exactly! This is one of the huge benefits of async/await:

Traditional Callbacks (Messy)

login({ email, password },
  (response) => {
    // Success callback
    setSuccess(true);
    setEmail('');
  },
  (error) => {
    // Error callback
    setError(error.message);
  }
);

Problems:

• ❌ Two separate callbacks
• ❌ Hard to handle complex flows
• ❌ Error handling split from main logic

Async/Await (Clean)

try {
  await login({ email, password });  // ⏸️ Wait for success
  setSuccess(true);  // ← Only runs if login succeeds
  setEmail('');
} catch (err) {
  setError(err.message);  // ← Only runs if login fails
}

Benefits:

• ✅ Try/catch just like synchronous code
• ✅ Error handling in one place
• ✅ Easy to read and maintain

The Flow with Errors

try {
  console.log("1. Before login");

  await login({ email, password });  // ❌ Throws error

  console.log("2. After login");  // ← SKIPPED!
  setSuccess(true);  // ← SKIPPED!

} catch (err) {
  console.log("3. In catch block");  // ← Jumps here!
  setError(err.message);
}

console.log("4. After try/catch");  // ← Always runs

If login fails:

Console output:
"1. Before login"
[...API returns error...]
"3. In catch block"
"4. After try/catch"

Lines 2 and setSuccess are completely skipped!

Real-World Example: Complete Login Flow

Me: Can you show me the complete flow with real code?

Frontend Mentor: Absolutely! Here's your login with detailed comments:

const handleSubmit = async (e: React.FormEvent) => {
  // Step 1: Prevent form reload
  e.preventDefault();

  // Step 2: Set loading state (UI updates immediately)
  setLoading(true);
  setError(null);
  setSuccess(false);

  try {
    // Step 3: Call API (function pauses here, but browser doesn't!)
    // ⏸️ PAUSE: Wait for API response
    // Meanwhile: UI shows "Logging in...", user can scroll, etc.
    await login({ email, password });

    // Step 4: Success! (Only runs if Step 3 succeeds)
    // ▶️ RESUME: API returned success
    setSuccess(true);  // Show success message
    setEmail('');      // Clear email field
    setPassword('');   // Clear password field

    // Optional: Redirect after 2 seconds
    setTimeout(() => {
      navigate('/dashboard');
    }, 2000);

  } catch (err: any) {
    // Step 4 (Alternative): Error! (Only runs if Step 3 fails)
    // ▶️ RESUME: API returned error
    setError(err.response?.data?.message || 'Login failed');

  } finally {
    // Step 5: Always runs (success or error)
    setLoading(false);  // Hide loading state
  }
};

Timeline with UI States

Time    Function State              UI State
─────────────────────────────────────────────────────────
0ms     Click button                Normal button
        ├─ e.preventDefault()
        └─ setLoading(true)         → "Logging in..." (disabled)

1ms     await login(...)            "Logging in..." (user can scroll)
        ⏸️ PAUSED

2ms     [Other code can run!]       Page still responsive

500ms   API responds ✅
        ▶️ RESUMES
        ├─ setSuccess(true)         → Green success message
        ├─ setEmail('')             → Email field cleared
        ├─ setPassword('')          → Password field cleared
        └─ setLoading(false)        → "Login" button

2500ms  navigate('/dashboard')      → Redirect to dashboard

Promises Under the Hood

Me: What's actually happening with await? What's a Promise?

Frontend Mentor: Great question! await is syntactic sugar over Promises:

Without Async/Await (Promise Chain)

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);

  login({ email, password })
    .then((response) => {
      // Success
      setSuccess(true);
      setEmail('');
      setPassword('');
    })
    .catch((err) => {
      // Error
      setError(err.message);
    })
    .finally(() => {
      // Always runs
      setLoading(false);
    });
};

With Async/Await (Same Thing, Cleaner)

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);

  try {
    await login({ email, password });  // ← Same as .then()
    setSuccess(true);
    setEmail('');
    setPassword('');
  } catch (err) {                      // ← Same as .catch()
    setError(err.message);
  } finally {                          // ← Same as .finally()
    setLoading(false);
  }
};

They're identical! async/await is just nicer syntax. ✨

What login() Actually Returns

// The login function returns a Promise
function login(credentials: LoginCredentials): Promise<LoginResponse> {
  return axios.post('/api/login', credentials);
}

// When you call it:
const promise = login({ email, password });
// promise is a Promise object (pending state)

// When you await it:
const response = await login({ email, password });
// response is the actual data (promise resolved)

Common Mistakes with Async/Await

Me: What mistakes do beginners make?

Frontend Mentor: Great question! Here are the most common ones:

Mistake 1: Forgetting await

❌ Wrong:
async function handleSubmit() {
  login({ email, password });  // ← Missing await!
  setSuccess(true);  // ← Runs IMMEDIATELY (before login finishes)
}

✅ Correct:
async function handleSubmit() {
  await login({ email, password });  // ← Waits for login
  setSuccess(true);  // ← Runs after login completes
}

Mistake 2: Forgetting async Keyword

❌ Wrong:
function handleSubmit() {
  await login({ email, password });  // ← ERROR! Can't use await
}

✅ Correct:
async function handleSubmit() {
  await login({ email, password });  // ← Works!
}

Mistake 3: Not Handling Errors

❌ Wrong:
async function handleSubmit() {
  await login({ email, password });  // ← What if this fails?
  setSuccess(true);  // ← Might not run if error occurs
}

✅ Correct:
async function handleSubmit() {
  try {
    await login({ email, password });
    setSuccess(true);
  } catch (err) {
    setError(err.message);  // ← Handle errors!
  }
}

Mistake 4: Blocking with Unnecessary await

❌ Inefficient (sequential):
async function loadData() {
  const users = await fetchUsers();     // ⏸️ Wait 500ms
  const posts = await fetchPosts();     // ⏸️ Wait another 500ms
  const comments = await fetchComments(); // ⏸️ Wait another 500ms
  // Total: 1500ms
}

✅ Efficient (parallel):
async function loadData() {
  const [users, posts, comments] = await Promise.all([
    fetchUsers(),     // All three run at the same time!
    fetchPosts(),
    fetchComments()
  ]);
  // Total: 500ms (the longest request)
}

Mistake 5: Using async Without await

❌ Unnecessary:
async function handleClick() {
  console.log("Button clicked");  // ← No await needed!
  setCount(count + 1);
}

✅ Better:
function handleClick() {
  console.log("Button clicked");
  setCount(count + 1);
}

Only use async if you're using await inside!

When to Use Async/Await

Me: When should I use async/await?

Frontend Mentor: Here's a decision guide:

Use Async/Await For:

✅ API calls

const response = await fetch('/api/data');

✅ Database queries

const user = await User.findById(id);

✅ File operations

const data = await fs.readFile('file.txt');

✅ Timers

await sleep(1000);  // Wait 1 second

✅ Any Promise-based operation

await somePromiseFunction();

Don't Use Async/Await For:

❌ Synchronous code

// ❌ Wrong:
async function add(a, b) {
  return a + b;
}

// ✅ Right:
function add(a, b) {
  return a + b;
}

❌ Event handlers without async operations

// ❌ Unnecessary:
const handleClick = async () => {
  setCount(count + 1);
};

// ✅ Better:
const handleClick = () => {
  setCount(count + 1);
};

Key Takeaways

Me: Let me make sure I understand this:

Frontend Mentor: Perfect! Here's the summary:

The Double Nature of Async/Await:

1. Inside the function:

   • await makes code wait (synchronous-like)
   • Execution pauses until Promise resolves
   • Code flows linearly, top to bottom
   • Easy to read and understand

2. Outside the function:

   • Function doesn't block the browser
   • Other code continues running
   • UI stays responsive
   • Users can interact with the page

The Execution Flow:

try {
  await login({ email, password });  // ⏸️ Pauses here
  setSuccess(true);  // ← Won't run until login completes
  setEmail('');      // ← Won't run until previous line completes
} catch (err) {
  setError(err.message);  // ← Only runs if await throws error
}

Inside the function: Linear, predictable, synchronous-looking Outside the function: Non-blocking, asynchronous, responsive

Why This Is Awesome:

• ✅ Write asynchronous code that looks synchronous
• ✅ Easy error handling with try/catch
• ✅ Browser stays responsive
• ✅ Better than callback hell
• ✅ Better than Promise chains (for readability)

Remember:

async/await gives you the best of both worlds:

• Developer: Code looks simple and synchronous
• User: App stays fast and responsive

It's synchronous-looking code with asynchronous behavior! 🎯

---

Me: This is brilliant! I finally understand why we use async/await. It makes asynchronous code readable without blocking the browser. Perfect for frontend!

Frontend Mentor: Exactly! Coming from backend, you're probably used to blocking operations (waiting for database queries, file I/O, etc.). In frontend, we need the UI to stay responsive, so everything is asynchronous. async/await makes this manageable by letting you write code that looks synchronous but behaves asynchronously.

Now you understand the magic behind modern JavaScript async programming! 🚀

---

Did async/await confuse you too? Share your "aha moment" in the comments! 💬