Callback Functions 101

Easy

A callback is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. Callbacks are the foundation of asynchronous programming in JavaScript - they allow code to run after an operation completes without blocking execution.

Interactive Visualization

Current Function
(idle)
Registered Callbacks
(none)
CodeSync
1function greet(callback) {
2  console.log('Hello!');
3  callback();
4}
5 
6function sayGoodbye() {
7  console.log('Goodbye!');
8}
9 
10greet(sayGoodbye);
Output
-
Script starts. Functions greet and sayGoodbye are defined.
1 / 6
Key Insight: A callback is just a function passed to another function. The receiving function decides WHEN to call it.

Key Points

  • A callback is a function passed into another function as an argument
  • Callbacks can be synchronous (array methods) or asynchronous (setTimeout, events)
  • Callbacks allow for non-blocking code execution
  • Higher-order functions accept callbacks as parameters
  • Callbacks enable code reusability and customization

Code Examples

Synchronous Callback

// Array method with callback
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

// The callback function(num) is called synchronously
// for each element in the array

Array methods like map, filter, forEach use synchronous callbacks

Asynchronous Callback

console.log("Start");

setTimeout(function() {
  console.log("Callback executed!");
}, 1000);

console.log("End");

// Output:
// Start
// End
// Callback executed! (after 1 second)

// The callback runs asynchronously after the timer

setTimeout schedules a callback to run later, allowing other code to execute first

Custom Higher-Order Function

// Higher-order function that accepts a callback
function greet(name, formatter) {
  return "Hello, " + formatter(name);
}

// Different callbacks for different formatting
const upperCase = (str) => str.toUpperCase();
const addExclamation = (str) => str + "!";

console.log(greet("Alice", upperCase));      // "Hello, ALICE"
console.log(greet("Bob", addExclamation));   // "Hello, Bob!"

Higher-order functions use callbacks to customize behavior

Event Listener Callback

// Event handling with callbacks
document.getElementById('button').addEventListener('click', function(event) {
  console.log('Button was clicked!');
  console.log('Event:', event);
});

// The callback runs when the click event occurs
// This is asynchronous - we don't know when it will happen!

Event listeners register callbacks that run when events occur

Common Mistakes

  • Not understanding the difference between passing a function and calling a function
  • Forgetting that callbacks may execute asynchronously
  • Not handling errors in callbacks
  • Callback hell - deeply nested callbacks

Interview Tips

  • Explain the difference between synchronous and asynchronous callbacks
  • Know what a higher-order function is
  • Be ready to write a simple function that accepts a callback
  • Understand why callbacks are needed for async operations