JavaScript Callback function and Promise in JavaScript in Hindi

Question: जावास्क्रिप्ट function के पैरामीटर में कोई दूसरा function हो तो वह function कैसे और कब call होता है?

जावास्क्रिप्ट में, एक फ़ंक्शन के पैरामीटर के रूप में दूसरे फ़ंक्शन को पास करना एक common practice है, जिसे आमतौर पर कॉलबैक फ़ंक्शन कहा जाता है। जब आप एक फ़ंक्शन को कॉल करते हैं, तो आप उसे एक अन्य फ़ंक्शन (कॉलबैक) के रूप में पैरामीटर के रूप में दे सकते हैं, और यह उस फ़ंक्शन के अंदर किसी विशेष समय पर दूसरे फ़ंक्शन को कॉल किया जा सकता है।

उदाहरण

नीचे एक उदाहरण दिया गया है जिसमें एक फ़ंक्शन greet है जो एक कॉलबैक फ़ंक्शन callback को पैरामीटर के रूप में लेता है और इसे कुछ समय बाद कॉल करता है।

// कॉलबैक फ़ंक्शन
function sayHello() {
    console.log("Hello!");
}

// मुख्य फ़ंक्शन जो एक कॉलबैक फ़ंक्शन को पैरामीटर के रूप में लेता है
function greet(callback) {
    console.log("Greeting begins");
    
    // कुछ समय के बाद कॉलबैक फ़ंक्शन को कॉल करें
    setTimeout(function() {
        callback(); // यहाँ कॉलबैक फ़ंक्शन को कॉल किया गया है
    }, 2000); // 2 सेकंड का समय कॉलबैक फ़ंक्शन  call होगा 
}

// greet फ़ंक्शन को sayHello फ़ंक्शन के साथ कॉल करें
greet(sayHello);

कैसे काम करता है:

1. कॉलबैक फ़ंक्शन (sayHello): यह एक साधारण फ़ंक्शन है जो "Hello!" संदेश को कंसोल में प्रदर्शित करता है।
2. मुख्य फ़ंक्शन (greet): यह एक फ़ंक्शन है जो एक अन्य फ़ंक्शन को पैरामीटर के रूप में लेता है। यह पहले एक संदेश प्रिंट करता है और फिर setTimeout का उपयोग करते हुए 2 सेकंड बाद कॉलबैक फ़ंक्शन (callback) को कॉल करता है।
3. greet(sayHello) कॉल: जब आप greet फ़ंक्शन को sayHello फ़ंक्शन के साथ कॉल करते हैं, तो greet फ़ंक्शन sayHello को पैरामीटर के रूप में लेता है। 2 सेकंड के बाद, sayHello फ़ंक्शन को कॉल किया जाता है, और "Hello!" कंसोल में प्रदर्शित होता है।

और उदाहरण:

आप विभिन्न परिदृश्यों में फ़ंक्शन के पैरामीटर के रूप में अन्य फ़ंक्शन का उपयोग कर सकते हैं। यहाँ एक और उदाहरण है जिसमें एक फ़ंक्शन डेटा को फ़िल्टर करता है:

// फ़िल्टर फ़ंक्शन
function filterArray(arr, callback) {
    let result = [];
    for (let item of arr) {
        if (callback(item)) { // कॉलबैक फ़ंक्शन का उपयोग
            result.push(item);
        }
    }
    return result;
}

// कॉलबैक फ़ंक्शन जो चेक करता है कि संख्या सम है या नहीं
function isEven(num) {
    return num % 2 === 0;
}

// एक एरे में से सम संख्याएँ फ़िल्टर करें
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = filterArray(numbers, isEven);
console.log(evenNumbers); // [2, 4, 6]

निष्कर्ष

जावास्क्रिप्ट में फ़ंक्शन के पैरामीटर में किसी दूसरे फ़ंक्शन को पास करना और उसे आवश्यक समय पर कॉल करना एक शक्तिशाली और लचीला तरीका है। इससे आप कोड को अधिक मॉड्यूलर और पुन: प्रयोज्य बना सकते हैं। कॉलबैक फ़ंक्शंस का उपयोग विशेष रूप से असिंक्रोनस प्रोग्रामिंग में, जैसे कि AJAX अनुरोध या टाइमर में, किया जाता है।

