Callbacks and Callback Hell

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is a Callback? Why do we use Callbacks? What is Callback Hell? Problems with Callback Hell How to avoid Callback Hell Real-world examples Interview questions What is a Callback? A Callback is a function passed as an argument to another function , which is executed after a task is completed . Simple Definition: A callback is a function that is called later when another function finishes its work. Real-Life Example 📞 Imagine you order food. You Order Food │ ▼ Restaurant Prepares Food │ ▼ Restaurant Calls You │ ▼ You Collect Food The phone call is the callback . Simple Callback Example function greet ( name , callback ) { console . log( "Hello " + name ); callback (); } function sayBye () { console . log( "Good Bye" ); } greet ( "Ajay" , sayBye ); Output Hello Ajay Good Bye How It Works greet("Ajay", sayBye) │ ▼ Print Hello Ajay │ ▼ Call sayBye() │ ▼ Print Good Bye Anonymous Callback Instead of creating a separate function, we can pass it directly. function greet ( name , callback ) { console . log( "Hello " + name ); callback (); } greet ( "Ajay" , function () { console . log( "Welcome!" ); }); Output Hello Ajay Welcome! Why Do We Use Callbacks? Callbacks are useful for asynchronous operations like: Reading files Database queries API requests Timers Network operations Example: setTimeout() console . log( "Start" ); setTimeout (() => { console . log( "Task Completed" ); }, 2000 ); console . log( "End" ); Output Start End Task Completed The function inside setTimeout() is a callback . Example: Reading a File const fs = require ( "fs" ); fs . readFile( "test.txt" , "utf8" , ( err , data ) => { if ( err ) { console . log( err ); return ; } console . log( data ); }); The last function is the callback. Callback Flow Read File │ ▼ Wait... │ ▼ File Ready │ ▼ Execute Callback What is Callback Hell? Callback Hell happens when multiple callbacks are nested inside one another. This makes the code difficult to read, understand, and maintain. Simple Definition: Callback Hell is deeply nested callback code that becomes messy and hard to manage. Real-Life Example 🏢 Imagine entering an office. Enter Building │ ▼ Go to Floor 1 │ ▼ Go to Room 2 │ ▼ Go to Desk 5 │ ▼ Meet Manager Too many levels make navigation confusing. Callback Hell works the same way. Example of Callback Hell loginUser ( function ( user ) { getOrders ( user . id, function ( orders ) { getPayment ( orders [ 0 ] . id, function ( payment ) { sendEmail ( payment , function () { console . log( "Done" ); }); }); }); }); Visualization loginUser() │ ▼ getOrders() │ ▼ getPayment() │ ▼ sendEmail() │ ▼ Done Notice the increasing indentation (often called the Pyramid of Doom ). Problems with Callback Hell ❌ Hard to read ❌ Difficult to debug ❌ Difficult to maintain ❌ Error handling becomes complicated ❌ Code becomes deeply nested Better Solution: Promises Instead of nested callbacks: loginUser () . then( getOrders ) . then( getPayment ) . then( sendEmail ) . then(() => { console . log( "Done" ); }) . catch( err => { console . log( err ); }); This is flatter and easier to read. Even Better: Async/Await async function processUser () { try { const user = await loginUser (); const orders = await getOrders ( user . id); const payment = await getPayment ( orders [ 0 ] . id); await sendEmail ( payment ); console . log( "Done" ); } catch ( err ) { console . log( err ); } } processUser (); This looks almost like synchronous code while remaining asynchronous. Callback vs Promise vs Async/Await Feature Callback Promise Async/Await Easy to Read ❌ ✅ ✅✅ Nested Code High Low Very Low Error Handling Difficult Easy Easiest Modern Approach Older Modern Most Recommended Real-Life Example 📦 Suppose you're ordering a product. Callback Order │ ▼ Payment │ ▼ Packing │ ▼ Shipping │ ▼ Delivery Each step is nested inside the previous one. Async/Await await Order() await Payment() await Packing() await Shipping() await Delivery() Much cleaner and easier to understand. Common Callback Functions setTimeout (() => {}, 1000 ); setInterval (() => {}, 1000 ); array . forEach( item => { console . log( item ); }); fs . readFile( "test.txt" , "utf8" , ( err , data ) => {}); All of these use callbacks. Interview Question What is the output? function greet ( callback ) { console . log( "Hello" ); callback (); } greet (() => { console . log( "World" ); }); Output Hello World Reason: The callback function executes after "Hello" is printed. Best Practices ✅ Use callbacks for simple asynchronous tasks. ✅ Always handle callback errors. ✅ Prefer Promises or async/await for multiple asynchronous operations. ❌ Avoid deeply nested callbacks. Common Mistakes ❌ Ignoring Errors fs . readFile( "test.txt" , "utf8" , ( err , data ) => { console . log( data ); }); If an error occurs, it is ignored. ✅ Correct fs . readFile( "test.txt" , "utf8" , ( err , data ) => { if ( err ) { console . error( err ); return ; } console . log( data ); }); Deep Callback Nesting task1 (() => { task2 (() => { task3 (() => { task4 (() => { console . log( "Done" ); }); }); }); }); ✅ Better task1 () . then( task2 ) . then( task3 ) . then( task4 ) . then(() => console . log( "Done" )); Key Points ✅ A callback is a function passed to another function. ✅ Callbacks are commonly used for asynchronous operations. ✅ Callback Hell is caused by deeply nested callbacks. ✅ Callback Hell makes code difficult to read and maintain. ✅ Promises and async/await are modern solutions to Callback Hell. 🧠 Easy Formula Need to run code after another task? │ ▼ Callback Too many nested callbacks? │ ▼ Callback Hell Best Modern Solution? │ ▼ Promises + Async/Await Remember: 📞 Callback = "Call me when you're done." 😵 Callback Hell = Too many nested callbacks. 🚀 Promises and async/await make asynchronous code cleaner, more readable, and easier to maintain.