Async function syntax in Javascript - Deep Dive

Overview - Async function syntax

What is it?

Async function syntax in JavaScript allows you to write functions that work with operations that take time, like fetching data from the internet, without stopping the whole program. These functions use the keyword 'async' before the function and 'await' inside to pause until a task finishes. This makes your code easier to read and write compared to older methods like callbacks or promises alone.

Why it matters

Without async functions, handling tasks that take time would make your program confusing and slow because it would wait for each task to finish before moving on. Async functions let your program do other things while waiting, making apps faster and smoother. This is especially important for web apps where waiting for data should not freeze the screen.

Where it fits

Before learning async functions, you should understand basic JavaScript functions and promises. After mastering async functions, you can learn about advanced asynchronous patterns like concurrency control, error handling with try/catch in async code, and using async iterators.

Mental Model

Core Idea

Async functions let your code pause and wait for slow tasks without stopping everything else, making asynchronous code look and behave like normal, easy-to-read code.

Think of it like...

Imagine cooking dinner while waiting for water to boil. Instead of standing and staring at the pot, you prepare the salad. Async functions are like being able to pause watching the pot and do other things until the water boils.

┌───────────────┐
│ Async Function│
│  (async fn)   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Await Task   │
│ (await promise)│
└──────┬────────┘
       │ (pause until done)
       ▼
┌───────────────┐
│ Continue Code │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Basic function and promises

Concept: Understanding how normal functions and promises work is the base for async functions.

A normal function runs code step by step. A promise is a special object that represents a task that will finish later, either successfully or with an error. Example: function fetchData() { return new Promise(resolve => { setTimeout(() => resolve('data'), 1000); }); } fetchData().then(result => console.log(result));

Result

After 1 second, 'data' is printed to the console.

Knowing promises helps you understand what async/await is waiting for and why it makes code easier to read.

2

Foundation

Introducing async keyword

Concept: Marking a function as async means it always returns a promise and allows using await inside it.

Example: async function getData() { return 'hello'; } getData().then(console.log); This prints 'hello' because async functions wrap the return value in a promise.

Result

'hello' is printed after the promise resolves.

Understanding that async functions always return promises is key to using them correctly.

3

Intermediate

Using await to pause execution

🤔Before reading on: do you think 'await' stops the whole program or just the async function? Commit to your answer.

Concept: The await keyword pauses the async function until the awaited promise resolves, without blocking the whole program.

Example: async function fetchAndLog() { const data = await fetchData(); console.log(data); } fetchAndLog(); Here, fetchAndLog waits for fetchData to finish before logging.

Result

'data' is printed after 1 second delay, but other code can run meanwhile.

Knowing await pauses only the async function, not the entire program, helps avoid confusion about blocking.

4

Intermediate

Error handling with try/catch

🤔Before reading on: do you think errors in awaited promises can be caught with normal try/catch? Commit to your answer.

Concept: You can use try/catch inside async functions to handle errors from awaited promises cleanly.

Example: async function safeFetch() { try { const data = await fetchDataWithError(); console.log(data); } catch (error) { console.log('Error caught:', error.message); } } safeFetch();

Result

If fetchDataWithError rejects, 'Error caught: ...' is printed instead of crashing.

Understanding try/catch with await simplifies error handling compared to promise chains.

5

Intermediate

Async arrow functions and expressions

Concept: Async functions can be written as arrow functions or expressions, making them flexible in different coding styles.

Example: const asyncArrow = async () => { const result = await fetchData(); return result; }; asyncArrow().then(console.log);

Result

'data' is printed after the promise resolves.

Knowing async syntax works with arrow functions helps write modern, concise code.

6

Advanced

Parallel vs sequential awaits

🤔Before reading on: do you think multiple awaits run at the same time or one after another? Commit to your answer.

Concept: Await pauses each promise one by one unless you start promises first and await them later to run in parallel.

Example: async function sequential() { const a = await fetchData(); const b = await fetchData(); return [a, b]; } async function parallel() { const promiseA = fetchData(); const promiseB = fetchData(); const a = await promiseA; const b = await promiseB; return [a, b]; }

Result

Sequential waits take longer because each waits for the previous. Parallel runs both at once, finishing faster.

Knowing how to control concurrency with await improves performance and resource use.

7

Expert

Async function internals and microtasks

🤔Before reading on: do you think async functions run immediately or schedule their steps? Commit to your answer.

Concept: Async functions run synchronously until the first await, then pause and resume later using JavaScript's microtask queue for smooth concurrency.

When an async function is called, it runs code until it hits await. At that point, it returns a promise and schedules the rest of the function to run later as a microtask. This lets the event loop handle other tasks before continuing the async function.

Result

Async functions appear to pause and resume without blocking, enabling responsive apps.

Understanding microtasks explains why async functions don't block and how they fit into JavaScript's event loop.

Under the Hood