---

Question: जावास्क्रिप्ट में callback hell का क्या अभिप्राय है?

Callback Hell जावास्क्रिप्ट में एक ऐसी स्थिति को संदर्भित करता है, जब आप एक के बाद एक कई कॉलबैक फ़ंक्शंस को नेस्ट (nested) करते हैं, जिससे कोड की पठनीयता और प्रबंधन में कठिनाई होती है। यह आमतौर पर असिंक्रोनस ऑपरेशन्स के साथ होता है, जैसे कि API कॉल या टाइमर, और इससे कोड में गहराई तक नेस्टिंग हो जाती है।

Callback Hell का उदाहरण

यहाँ एक साधारण उदाहरण है जिसमें Callback Hell की समस्या दिखाई देती है:

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched");
        callback();
    }, 1000);
}

fetchData(() => {
    fetchData(() => {
        fetchData(() => {
            fetchData(() => {
                console.log("All data processed");
            });
        });
    });
});

समस्याएँ:

1. पठनीयता में कमी: जैसे-जैसे नेस्टिंग बढ़ती है, कोड समझना और पढ़ना कठिन हो जाता है।
2. डिबगिंग में कठिनाई: एरर को ट्रैक करना मुश्किल हो जाता है, क्योंकि एरर का स्थान नेस्टेड कॉलबैक में कहीं भी हो सकता है।
3. संरचना का अभाव: इस तरह के कोड में अच्छी संरचना और संगठन की कमी होती है, जिससे भविष्य में कोड को बनाए रखना और विस्तारित करना कठिन हो जाता है।

समाधान

Callback Hell को हल करने के लिए कुछ तकनीकें हैं:

1. प्रॉमिस (Promises): प्रॉमिस का उपयोग करके आप असिंक्रोनस कोड को अधिक पठनीय बना सकते हैं। प्रॉमिस एक बेहतर तरीका है जो कि अधिक स्पष्ट और संरचित है।

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Data fetched");
            resolve();
        }, 1000);
    });
}

fetchData()
    .then(fetchData)
    .then(fetchData)
    .then(() => {
        console.log("All data processed");
    });

2. Async/Await: Async/Await एक और तरीका है जो प्रॉमिस के साथ काम करता है और कोड को अधिक सरल और पठनीय बनाता है।

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Data fetched");
            resolve();
        }, 1000);
    });
}

async function processData() {
    await fetchData();
    await fetchData();
    await fetchData();
    console.log("All data processed");
}

processData();

निष्कर्ष:

Callback Hell जावास्क्रिप्ट में असिंक्रोनस कोडिंग की एक सामान्य समस्या है, लेकिन प्रॉमिस और Async/Await जैसी तकनीकों का उपयोग करके इसे प्रभावी ढंग से हल किया जा सकता है। इन विधियों का उपयोग करके, आप अपने कोड को अधिक साफ-सुथरा, पठनीय और बनाए रखने में आसान बना सकते हैं।

---

Question: एक Promise ऑब्जेक्ट बनाने के लिए क्या शर्तें हैं?

जावास्क्रिप्ट में एक Promise ऑब्जेक्ट बनाने के लिए कुछ शर्तें और विशेषताएँ होती हैं। एक प्रॉमिस एक असिंक्रोनस ऑपरेशन के परिणाम को दर्शाता है और यह तीन संभावित State में हो सकता है: Pending (लंबित), Fulfilled (पूर्ण), और Rejected (अस्वीकृत)।

Promise ऑब्जेक्ट बनाने की शर्तें

Constructor: Promise ऑब्जेक्ट को बनाने के लिए, आपको Promise कंस्ट्रक्टर का उपयोग करना होगा। इसका एक फंक्शनल पैरामीटर होता है जिसे executor कहा जाता है।

const myPromise = new Promise((resolve, reject) => {
    // आपका असिंक्रोनस कार्य यहाँ होगा
});

