Theory
वही पाँच lines, हर जगह
FestConnect तीन जगहों पर एक fee calculate करता है: event card, summary, receipt। आप तीनों में वही base * count maths copy करते हैं। फिर fee formula बदलती है, और आपको हर copy ढूँढनी पड़ती है।
एक function इसे fix करता है: logic एक बार लिखिए, इसे एक नाम दीजिए, और जहाँ चाहिए वहाँ इसे call कीजिए। इसे एक जगह बदलिए, सब जगह update होता है। Functions वह तरीक़ा हैं जिससे code ख़ुद को repeat करना बंद करता है और reusable बनना शुरू करता है।
Theory
एक recipe जो आप reuse कर सकते हैं
एक recipe एक बार लिखी जाती है और कई बार follow की जाती है। यह ingredients (parameters) लेती है, अपने steps करती है, और एक dish (return value) produce करती है। '2 tea बनाइए' और '5 tea बनाइए' वही recipe अलग amount के साथ इस्तेमाल करते हैं। एक function code के लिए एक recipe है: steps एक बार define कीजिए, फिर जब चाहिए result के लिए इसे अलग inputs के साथ call कीजिए।
Theory
Define, call, return
- Define:
function calcFee(base, count) { return base * count; }। brackets में नाम parameters (inputs) हैं। - Call:
calcFee(200, 2)arguments 200 और 2 के साथ इसे run करता है, 400 देते हुए। Calling को parentheses चाहिए। - return: caller को एक value वापस भेजता है और function ख़त्म करता है। कोई return नहीं मतलब यह
undefinedदेता है। - एक page redirect कीजिए:
window.location.href = "thanks.html"browser को दूसरे page पर भेजता है, एक successful action के बाद काम का।
Practical
FestConnect functions
// with parameters, returns a value
function calcFee(base, count) {
return base * count; // ends here; sends value back
}
console.log(calcFee(200, 2)); // 400
// without parameters
function showWelcome() {
console.log("Welcome to FestConnect");
}
showWelcome(); // runs it (note the parentheses)
// calling vs referencing
console.log(calcFee); // the function itself (no run)
console.log(calcFee(200, 1)); // 200 (called)
// after a successful register, redirect the browser
function goThanks() {
window.location.href = "thanks.html";
}This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Parenthesis क्या बदलता है?
button.addEventListener('click', register) बनाम button.addEventListener('click', register()) में, एक function को click से wire करता है और दूसरा एक bug है। कौन सा कौन है, और buggy वाला क्या करता है?
Show the answer
register (बिना parentheses) function ख़ुद को बाद में call होने के लिए pass करता है, जब click होता है। यह सही है। register() इसे तुरंत call करता है, ठीक जब line चलती है, और इसकी return value (शायद undefined) addEventListener को pass करता है, तो click पर कुछ नहीं होता। Rule: एक function को event को सौंपने के लिए, इसका नाम बिना parentheses इस्तेमाल कीजिए; parentheses का मतलब है 'इसे अभी run कीजिए'।
Quiz
एक function में `return total;` है जिसके बाद `console.log("done");` है। Log कभी print नहीं होता। क्यों?
- return तुरंत function ख़त्म करता है, तो इसके बाद का code नहीं चलता
- console.log सिर्फ़ functions के बाहर काम करता है
- जारी रखने के लिए आपको return दो बार call करना ज़रूरी है
- Log को चलने के लिए अपना ख़ुद का function चाहिए
Show the answer
return तुरंत function ख़त्म करता है, तो इसके बाद का code नहीं चलता
return एक value वापस सौंपता है और तुरंत function exit करता है, तो इसके बाद के कोई भी statements unreachable हैं और कभी execute नहीं होते (A)। console.log functions के अंदर ठीक काम करता है (B)। return दो बार call नहीं होता (C), और log को अपने ख़ुद के wrapper की ज़रूरत नहीं (D)। जो statements आप चलाना चाहते हैं वे return से पहले रखिए, वरना code dead है। यह 'return के बाद code' एक common bug है।
Watch out
Function traps
1. Call करने के लिए parentheses भूलना: अकेला showWelcome कुछ नहीं करता; showWelcome() इसे run करता है। पर event handlers के लिए आप जानबूझकर उन्हें छोड़ते हैं (नाम pass कीजिए)।
2. return के बाद code: यह कभी नहीं चलता। return exit है।
3. Parameters बनाम arguments: parameters definition में नाम हैं; arguments वे असली values हैं जो आप call करते समय pass करते हैं। बहुत कम pass करने से बाक़ी undefined रह जाते हैं।
Theory
register() ही goal है
इस unit में सब कुछ एक function की तरफ़ बनता है: register()। यह form के submit event पर call होगा, DOM methods से fields पढ़ेगा, उन्हें validate करेगा (अगले दो lessons), और success पर window.location से thanks.html तक redirect करेगा। अब आपके पास उस function की shape है; अगले lessons वे checks भरते हैं जो pass या fail तय करते हैं।
Summary
Key takeaways
- एक function एक named, reusable block है: एक बार define कीजिए, कई बार call कीजिए।
- Parameters definition में inputs हैं; arguments call करते समय pass की गई values हैं।
- Parentheses से call कीजिए: calcFee(200, 2)। return एक value वापस भेजता है AND function ख़त्म करता है।
- Event handlers के लिए function नाम BINA parentheses pass कीजिए; parentheses इसे तुरंत run करते हैं।
- window.location.href = "page.html" browser redirect करता है, जैसे एक successful register के बाद।
- Memory hook: एक reusable recipe, parentheses से called।