Callback Functions
Understand callback functions and how they enable asynchronous JavaScript.
Callback functions are a core JavaScript concept. A callback is simply a function passed as an argument to another function, to be executed later. This pattern is essential for handling events, asynchronous operations, and array methods like map and filter. Understanding callbacks is the foundation for working with Promises and async/await.
📚 Concepts & Theory
What is a Callback?
A callback is a function passed to another function as an argument.
function greet(name, callback) {
console.log("Hello, " + name);
callback();
}
function sayGoodbye() {
console.log("Goodbye!");
}
greet("Alice", sayGoodbye);
// Output: Hello, Alice
// Goodbye!
Array Methods with Callbacks:
const numbers = [1, 2, 3, 4, 5];
// forEach - run callback for each element
numbers.forEach(num => console.log(num));
// map - transform each element
const doubled = numbers.map(num => num * 2);
// filter - keep elements that pass test
const evens = numbers.filter(num => num % 2 === 0);
Asynchronous Callbacks:
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);
console.log("This runs immediately");
Common Pattern: Error-First Callback
function loadData(callback) {
// callback(error, data)
callback(null, { name: "Alice" });
}
loadData((err, data) => {
if (err) {
console.error(err);
} else {
console.log(data);
}
});
🎯 Your Challenge
Create a function called `processNumbers` that takes an array and a callback function. It should call the callback on each number and return a new array with the results. Then use it to double all numbers in [1, 2, 3].
📝 Starter Code
// Create the processNumbers function
function processNumbers(arr, callback) {
// Return a new array with callback applied to each element
}
// Use it to double numbers
const numbers = [1, 2, 3];
const doubled = processNumbers(numbers, function(n) {
});
// doubled should be [2, 4, 6]- Create an empty result array first
- Loop through the input array
- Call callback(arr[i]) for each element
- Push the callback result to your result array
Solution
function processNumbers(arr, callback) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(callback(arr[i]));
}
return result;
}
const numbers = [1, 2, 3];
const doubled = processNumbers(numbers, function(n) {
return n * 2;
});Explanation
processNumbers creates an empty result array, loops through the input array, calls the callback on each element, and pushes the result. When we pass a function that doubles numbers (n * 2), we get [2, 4, 6].
⚠️ Common Mistakes to Avoid
- Forgetting to return the result from the callback
- Not creating a new array (modifying original)
- Forgetting to return the result array from processNumbers
- Executing the callback with parentheses when passing it