Executor Function: executor फंक्शन के अंदर असिंक्रोनस कोड होता है। इस फंक्शन को दो पैरामीटर दिए जाते हैं:

resolve: यह एक फंक्शन है, जिसे तब कॉल किया जाता है जब असिंक्रोनस ऑपरेशन सफल होता है। इसका उपयोग सफल परिणाम को वापस करने के लिए किया जाता है।

reject: यह एक फंक्शन है, जिसे तब कॉल किया जाता है जब असिंक्रोनस ऑपरेशन असफल होता है। इसका उपयोग एरर को वापस करने के लिए किया जाता है।

const myPromise = new Promise((resolve, reject) => {
    const success = true; // यह एक उदाहरण है
    
    if (success) {
        resolve("Operation Successful!");
    } else {
        reject("Operation Failed!");
    }
});

Promise States:

1. Pending: प्रारंभिक स्थिति, जब प्रॉमिस न तो पूर्ण हुई है और न ही अस्वीकृत।
2. Fulfilled: जब प्रॉमिस सफलतापूर्वक पूर्ण होती है और resolve फंक्शन कॉल होता है।
3. Rejected: जब प्रॉमिस अस्वीकृत होती है और reject फंक्शन कॉल होता है।

Chaining: एक प्रॉमिस का उपयोग करने के लिए, आप then और catch मेथड्स का उपयोग करके उसे चेन कर सकते हैं। then मेथड को कॉल करने पर, यह प्रॉमिस के पूर्ण होने पर चलाया जाता है, और catch मेथड को अस्वीकृति पर चलाया जाता है।

myPromise
    .then(result => {
        console.log(result); // "Operation Successful!"
    })
    .catch(error => {
        console.error(error); // "Operation Failed!"
    });

निष्कर्ष

Promise ऑब्जेक्ट बनाने के लिए, आपको Promise कंस्ट्रक्टर का उपयोग करना होगा, जिसमें एक executor फंक्शन होता है। इस फंक्शन में आप असिंक्रोनस कार्य कर सकते हैं और परिणाम को resolve या reject फंक्शन के माध्यम से वापस कर सकते हैं। यह जावास्क्रिप्ट में असिंक्रोनस प्रोग्रामिंग को आसान और अधिक संगठित बनाने के लिए एक महत्वपूर्ण तकनीक है।

---

Question: क्या promise ऑब्जेक्ट बनाने के लिए argument देना अनिवार्य है?

हां, जावास्क्रिप्ट में Promise ऑब्जेक्ट बनाने के लिए एक executor function देना अनिवार्य है। जब आप Promise कंस्ट्रक्टर का उपयोग करते हैं, तो आपको उसे एक फ़ंक्शन पास करना होता है, जिसमें दो पैरामीटर होते हैं: resolve और reject

Promise ऑब्जेक्ट बनाने की प्रक्रिया

• Executor Function: यह फ़ंक्शन वह जगह है जहाँ आप असिंक्रोनस कार्य करते हैं और परिणामों को संभालते हैं। यह फ़ंक्शन तब कॉल होता है जब आप Promise बनाते हैं।
• Resolve और Reject: इस फ़ंक्शन के अंदर, आप resolve को कॉल करके सफल परिणाम और reject को कॉल करके एरर को संभालते हैं।

उदाहरण:

const myPromise = new Promise((resolve, reject) => {
    const success = true; // यह एक उदाहरण है
    
    if (success) {
        resolve("Operation Successful!");
    } else {
        reject("Operation Failed!");
    }
});

बिना Argument के Promise बनाना

यदि आप Promise कंस्ट्रक्टर को बिना किसी argument के कॉल करते हैं, तो यह एक TypeError उत्पन्न करेगा। उदाहरण के लिए:

const myPromise = new Promise(); // यह गलत है और TypeError देगा

निष्कर्ष

इसलिए, एक Promise ऑब्जेक्ट बनाने के लिए एक executor function को एक argument के रूप में देना अनिवार्य है। बिना इस फ़ंक्शन के, प्रॉमिस सही ढंग से कार्य नहीं कर सकेगी और जावास्क्रिप्ट एक Error फेंकेगा।