Async functions are syntactic sugar over promises and generators. When called, they return a promise immediately. Inside, the function runs until it hits an await, which pauses execution and yields control back to the event loop. The awaited promise resolves later, triggering the function to resume from where it paused. This uses the microtask queue to schedule resumption, ensuring non-blocking behavior.

Why designed this way?

Async functions were designed to make asynchronous code easier to write and read than chaining promises or using callbacks. They leverage existing promise mechanics and the event loop to provide a clean, linear style without changing JavaScript's concurrency model. Alternatives like callbacks led to complex, hard-to-maintain code, so async/await was introduced in ES2017 to improve developer experience.

┌───────────────┐
│ Call async fn │
└──────┬────────┘
       │ returns Promise
       ▼
┌───────────────┐
│ Run until await│
└──────┬────────┘
       │ pause, yield
       ▼
┌───────────────┐
│ Await Promise │
└──────┬────────┘
       │ resolve triggers
       ▼
┌───────────────┐
│ Resume function│
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Return final  │
│  Promise      │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does 'await' block the entire JavaScript program? Commit to yes or no.

Common Belief: Await stops everything in the program until the task finishes.

Reality: Await only pauses the async function it is in, letting the rest of the program keep running.

Why it matters: Believing await blocks the whole program can cause confusion and misuse, leading to inefficient code or wrong assumptions about app responsiveness.

Quick: Can you use 'await' outside an async function? Commit to yes or no.

Common Belief: You can use await anywhere in your code without restrictions.

Reality: Await can only be used inside async functions or top-level modules in modern environments; otherwise, it causes syntax errors.

Why it matters: Trying to use await incorrectly leads to errors and frustration, blocking progress.

Quick: Does an async function always run asynchronously? Commit to yes or no.

Common Belief: Async functions always run their code asynchronously after being called.

Reality: Async functions run synchronously until the first await; code before await runs immediately.

Why it matters: Misunderstanding this can cause bugs when expecting delayed execution but code runs right away.

Quick: Does returning a value from an async function return the value directly? Commit to yes or no.

Common Belief: Returning a value from an async function returns that value directly.

Reality: Async functions always return a promise that resolves to the returned value.

Why it matters: Expecting a direct value instead of a promise can cause bugs when chaining or awaiting results.

Expert Zone

1

Async functions can be paused and resumed multiple times, allowing complex asynchronous workflows to be written in a linear style.

2

The microtask queue used by async functions has higher priority than the macrotask queue, affecting execution order with timers and events.

3

Stack traces in async functions can be tricky because the call stack is split across asynchronous boundaries, requiring special debugging tools.

When NOT to use

Async functions are not ideal for CPU-heavy tasks that block the event loop; use Web Workers or native threads instead. Also, for simple synchronous code or when maximum performance is critical, avoid unnecessary async overhead.

Production Patterns

In production, async functions are used for API calls, file operations, and database queries. Patterns include error handling with centralized try/catch, running multiple async tasks in parallel with Promise.all, and using async iterators for streaming data.

Connections

Event Loop

Async functions rely on the event loop to pause and resume execution without blocking.

Understanding the event loop clarifies why async functions don't freeze the program and how JavaScript handles concurrency.

Promises

Async functions are built on promises and simplify their usage with cleaner syntax.

Knowing promises deeply helps you grasp what async/await does under the hood and how to handle asynchronous flows.

Multithreading in Operating Systems

Async functions provide concurrency without multiple threads, unlike OS multithreading.

Comparing async functions to OS threads highlights different approaches to handling multiple tasks and helps understand JavaScript's single-threaded nature.

Common Pitfalls

#1 Forgetting to mark a function as async but using await inside.

Wrong approach:

function fetchData() {
const data = await fetch('url');
return data.json();
}

Correct approach:

async function fetchData() {
const data = await fetch('url');
return data.json();
}

Root cause:

Await can only be used inside async functions; missing async causes syntax errors.

#2 Using await in a loop without starting promises first, causing slow sequential execution.

Wrong approach:

for (const url of urls) {
const data = await fetch(url);
console.log(data);
}

Correct approach:

const promises = urls.map(url => fetch(url));
for (const promise of promises) {
const data = await promise;
console.log(data);
}

Root cause:

Await inside loops waits for each promise one by one; starting all promises first enables parallelism.

#3 Not handling errors in async functions, leading to unhandled promise rejections.

Wrong approach:

async function getData() {
const data = await fetch('bad_url');
return data.json();
}
getData();

Correct approach:

async function getData() {
try {
const data = await fetch('bad_url');
return data.json();
} catch (e) {
console.error('Fetch failed', e);
}
}
getData();

Root cause:

Errors in awaited promises must be caught to prevent crashes or silent failures.

Key Takeaways

Async function syntax makes asynchronous JavaScript code easier to write and read by allowing you to pause and resume functions with await.

Async functions always return promises, and await pauses only the async function, not the whole program.

Using try/catch inside async functions simplifies error handling compared to older promise chains.

Understanding how async functions work with the event loop and microtasks explains their non-blocking behavior.

Knowing when and how to run multiple awaits in parallel improves performance and resource use.