Pass an Operation to Another Function

A callback is a function supplied for another operation to call. Not every callback is asynchronous: map calls this callback while building its result before the next statement runs.

Before this topic, review Match a Simple Text Pattern if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

JavaScript is single-threaded and often performs asynchronous operations like API calls, timers, or file reading. To handle such operations without blocking the main thread, callbacks are used.

A callback is a function passed as an argument to another function, which is then invoked inside that function after some operation is complete.

function greetUser(name, callback) {
  console.log("Hello " + name);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greetUser("Alice", sayBye);

Hello Alice
Goodbye!

JavaScript executes code line by line, but asynchronous operations (like network requests) don’t complete instantly. Callbacks ensure that a task runs only after the previous one finishes.

function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched from server.");
    callback();
  }, 2000);
}

function processData() {
  console.log("Processing data...");
}

fetchData(processData);

Data fetched from server.
Processing data...

Let’s simulate a real-world example: logging in, fetching user profile, then fetching posts.

function loginUser(callback) {
  setTimeout(() => {
    console.log("User logged in");
    callback();
  }, 1000);
}

function fetchProfile(callback) {
  setTimeout(() => {
    console.log("User profile fetched");
    callback();
  }, 1000);
}

function fetchPosts() {
  setTimeout(() => {
    console.log("User posts fetched");
  }, 1000);
}

loginUser(() => {
  fetchProfile(() => {
    fetchPosts();
  });
});

User logged in
User profile fetched
User posts fetched

When multiple asynchronous operations are nested within each other in this way, it creates deeply nested code that is hard to read, debug, and maintain. This is known as Callback Hell or the “Pyramid of Doom”.

Callback hell makes the code look like this:

task1(() => {
  task2(() => {
    task3(() => {
      task4(() => {
        // and so on...
      });
    });
  });
});

Answer: Because functions like setTimeout or fetch are asynchronous. If you don’t use callbacks (or promises), the next function might execute before the previous one finishes.

Solutions include:

• Splitting functions into smaller named functions
• Using Promises
• Using async/await

We will explore Promises and async/await in upcoming modules to resolve this issue effectively.

• Callbacks are functions passed to another function to execute later.
• They are essential in handling asynchronous code in JavaScript.
• Nested callbacks lead to callback hell — hard-to-maintain code structure.
• Modern JavaScript uses Promises and async/await for cleaner asynchronous code.

Nested asynchronous callbacks can obscure sequencing and errors. Using a callback alone does not put work into a background thread.

Your task: Replace mark + 2 with mark + 3. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

map applies the edited correction synchronously to each value.

A callback is a function supplied for another operation to call. Not every callback is asynchronous: map calls this callback while building its result before the next statement runs.

Check your variation against this explanation: map applies the edited correction synchronously to each value.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.