फ़ंक्शन
लूप बताते हैं कब काम दोहराया जाए। फ़ंक्शन दूसरा सवाल पूछते हैं: काम का ब्लॉक कहाँ रखें ताकि नाम से फिर चला सकें? फ़ंक्शन नाम वाला नुस्खा है। एक बार परिभाषित करें। जब वे कदम चाहिए हों तो कॉल करें। कॉपी-पेस्ट फीका पड़ता है; नाम रहता है।
फ़ंक्शन क्या है?
JavaScript में आप function कीवर्ड, एक नाम, कोष्ठक () और { } में बॉडी से फ़ंक्शन घोषित करते हैं। जब तक आप फ़ंक्शन कॉल नहीं करते — नाम और () — बॉडी में कुछ नहीं चलता। सोचें: «कदम पैक करें, फिर प्ले दबाएँ।»
फ़ंक्शन के हिस्से
📊 फ़ंक्शन की संरचना
| हिस्सा | भूमिका | रोज का उपयोग |
|---|---|---|
function कीवर्ड |
घोषणा शुरू करता है | «यहाँ नाम वाला नुस्खा आता है» |
| नाम | बाद में इसी से कॉल | sayHi, showTotal — साफ क्रियाएँ मदद करती हैं |
नाम के बाद () |
कॉल जगह / बाद में इनपुट | खाली () भी मतलब «अभी चलाओ» |
{ } बॉडी |
हर कॉल पर चलने वाले कदम | लॉग, गणना, पेज अपडेट |
कॉल name() |
अभी बॉडी चलाता है | बॉडी दोबारा लिखे बिना पुनः उपयोग |
केवल परिभाषा नुस्खा सहेजती है। कॉल उसे चलाती है। अगर कॉल न करें तो बॉडी चुप रहती है — भाषा में सामान्य है, बग नहीं।
function sayHi() {
console.log("Hi");
}
sayHi();
पहले परिभाषित करें, फिर कॉल करें
पहली तीन पंक्तियाँ sayHi परिभाषित करती हैं। आखिरी पंक्ति कॉल करती है। कंसोल में Hi दिखना चाहिए। बिना sayHi(); फ़ंक्शन मौजूद है पर चलता नहीं।
function beep() {
console.log("beep");
}
beep();
beep();
एक बॉडी का पुनः उपयोग
एक परिभाषा, दो कॉल — beep दो बार छपता है। यही बात: कदम एक बार लिखें, जब कहानी को वह आवाज़ चाहिए तब फिर चलाएँ। बाद में बॉडी बदलने से उस नाम की हर कॉल जगह अपडेट होती है।
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
बॉडी में कई कदम हो सकते हैं
एक कॉल पर दोनों पंक्तियाँ क्रम से चलती हैं: पहले loading, फिर ready। फ़ंक्शन एक स्टेटमेंट तक सीमित नहीं — पूरा छोटा काम ब्रेसिज़ में रखें।
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
स्थानीय काम नुस्खे में रहता है
city और line greetCity के अंदर रहते हैं। हर कॉल संदेश बनाती है और Hello from Tehran लॉग करती है। इस पैटर्न में बाहर वे नाम ज़रूरी नहीं — ट्रिगर कॉल ही है।
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
पेज के लिए काम चलाएँ
पहले DOM पाठों जैसी बात: एलिमेंट ढूँढें, textContent सेट करें। फ़ंक्शन में लपेटने से बटन, टाइमर या स्क्रिप्ट जब पेज अपडेट हो fillOut() कॉल कर सकती है — एक नाम, एक काम।
पेज पर फ़ंक्शन दिखाएँ
ऐसा फ़ंक्शन परिभाषित करें जो पैराग्राफ में छोटी पंक्ति लिखे, फिर स्क्रिप्ट से कॉल करें ताकि आगंतुक परिणाम देखे।
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
पेज दिखाता है Hello from a function। showMsg की बॉडी ने DOM लिखा; नीचे की कॉल ने प्ले दबाया। स्ट्रिंग बदलें, रीफ़्रेश करें, नई पंक्ति पढ़ें। अगला पाठ पैरामीटर पर जाता है — कॉल पर कोष्ठक में भेजे गए मान।
खुद आज़माएँ
function hello()घोषित करें जो"hello"लॉग करे और एक बार कॉल करें।- बॉडी दोबारा लिखे बिना उसी फ़ंक्शन को दूसरी बार कॉल करें।
- ऐसा फ़ंक्शन बनाएँ जिसकी बॉडी दो अलग शब्द क्रम से लॉग करे।
- फ़ंक्शन के अंदर
letसे स्ट्रिंग बनाएँ और लॉग करें। - ऐसा फ़ंक्शन लिखें जो
#outको"ok"करे (या डेमो की id लें)। - HTML डेमो में केवल संदेश बदलें, रीफ़्रेश करें, पैराग्राफ पढ़ें।
आम गलतियाँ
- फ़ंक्शन परिभाषित कर
()से कॉल भूल जाना - बिना
()केsayHiलिखना — नाम बताता है, बॉडी नहीं चलाता - एक फ़ंक्शन दो बार कॉल करने की जगह वही पंक्तियाँ कॉपी-पेस्ट करना
- काम
{ }के बाहर रखना और उम्मीद कि फ़ंक्शन नाम उसका «मालिक» है - इस पाठ को पैरामीटर/
returnसे मिलाना — वे बाद में; यहाँ परिभाषा + कॉल
सार
- फ़ंक्शन कदमों को एक नाम के नीचे पैक करता है
function name() { … }से घोषित करें- बॉडी चलाने के लिए
name()से कॉल करें - एक बॉडी, कई कॉल — यही पुनः उपयोग
- बॉडी में कई स्टेटमेंट और
letवाला स्थानीय काम हो सकता है - पेज अपडेट उस फ़ंक्शन में फिट होते हैं जिसे ज़रूरत पर कॉल करते हैं
- अगला: पैरामीटर — कॉल पर मान भेजें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी