JavaScript is a non-blocking Language

JavaScript is a fast and non-blocking language. This means it does not wait for one task to finish before moving to the next.

To handle such behaviour, JavaScript uses a powerful concept called a callback function.

In this blog, we’ll understand:

What callbacks are

Why are they important

Real-world examples (including QA/testing use cases)

What is a Callback Function?

A callback function is a function that is passed as an argument to another function and is executed later.

Simple Example

Here, sayBye is a callback function that runs after greet finishes its task.

Why Do We Need Callback Functions?

JavaScript handles many tasks that take time, such as:

1. Fetching data from a server
2. Waiting for user actions
3. Running timers

Instead of stopping everything, JavaScript continues running other code and executes a callback when the task is complete.

Let's take examples from real world.

Example: Food Delivery

Think of ordering food

1. You place an order
2. You don’t stand at the restaurant
3. You continue your work
4. When food arrives → you act

That “action after completion” is a callback.

setTimeout (Delay)

Output:

JavaScript doesn’t wait 3 seconds—it continues and executes the callback later.

Types of Callback Functions in JavaScript

Callback functions can be broadly classified based on when and how they are executed.

1. Synchronous Callbacks

A synchronous callback is executed immediately during the execution of the main function.

It does not wait or run later.

Example

Output:

Explanation

1. The callback runs instantly for each element
2. Everything happens in sequence
3. No delay or waiting

Real-World Analogy

Teacher checking homework one by one in class

1. Immediate action
2. No delay

2. Asynchronous Callbacks

An asynchronous callback is executed later, after a task is completed (like API call, timer, or event).

Example

Output:

Explanation

1. JavaScript does not wait
2. It moves ahead
3. Callback runs after delay

Real-World Analogy

Ordering food

1. You order
2. You continue working
3. Food arrives later → callback runs

3. Event-Driven Callbacks

These callbacks run when a specific event happens(like click, input, hover).

Example

Explanation

1. The function is stored
2. It runs only when user clicks

Real-World Analogy

Doorbell

1. Someone presses → action happens

4. Callback Functions with Parameters

Callbacks that receive values from the main function.

Example

Output:8

Explanation

1. Callback receives data
2. Performs operation
3. Returns result

5. Anonymous Callback Functions

Callbacks without a name (most commonly used)

Example

Why Used?

1. Short and quick
2. No need to reuse function

6. Named Callback Functions

Callbacks with a defined function name

Example

Why Used?

1. Better readability
2. Reusable

Conclusion

Callback functions are one of the core building blocks of JavaScript, enabling developers to handle tasks that don’t complete instantly—like API calls, timers, and user interactions. By allowing a function to be executed after a specific task is finished, callbacks make JavaScript efficient and non-blocking.

As we’ve seen, callbacks come in different forms—synchronous, asynchronous, event-driven, and more—each serving a specific purpose depending on the situation. They are widely used in real-world applications, especially in scenarios like web development, API handling, and test automation.

However, while callbacks are powerful, overusing or nesting them deeply can make code difficult to read and maintain (known as callback hell). That’s why modern JavaScript introduces alternatives like Promises and async/await, which build on the same concept but provide cleaner and more structured code.

In simple terms, callbacks help you say:

“Run this function when the task is done.”

Understanding callbacks is essential for mastering JavaScript, and once you’re comfortable with them, learning advanced concepts becomes much easier.