JavaScript Callbacks vs Promises: Full Tutorial

// Node.js-style error-first callback convention
function readFile(path, callback) {
  // Simulated async file read
  setTimeout(() => {
    if (!path) {
      callback(new Error("Path required"), null);
    } else {
      callback(null, `Contents of ${path}`);
    }
  }, 100);
}
 
// Usage
readFile("data.txt", (error, data) => {
  if (error) {
    console.error("Error:", error.message);
    return;
  }
  console.log("Data:", data);
});

// Read file -> parse -> look up user -> fetch profile -> save
readFile("users.json", (err, data) => {
  if (err) return handleError(err);
 
  parseJSON(data, (err, users) => {
    if (err) return handleError(err);
 
    findUser(users, userId, (err, user) => {
      if (err) return handleError(err);
 
      fetchProfile(user.id, (err, profile) => {
        if (err) return handleError(err);
 
        saveResult(profile, (err) => {
          if (err) return handleError(err);
          console.log("All done!");
        });
      });
    });
  });
});
// The "Pyramid of Doom"

function doStepA(callback) {
  asyncA((err, result) => {
    if (err) {
      callback(err); // Must forward error manually
      return; // Easy to forget this return!
    }
    callback(null, result);
  });
}

// Parallel callbacks -- error-prone manual tracking
let results = {};
let completed = 0;
const total = 3;
 
function done(key, value) {
  results[key] = value;
  completed++;
  if (completed === total) {
    // All done
    console.log(results);
  }
}
 
fetchA((err, a) => done("a", a));
fetchB((err, b) => done("b", b));
fetchC((err, c) => done("c", c));
// No error handling for simplicity, but real code needs it for each

// Creating a Promise
function readFilePromise(path) {
  return new Promise((resolve, reject) => {
    if (!path) {
      reject(new Error("Path required")); // Failure
      return;
    }
    setTimeout(() => {
      resolve(`Contents of ${path}`); // Success
    }, 100);
  });
}
 
// Consuming a Promise
readFilePromise("data.txt")
  .then((data) => {
    console.log("Data:", data);
  })
  .catch((error) => {
    console.error("Error:", error.message);
  });

// CALLBACKS: Sequential with shared error handler
function doWorkCallback(done) {
  stepA((errA, a) => {
    if (errA) return done(errA);
    stepB(a, (errB, b) => {
      if (errB) return done(errB);
      stepC(b, done);
    });
  });
}
 
// PROMISES: Sequential with .then() chaining
function doWorkPromise() {
  return stepA()
    .then((a) => stepB(a))
    .then((b) => stepC(b));
  // One .catch() at the end handles ALL errors from all steps
}

// CALLBACKS: Repetitive per-level error checks
function processCallback(id, callback) {
  fetchUser(id, (err, user) => {
    if (err) return callback(err);    // Level 1 error
    fetchPosts(user, (err, posts) => {
      if (err) return callback(err);  // Level 2 error
      processResults(posts, (err, result) => {
        if (err) return callback(err); // Level 3 error
        callback(null, result);
      });
    });
  });
}
 
// PROMISES: One catch for the entire chain
function processPromise(id) {
  return fetchUser(id)
    .then((user) => fetchPosts(user))
    .then((posts) => processResults(posts));
  // Call .catch() at the usage site
}
 
processPromise(123)
  .then((result) => console.log(result))
  .catch((err) => console.error(err.message)); // Catches ANY rejection in chain

// CALLBACKS: Manual counter (brittle)
function parallelCallback(done) {
  const results = {};
  let pending = 3;
  let failed = false;
 
  function checkDone() {
    if (--pending === 0 && !failed) done(null, results);
  }
 
  fetchA((err, a) => { if (err) { failed = true; return done(err); } results.a = a; checkDone(); });
  fetchB((err, b) => { if (err) { failed = true; return done(err); } results.b = b; checkDone(); });
  fetchC((err, c) => { if (err) { failed = true; return done(err); } results.c = c; checkDone(); });
}
 
// PROMISES: Promise.all handles it elegantly
function parallelPromise() {
  return Promise.all([fetchA(), fetchB(), fetchC()])
    .then(([a, b, c]) => ({ a, b, c }));
}

// Generic promisify utility
function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (error, result) => {
        if (error) reject(error);
        else resolve(result);
      });
    });
  };
}
 
// Convert fs.readFile
const fs = require("fs");
const readFile = promisify(fs.readFile);
 
readFile("data.json", "utf8")
  .then((data) => JSON.parse(data))
  .then((obj) => console.log(obj))
  .catch((err) => console.error(err));
 
// Node.js has this built-in:
const { promisify } = require("util");
const readFileAsync = promisify(fs.readFile);

// Promise chains:
function loadUser(id) {
  return fetchUser(id)
    .then((user) => fetchPosts(user.id))
    .then((posts) => ({ user, posts }))
    .catch(handleError);
}
 
// async/await (same Promise behavior, different syntax):
async function loadUserAsync(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (error) {
    handleError(error);
  }
}