Academy — Sanjib Sikder

The Problem: Waiting Without Freezing

JavaScript is single-threaded — it can only do one thing at a time. But real programs constantly need to wait: for a network response, a file to load, a timer to fire.

If waiting meant blocking — freezing everything until the wait is over — no webpage would ever be usable.

The solution is asynchronous code: start the task, move on, come back when it's done.

Run this and notice the order:

JavaScript

Ctrl+Enter to run

console.log("1 — start");

setTimeout(function () {
console.log("3 — timer fired (after 0ms delay!)");
}, 0);

console.log("2 — end");

// Expected order: 1, 2, 3
// Even with 0ms delay, the callback runs AFTER the current code finishes

setTimeout schedules a callback for later — even "0ms later" means after the current code is done. JavaScript finishes what it's doing, then checks if any scheduled callbacks are ready. This scheduling mechanism is called the event loop.

setTimeout and setInterval

JavaScript

Ctrl+Enter to run

// setTimeout: run once after a delay
setTimeout(() => console.log("Ran after 100ms"), 100);
setTimeout(() => console.log("Ran after 50ms"),   50);
setTimeout(() => console.log("Ran after 200ms"), 200);

console.log("Scheduled all three — now waiting…");

// Notice: they fire in order of delay, not order of scheduling

JavaScript

Ctrl+Enter to run

// setInterval: run repeatedly
// (We stop it after 5 ticks to avoid running forever)
let count = 0;

const id = setInterval(() => {
count += 1;
console.log(`Tick ${count}`);

if (count === 5) {
clearInterval(id);
console.log("Done — interval cleared");
}
}, 50);

The Callback Problem

Callbacks work — but they don't compose cleanly. What if you need three things in sequence, each waiting for the previous?

JavaScript

Ctrl+Enter to run

// Simulating sequential async steps with callbacks
function step(name, delay, callback) {
  setTimeout(() => {
    console.log(`${name} done`);
    callback();
  }, delay);
}

// Each step nested inside the previous callback
step("Fetch data", 100, () => {
step("Parse response", 80, () => {
step("Save to database", 60, () => {
step("Send confirmation", 40, () => {
console.log("All done — but look at this nesting…");
});
});
});
});

This is callback hell — each step forced to live inside the previous one. Error handling is a nightmare. This is the problem Promises were invented to solve.

Promises

A Promise is an object that represents a value that isn't available yet. It is in one of three states: pending, fulfilled, or rejected.

JavaScript

Ctrl+Enter to run

function wait(ms, value) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(value), ms);
  });
}

wait(100, "Hello after 100ms").then(result => console.log(result));
wait(50, "Hello after 50ms").then(result => console.log(result));

console.log("Promises created — waiting…");

new Promise takes a function with two parameters: resolve (call when done) and reject (call on failure). The value passed to resolve becomes what .then() receives.

Chaining Promises

The key promise superpower: .then() returns a new promise, so you chain instead of nesting:

JavaScript

Ctrl+Enter to run

function step(name, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`${name} done`);
      resolve(name);
    }, delay);
  });
}

// Flat chain — same four steps, zero nesting
step("Fetch data", 100)
.then(() => step("Parse response", 80))
.then(() => step("Save to database", 60))
.then(() => step("Send confirmation", 40))
.then(() => console.log("All done — flat and readable"));

Handling Errors with .catch()

JavaScript

Ctrl+Enter to run

function riskyOperation(shouldFail) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) reject(new Error("Something went wrong!"));
      else            resolve("Success!");
    }, 50);
  });
}

riskyOperation(false)
.then(result => console.log("Result:", result))
.catch(err => console.log("Error:", err.message));

riskyOperation(true)
.then(result => console.log("Result:", result))
.catch(err => console.log("Caught:", err.message));

One .catch() at the end of a chain handles any rejection from any step above it.

async / await — Promises with a Cleaner Face

async/await is not a new feature — it is syntax that makes promises look synchronous. Under the hood it is exactly the same promise chain:

JavaScript

Ctrl+Enter to run

function wait(ms, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

async function runSteps() {
console.log("Starting…");

const a = await wait(80, "Step A"); // pause here until resolved
console.log(a);

const b = await wait(60, "Step B");
console.log(b);

const c = await wait(40, "Step C");
console.log(c);

console.log("All steps complete");
return "done";
}

runSteps().then(result => console.log("Returned:", result));

await pauses execution of the async function until the promise resolves — but does not block the rest of the program.

try/catch with async/await

JavaScript

Ctrl+Enter to run

function fetchScore(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id <= 0)  return reject(new RangeError("ID must be positive"));
      resolve({ id, score: 50 + id * 5 });
    }, 50);
  });
}

async function loadStudent(id) {
try {
const student = await fetchScore(id);
console.log(`Student ${student.id}: ${student.score} marks`);
} catch (err) {
console.log(`Failed for id ${id}: ${err.message}`);
}
}

loadStudent(5);
loadStudent(-1);
loadStudent(10);

Running Promises in Parallel

await in sequence waits for each step before starting the next. Promise.all starts everything simultaneously:

JavaScript

Ctrl+Enter to run

function fetch(name, delay) {
  return new Promise(resolve =>
    setTimeout(() => {
      console.log(`  ${name} arrived (after ${delay}ms)`);
      resolve(name);
    }, delay)
  );
}

async function sequential() {
console.log("Sequential:");
const t = Date.now();
await fetch("Physics", 100);
await fetch("Chemistry", 80);
await fetch("Maths", 60);
console.log(` Total: ~${Date.now() - t}ms`);
}

async function parallel() {
console.log("Parallel:");
const t = Date.now();
const results = await Promise.all([
fetch("Physics", 100),
fetch("Chemistry", 80),
fetch("Maths", 60),
]);
console.log(` Total: ~${Date.now() - t}ms`, results);
}

sequential().then(() => parallel());

Sequential waits ~240ms. Parallel waits ~100ms — the longest single request. Use Promise.all when tasks are independent of each other.

What You Have Learned

Async JavaScript is about one thing: doing work later, without freezing now.

The key ideas:

JavaScript is single-threaded — async is how it handles waiting without blocking
The event loop checks for and runs scheduled callbacks after current code finishes
Callbacks work but nest badly — callback hell is a real maintenance problem
Promises solve nesting with flat .then() chains and a single .catch()
async/await is promises with synchronous-looking syntax — same machinery, far more readable
await pauses your function without pausing the program
Promise.all runs multiple async operations in parallel — use it when tasks are independent

In the next lesson: Classes & Object-Oriented Programming — blueprints for creating many objects of the same shape, with inheritance, private fields, and a cleaner syntax for everything you already know about objects.

Asynchronous JavaScript

The Problem: Waiting Without Freezing

setTimeout and setInterval

The Callback Problem

Promises

Chaining Promises

Handling Errors with .catch()

async / await — Promises with a Cleaner Face

try/catch with async/await

Running Promises in Parallel

What You Have Learned