JavaScript Callbacks & Asynchronous Programming

Synchronous vs. Asynchronous Programming

JavaScript by default synchronous hai, yaani code line-by-line execute hota hai. Ek task ke complete hone ke baad hi doosra shuru hota hai. Lekin, agar koi task bohot time leta hai (jaise server se data fetch karna), toh poora page freeze ho jayega.

Is problem ko solve karne ke liye asynchronous programming ka use hota hai. Isme, time-consuming tasks ko background me shuru kar diya jaata hai, aur baaki ka code aage execute hota rehta hai, bina kisi rukawat ke.

1. Callbacks: The Traditional Way

JavaScript me callback ek function hota hai jo doosre function ko as an argument pass kiya jaata hai, aur uss function ke complete hone ke baad "call back" (execute) hota hai. Yeh asynchronous operations handle karne ka sabse basic tarika hai.

function fetchData(callback) {
  console.log("Fetching data...");
  // setTimeout se 2-second ka network delay simulate kar rahe hain
  setTimeout(function() {
    console.log("Data fetched!");
    callback("Yeh data server se aaya hai.");
  }, 2000);
}

fetchData(function(data) {
  console.log(data); // Yeh 2 second baad run hoga
});

console.log("Yeh message pehle print hoga.");

2. Callback Hell (The Pyramid of Doom)

Jab hum multiple dependent asynchronous tasks ko callbacks se handle karte hain, toh code bohot messy aur nested ho jaata hai. Is nested structure ko Callback Hell ya "Pyramid of Doom" kehte hain.

step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // Aur nested callbacks...
        console.log(value4);
      });
    });
  });
});

Is code ko padhna aur manage karna bohot mushkil hai. Is problem ko solve karne ke liye Promises introduce kiye gaye.

3. Promises: A Better Way

Promise ek object hai jo ek asynchronous operation ke future result (ya toh success ya failure) ko represent karta hai. Yeh "callback hell" se bachne me madad karta hai.

Ek Promise in teen states me se ek me ho sakta hai:

• Pending: Initial state, operation abhi complete nahi hua.
• Fulfilled (Resolved): Operation successfully complete ho gaya.
• Rejected: Operation fail ho gaya.

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulating a successful operation
  
  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed.");
  }
});

myPromise
  .then((message) => {
    console.log(message); // Success case
  })
  .catch((error) => {
    console.error(error); // Failure case
  });

4. Async/Await: Modern & Clean Syntax

`async/await` ES2017 me introduce kiya gaya tha aur yeh Promises ke upar ek syntactic sugar hai. Isse asynchronous code likhna aur padhna bohot aasan ho jaata hai, bilkul synchronous code ki tarah.

• `async` keyword: Function ke pehle lagaya jaata hai, jo yeh batata hai ki function hamesha ek promise return karega.
• `await` keyword: `async` function ke andar use hota hai. Yeh JavaScript ko kehta hai ki woh promise ke settle (resolve/reject) hone tak wait kare, bina poore program ko block kiye.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTasks() {
  console.log("Task 1 started");
  await delay(2000); // 2 seconds wait
  console.log("Task 2 after 2 seconds");
  await delay(1000); // 1 second wait
  console.log("Task 3 after 1 more second");
}

runTasks();

Key Takeaways

• Asynchronous programming non-blocking code likhne me madad karti hai.
• Callbacks asynchronous operations handle karne ka traditional tarika hai, lekin nested hone par "Callback Hell" create kar sakte hain.
• Promises "Callback Hell" ka ek behtar solution hain, jo `.then()` aur `.catch()` se chaining allow karte hain.
• `async/await` Promises ke upar ek modern aur clean syntax hai, jo asynchronous code ko synchronous jaisa banata hai.