JavaScript फंक्शन परिभाषा: घोषणा vs अभिव्यक्ति

JavaScript में फंक्शन बनाने के दो मुख्य तरीके हैं: फंक्शन डिक्लेरेशन (घोषणा) और फंक्शन एक्सप्रेशन (अभिव्यक्ति)। दोनों के अलग-अलग व्यवहार और उपयोग के मामले हैं।

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    .sample { font-size: 18px; font-weight: 500; font-family: monospace; white-space: pre-wrap; } 
    button { padding: 10px 20px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript फंक्शन परिभाषाएं</h1> 
<div class="sample"></div> 
<button class="Btn">फंक्शन परिभाषाएं दिखाएं</button> 
<h3>ऊपर दिए गए बटन पर क्लिक करके फंक्शन परिभाषाएं देखें</h3> 
<script> 
    const sampleEle = document.querySelector(".sample"); 
    
    // फंक्शन डिक्लेरेशन (होइस्ट होता है)
    function helloWorld() { 
        alert("HELLO WORLD"); 
    } 
    
    // फंक्शन एक्सप्रेशन (होइस्ट नहीं होता)
    const testFunction = function() { 
        alert("TEST FUNCTION"); 
    }; 
    
    // एरो फंक्शन (ES6)
    const arrowFunc = () => alert("ARROW FUNCTION"); 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        sampleEle.innerHTML = "helloWorld (डिक्लेरेशन):\n" + helloWorld.toString() + "\n\n"; 
        sampleEle.innerHTML += "testFunction (एक्सप्रेशन):\n" + testFunction.toString() + "\n\n"; 
        sampleEle.innerHTML += "arrowFunc (एरो):\n" + arrowFunc.toString(); 
    }); 
</script> </body> </html>

आउटपुट

बटन क्लिक करने पर तीनों फंक्शन के सोर्स कोड प्रदर्शित होंगे।

तुलना तालिका

कब क्या उपयोग करें?

• डिक्लेरेशन: मुख्य फंक्शन्स, लाइब्रेरी API, जब होइस्टिंग चाहिए
• एक्सप्रेशन: कॉलबैक, IIFE, कंडीशनल फंक्शन डेफिनिशन
• एरो: शॉर्ट कॉलबैक, मैप/फिल्टर/रिड्यूस, जब लेक्सिकल this चाहिए