---

Question: Promise ऑब्जेक्ट के स्टेट का पता कैसे लगा सकते हैं?

जावास्क्रिप्ट में, Promise ऑब्जेक्ट के स्टेट (स्थिति) का पता लगाना सीधे संभव नहीं है, क्योंकि प्रॉमिस के स्टेट को केवल उसके अंतर्गत resolve या reject के माध्यम से ही बदला जाता है। हालांकि, आप प्रॉमिस के परिणामों को ट्रैक करने के लिए कुछ तरीके अपना सकते हैं। यहाँ कुछ तरीके दिए गए हैं:

1. then और catch का उपयोग करना

जब आप एक प्रॉमिस को then या catch मेथड के साथ चेन करते हैं, तो आप यह जान सकते हैं कि प्रॉमिस सफल रही है या असफल। इससे आपको यह पता चलता है कि प्रॉमिस का स्टेट क्या है।

const myPromise = new Promise((resolve, reject) => {
    const success = true; // इसे बदलें
    if (success) {
        resolve("ऑपरेशन सफल रहा!");
    } else {
        reject("ऑपरेशन असफल रहा!");
    }
});

myPromise
    .then(result => {
        console.log("Fulfilled:", result); // यहाँ Promise Fulfilled है
    })
    .catch(error => {
        console.error("Rejected:", error); // यहाँ Promise Rejected है
    });

2. स्टेट ट्रैक करने के लिए Wrapper फ़ंक्शन का उपयोग

आप एक wrapper फ़ंक्शन बना सकते हैं जो प्रॉमिस के स्टेट को ट्रैक करता है। उदाहरण के लिए:

function createPromise() {
    let state = "pending"; // स्टेट को शुरू में 'pending' सेट करें

    const promise = new Promise((resolve, reject) => {
        // असिंक्रोनस कार्य
        setTimeout(() => {
            const success = true; // इसे बदलें
            if (success) {
                state = "fulfilled"; // सफल होने पर स्टेट को अपडेट करें
                resolve("Operation Successful!");
            } else {
                state = "rejected"; // असफल होने पर स्टेट को अपडेट करें
                reject("Operation Failed!");
            }
        }, 1000);
    });

    // स्टेट को जानने के लिए एक फ़ंक्शन दें
    promise.getState = () => state;

    return promise;
}

const myPromise = createPromise();

myPromise
    .then(result => {
        console.log("Fulfilled:", result);
        console.log("Current State:", myPromise.getState()); // "fulfilled"
    })
    .catch(error => {
        console.error("Rejected:", error);
        console.log("Current State:", myPromise.getState()); // "rejected"
    });

console.log("Initial State:", myPromise.getState()); // "pending"

3. Promise.allSettled

यदि आपके पास कई प्रॉमिस हैं और आप जानना चाहते हैं कि प्रत्येक प्रॉमिस का स्टेट क्या है, तो आप Promise.allSettled() का उपयोग कर सकते हैं। यह सभी प्रॉमिस को एक साथ ट्रैक करता है और एक एरे में परिणाम प्रदान करता है, जिसमें प्रत्येक प्रॉमिस का स्टेट शामिल होता है।

const promise1 = Promise.resolve("Successful!");
const promise2 = Promise.reject("Failed!");

Promise.allSettled([promise1, promise2])
    .then(results => {
        results.forEach((result, index) => {
            if (result.status === "fulfilled") {
                console.log(`Promise ${index + 1} Fulfilled with value:`, result.value);
            } else {
                console.error(`Promise ${index + 1} Rejected with reason:`, result.reason);
            }
        });
    });

निष्कर्ष:

जावास्क्रिप्ट में Promise के स्टेट का पता लगाने का कोई प्रत्यक्ष तरीका नहीं है, लेकिन आप then और catch का उपयोग करके या wrapper फ़ंक्शन का निर्माण करके या Promise.allSettled का उपयोग करके इसे ट्रैक कर सकते हैं। इन तरीकों से आप यह जान सकते हैं कि प्रॉमिस सफल रही है या असफल।