Understanding Async JavaScript (Finally)

· 4 min read
javascriptasyncpromises

Asynchronous JavaScript confused me for weeks. I kept hearing about callbacks, promises, and async/await, but I didn’t really understand what they were or why they mattered.

Now it finally makes sense, and I want to explain it the way I wish someone had explained it to me.

The Problem: JavaScript is Single-Threaded

JavaScript can only do one thing at a time. It’s single-threaded.

But some operations take time:

  • Fetching data from an API
  • Reading a file
  • Waiting for user input
  • Database queries

If JavaScript waited for these operations to finish, the entire program would freeze.

That’s where asynchronous code comes in.

The Solution: Async Operations

Instead of waiting, JavaScript can start an operation and move on to other code. When the operation finishes, JavaScript comes back to handle the result.

This is asynchronous programming.

Callbacks: The Old Way

Callbacks were the original solution:

function getData(callback) {
  setTimeout(() => {
    const data = { name: 'John', age: 25 };
    callback(data);
  }, 1000);
}

getData((data) => {
  console.log(data);
});

The problem? Callback hell:

getData((data) => {
  processData(data, (processed) => {
    saveData(processed, (saved) => {
      sendEmail(saved, (result) => {
        // This is getting ridiculous
      });
    });
  });
});

This is hard to read and maintain.

Promises: A Better Way

Promises made async code more readable:

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John', age: 25 };
      resolve(data);
    }, 1000);
  });
}

getData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

You can chain promises:

getData()
  .then(data => processData(data))
  .then(processed => saveData(processed))
  .then(saved => sendEmail(saved))
  .catch(error => console.error(error));

Much better than callback hell!

Async/Await: The Modern Way

Async/await makes async code look like synchronous code:

async function handleData() {
  try {
    const data = await getData();
    const processed = await processData(data);
    const saved = await saveData(processed);
    const result = await sendEmail(saved);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

This is the easiest to read and write.

Understanding Promises

A promise is an object that represents a future value.

It can be in three states:

  • Pending: The operation hasn’t finished yet
  • Fulfilled: The operation succeeded
  • Rejected: The operation failed
const promise = new Promise((resolve, reject) => {
  // Do something async
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});

Understanding Async/Await

async and await are syntactic sugar over promises.

async: Marks a function as asynchronous. It always returns a promise.

async function myFunction() {
  return 'Hello';
}

// Same as:
function myFunction() {
  return Promise.resolve('Hello');
}

await: Pauses execution until the promise resolves.

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

Common Mistakes I Made

Forgetting await: The function returns a promise, not the actual value.

// Wrong
async function getData() {
  const data = fetch(url); // This is a promise!
  return data;
}

// Right
async function getData() {
  const data = await fetch(url);
  return data;
}

Not handling errors: Always use try/catch with async/await.

async function getData() {
  try {
    const data = await fetch(url);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Awaiting in loops incorrectly: This runs sequentially (slow):

for (const id of ids) {
  const data = await fetchData(id); // Waits for each one
}

This runs in parallel (fast):

const promises = ids.map(id => fetchData(id));
const results = await Promise.all(promises);

Forgetting to mark function as async: You can only use await inside async functions.

Practical Examples

Fetching data:

async function getUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error('User not found');
    const user = await response.json();
    return user;
  } catch (error) {
    console.error(error);
  }
}

Multiple async operations:

async function getUserData(id) {
  try {
    const [user, posts, comments] = await Promise.all([
      fetchUser(id),
      fetchPosts(id),
      fetchComments(id)
    ]);
    return { user, posts, comments };
  } catch (error) {
    console.error(error);
  }
}

Sequential operations:

async function processOrder(orderId) {
  try {
    const order = await fetchOrder(orderId);
    const payment = await processPayment(order);
    const shipment = await createShipment(order);
    return { order, payment, shipment };
  } catch (error) {
    console.error(error);
  }
}

When to Use What

Callbacks: Rarely. Only for simple cases or when working with old libraries.

Promises: When you need fine control over promise chains or when using Promise utilities like Promise.all().

Async/Await: Most of the time. It’s the most readable and easiest to work with.

What Finally Made It Click

Understanding the event loop: JavaScript doesn’t actually wait. It moves on to other code and comes back when the async operation finishes.

Building projects: Reading about async code didn’t help. Writing async code did.

Debugging: Using the debugger to step through async code helped me see what was happening.

Practice: The more I used async/await, the more natural it became.

Resources That Helped

  • JavaScript.info: Great explanation of async JavaScript
  • MDN docs: Detailed reference for promises and async/await
  • YouTube tutorials: Visual explanations helped concepts click
  • Building projects: Nothing beats practice

Advice for Beginners

Start with async/await: Don’t worry about callbacks and promises at first. Learn async/await, then go back to understand promises.

Use try/catch: Always handle errors in async functions.

Practice with real APIs: Fetch data from real APIs to practice async code.

Use the debugger: Step through async code to see how it works.

Don’t overthink it: Async code is just code that doesn’t finish immediately. That’s it.

What’s Next

Now that I understand async JavaScript, I want to learn:

  • More about the event loop
  • Advanced promise patterns
  • Error handling strategies
  • Performance optimization for async code

Async JavaScript went from confusing to essential. I use it every day now, and it’s not scary anymore.

If you’re struggling with async code, keep practicing. It will click eventually.

All articles