JavaScript async/await Interview Questions

The basic transformation

async/await is syntactic sugar over Promises. Every async function returns a Promise. Every await unwraps a Promise. What the compiler does under the hood is exactly what you'd write manually:

// With async/await — reads like synchronous code
async function loadUserPosts(userId) {
  const user  = await fetch(`/api/users/${userId}`).then(r => r.json())
  const posts = await fetch(`/api/posts?user=${user.id}`).then(r => r.json())
  return posts.filter(p => p.published)
}

// The Promise equivalent — what async/await compiles to in spirit
function loadUserPosts(userId) {
  return fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(user => fetch(`/api/posts?user=${user.id}`).then(r => r.json())
      .then(posts => posts.filter(p => p.published))
    )
}

Both do identical things. The async/await version is vastly easier to read, debug, and extend — especially once you have multiple dependent async steps.

async functions — what they actually return

// Any function marked async ALWAYS returns a Promise
async function greet() {
  return 'Hello'   // looks like it returns a string
}

greet()             // Promise { 'Hello' } — wrapped in a Promise automatically
greet().then(console.log)  // 'Hello'

// Thrown errors become rejections
async function fail() {
  throw new Error('broken')
}
fail().catch(err => console.log(err.message))  // 'broken'

// Returning a Promise — it's not double-wrapped, it's adopted
async function fetchUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json())
  // Returns a Promise — async doesn't wrap it again, it adopts it
}

await — what it does and doesn't do

async function example() {
  console.log('A')                      // runs synchronously
  const result = await Promise.resolve('data')  // pauses HERE
  console.log('B', result)             // resumes as a microtask
  return result
}

console.log('1')
example()
console.log('2')

// Output: 1, A, 2, B data
// Why: '1' → example() starts → 'A' → await pauses example() →
// control returns to caller → '2' → microtask: resumes → 'B data'

Awaiting a non-Promise is legal — it's equivalent to await Promise.resolve(value):

async function test() {
  const x = await 42     // same as await Promise.resolve(42)
  const y = await null   // same as await Promise.resolve(null)
  console.log(x, y)      // 42 null
}

Error handling — try/catch replaces .catch()

// ✓ Standard pattern — try/catch wraps all awaited operations
async function loadDashboard(userId) {
  try {
    const user    = await fetchUser(userId)
    const posts   = await fetchPosts(user.id)
    const metrics = await fetchMetrics(user.id)
    return { user, posts, metrics }
  } catch (err) {
    // Catches rejection from ANY of the three awaits above
    console.error('Dashboard load failed:', err)
    throw err  // re-throw so the caller knows it failed
  }
}

// ✓ Per-operation error handling when failures are independent
async function loadDashboard(userId) {
  const user = await fetchUser(userId)  // let this propagate — critical

  const [posts, metrics] = await Promise.allSettled([
    fetchPosts(user.id),
    fetchMetrics(user.id),
  ])

  return {
    user,
    posts:   posts.status === 'fulfilled'   ? posts.value   : [],
    metrics: metrics.status === 'fulfilled' ? metrics.value : null,
  }
}

// ✓ Helper pattern for cleaner inline error handling (Go-style)
async function to(promise) {
  try {
    return [null, await promise]
  } catch (err) {
    return [err, null]
  }
}

const [err, user] = await to(fetchUser(id))
if (err) return handleError(err)
// use user safely

Sequential vs parallel — the critical performance distinction

// ❌ Sequential — each await waits for the previous to finish
// Total time: 300ms + 200ms + 400ms = 900ms
async function slowDashboard() {
  const users    = await fetchUsers()     // 300ms
  const products = await fetchProducts() // 200ms — doesn't start until users done
  const orders   = await fetchOrders()   // 400ms — doesn't start until products done
  return { users, products, orders }
}

// ✓ Parallel — all three start simultaneously
// Total time: max(300ms, 200ms, 400ms) = 400ms
async function fastDashboard() {
  const [users, products, orders] = await Promise.all([
    fetchUsers(),
    fetchProducts(),
    fetchOrders(),
  ])
  return { users, products, orders }
}

// ✓ Parallel start, sequential use — a subtle but important pattern
async function smarter() {
  const userPromise    = fetchUsers()     // START immediately — no await
  const productPromise = fetchProducts()  // START immediately — no await

  const users    = await userPromise     // WAIT here
  const products = await productPromise  // Already running — may already be done
  return { users, products }
}

Async in loops — a minefield

const ids = [1, 2, 3, 4, 5]

// ❌ forEach doesn't work with async — forEach ignores returned Promises
ids.forEach(async (id) => {
  const user = await fetchUser(id)
  console.log(user.name)  // order unpredictable, no way to await completion
})
console.log('done')  // prints BEFORE any users are fetched

// ✓ for...of — sequential (one at a time, in order)
for (const id of ids) {
  const user = await fetchUser(id)  // waits for each before next
  console.log(user.name)
}
// Predictable order, but total time = sum of all fetches

// ✓ Promise.all with map — parallel (all at once)
const users = await Promise.all(ids.map(id => fetchUser(id)))
// All fetches start simultaneously — total time = slowest single fetch

// ✓ Controlled concurrency — batch of N at a time
async function fetchInBatches(ids, batchSize = 3) {
  const results = []
  for (let i = 0; i < ids.length; i += batchSize) {
    const batch = ids.slice(i, i + batchSize)
    const batchResults = await Promise.all(batch.map(id => fetchUser(id)))
    results.push(...batchResults)
  }
  return results
}

Async IIFE — top-level await without a module

// Before top-level await was supported (ES2022):
;(async () => {
  const data = await fetch('/api/config').then(r => r.json())
  initApp(data)
})()

// ES2022 modules — top-level await is now valid
// (in .mjs files or with "type": "module" in package.json)
const config = await fetch('/api/config').then(r => r.json())
initApp(config)

Async class methods and getters

class UserService {
  async getUser(id) {
    const res = await fetch(`/api/users/${id}`)
    if (!res.ok) throw new Error(`User ${id} not found`)
    return res.json()
  }

  async updateUser(id, data) {
    const res = await fetch(`/api/users/${id}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    })
    return res.json()
  }
}

// Note: async getters are not supported — this is a SyntaxError:
// async get currentUser() { ... }
// Use a regular async method instead

What async/await does NOT solve

// 1. Race conditions — still possible
let currentUser = null
async function loadUser(id) {
  const user = await fetchUser(id)
  currentUser = user  // if called twice quickly, second might overwrite first
}

// 2. Memory leaks from dangling Promises
async function componentMount() {
  const data = await fetchData()
  // If the component unmounted while awaiting, setting state here crashes React
  setState(data)  // "Can't perform state update on unmounted component"
}

// 3. Error swallowing — async functions without try/catch silently lose errors
async function silentFail() {
  const data = await mightFail()  // if this rejects, nothing catches it
  return transform(data)
}
silentFail()  // rejected Promise — goes unhandled