पाठ 9, कुल 30 में

JavaScript फंक्शन्स

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript डेटा टाइप्स JavaScript ऑब्जेक्ट्स

Function नाम वाला code का block है जो एक काम करता है। आप उसे एक बार लिखते हैं, नाम देते हैं, और फिर सिर्फ नाम बुलाकर उसे बार-बार चला सकते हैं। Recipe की तरह सोचिए: चाय की recipe बताती है कि एक कप कैसे बनता है। हर बार जब कोई चाय order करता है, तो आप recipe दोबारा नहीं लिखते — वही recipe फिर से अपनाते हैं। Function recipe है; उसे बुलाना चाय बनाना है।

Diagram — देखें, यह सब कैसे जुड़ता है

Functions के बिना, आपको वही lines हर जगह copy करनी पड़तीं जहाँ उनकी ज़रूरत है। अगर चाय की कीमत बदल जाए, तो आपको हर copy ढूँढकर ठीक करनी पड़ती। Function के साथ, कीमत एक जगह रहती है। एक बार बदलिए, और हर call नई कीमत इस्तेमाल करता है। इसीलिए पेशेवर programmers लगभग सब कुछ functions के अंदर रखते हैं।

Function बनाना और बुलाना

आप function को function शब्द, नाम, गोल कोष्ठक और घुँघराले कोष्ठकों में body से declare करते हैं। उसे चलाने के लिए, आप उसका नाम गोल कोष्ठकों के साथ लिखते हैं — इसे function को call करना कहते हैं।

function sayHello() {
  alert("Namaste! Welcome to KAMALDNP.");
}
sayHello();

सिर्फ function declare करने से कुछ नहीं होता — अंदर का code तब तक चुपचाप इंतज़ार करता है जब तक कोई उसे बुलाता नहीं। एक declaration को सौ बार बुलाया जा सकता है, पेज में कहीं से भी।

Note: Function का नाम variable के नाम वाले नियम ही मानता है: अक्षर, अंक, underscore और $, और वह अंक से शुरू नहीं हो सकता। ऐसा verb इस्तेमाल कीजिए जो बताता हो कि वह क्या करता है — calculateBill(), doThing() से बेहतर है। अच्छे नाम अच्छे code का आधा हिस्सा हैं।

Parameters और arguments

ज़्यादातर functions को काम करने के लिए कुछ input चाहिए होता है। Declare करते समय brackets के अंदर जो values आप लिखते हैं, उन्हें parameters कहते हैं। Call करते समय जो असली values आप देते हैं, उन्हें arguments कहते हैं। नीचे चाय वाले उदाहरण में cups parameter है और 3 argument है।

function chaiBill(cups) {
  return cups * 10;
}
let total = chaiBill(3);  // total is 30

Function जितने चाहे उतने parameters ले सकता है, commas से अलग। अगर आप उसे जितने parameters चाहिए उससे कम arguments देकर बुलाते हैं, तो बाकी undefined हो जाते हैं — इसलिए हमेशा वही दीजिए जो function को चाहिए।

Return — जवाब वापस भेजना

return keyword बुलाने वाली जगह को value वापस भेजता है। return के बिना भी function चलता है, पर वह undefined लौटाता है। ऐसे समझिए: सिर्फ संदेश दिखाने वाला function उस रसोइए जैसा है जो चाय परोसता है; return वाला function उस cashier जैसा है जो आपको कुल रकम बताता है ताकि आप उसे इस्तेमाल कर सकें।

जैसे ही function return पर पहुँचता है, वह तुरंत रुक जाता है — उसके बाद की कोई line नहीं चलेगी। जब जवाब मिल गया हो, तो जल्दी बाहर निकलने का यह अच्छा तरीका है।

Tip: हर function को छोटा और एक काम पर केंद्रित रखिए। calculateBill() नाम वाले function को सिर्फ bill निकालना चाहिए — उसे print भी नहीं करना चाहिए, save भी नहीं, और संदेश भी नहीं भेजना चाहिए। छोटे functions को test करना, दोबारा इस्तेमाल करना और गलत होने पर ठीक करना आसान होता है।

आम गलतियाँ

बुलाते समय brackets भूल जाना — () के बिना sayHello कुछ नहीं करता; वह सिर्फ function की तरफ इशारा करता है, उसे चलाता नहीं।
return इस्तेमाल करके फिर और lines चलने की उम्मीद करना — return के बाद का code कभी नहीं चलता।
Argument देना भूल जाना — parameter undefined हो जाता है और आपका गणित NaN बन जाता है।
Function और variable को एक ही नाम देना — बाद वाला जीत जाता है और पहला खो जाता है।

याद रखें

Function नाम वाला code का block है: एक बार declare कीजिए, कई बार बुलाइए।
Parameters declaration में inputs हैं; arguments वे values हैं जो आप बुलाते समय देते हैं।
return value वापस भेजता है; उसके बिना function undefined देता है।
एक बार लिखिए, कई बार बुलाइए — function एक recipe है जिसे आप नाम देते हैं और दोबारा इस्तेमाल करते हैं।

उदाहरण समझिए

function chaiBill(cups) { return cups * 10; } — recipe: एक कप ₹10 का है, इसलिए bill cups की संख्या गुना 10 है। cups parameter है।
document.getElementById("cups").value — input box में visitor ने जो नंबर type किया है, उसे पढ़ता है।
let total = chaiBill(3); — 3 cups के साथ function बुलाने पर 30 मिलता है, जो total में रखा जाता है।
onclick="showBill()" — जब visitor button पर click करता है, तो showBill function चलता है और जवाब भर देता है।
document.getElementById("result").innerHTML = ... — जवाब को पेज पर result paragraph में लिखता है, ताकि visitor उसे reload किए बिना देख सके।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Chai Bill Calculator</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; }
button { background-color: #e13611; color: white; padding: 10px 18px; border: none; }
#result { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Chai Bill Calculator</h1>
<p>One cup of chai costs ₹10. How many cups do you want?</p>
<input type="number" id="cups" value="3">
<button onclick="showBill()">Calculate Bill</button>
<p id="result">Your bill will appear here.</p>

<script>
function chaiBill(cups) {
  return cups * 10;
}
function showBill() {
  let cups = document.getElementById("cups").value;
  let total = chaiBill(cups);
  document.getElementById("result").innerHTML = "Your bill is ₹" + total;
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।