एरो फ़ंक्शन
आप फ़ंक्शन घोषित करना, आर्गुमेंट देना और return से मान बाहर भेजना सीख चुके हैं। रोज़मर्रा के कई छोटे हेल्पर इतने छोटे होते हैं कि पूरा function कीवर्ड भारी लगता है। JavaScript उन्हें एरो — => — से भी लिखने देता है, ज़्यादा सघन पंक्ति में।
एरो फ़ंक्शन क्या है
यह अब भी फ़ंक्शन है: इनपुट लेता है, बॉडी चलाता है, परिणाम लौटा सकता है। सिर्फ आकार बदलता है। अक्सर const में नाम रखते हैं, पैरामीटर लिखते हैं, => आता है, फिर या तो छोटा व्यंजक या { } ब्लॉक।
क्लासिक फ़ंक्शन के बगल में
📊 क्लासिक फ़ंक्शन बनाम एरो
| विचार | क्लासिक शैली | एरो शैली |
|---|---|---|
| नामित हेल्पर | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| एक व्यंजक लौटाना | { } के अंदर return a + b; |
=> के बाद व्यंजक स्वयं लौटता है |
| कई कथन | { } प्लस return |
वही नियम: { } और return |
| एक पैरामीटर | (name) |
name => ... (कोष्ठक वैकल्पिक) |
| बिना पैरामीटर | function hi() { ... } |
const hi = () => ... — खाली () ज़रूरी |
| कहाँ रहती है | घोषणा या व्यंजक | लगभग हमेशा वेरिएबल में |
दोनों शैली संख्या और स्ट्रिंग लौटा सकती हैं। छोटा हेल्पर और साफ़ const नाम चाहिए तो एरो आसान है। जब नामित ब्लॉक उभरना चाहिए तो क्लासिक function भी बिल्कुल सही है।
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
व्यंजक बॉडी खुद लौटाती है
=> के बाद एक ही व्यंजक हो तो वह मूल्यांकित होकर अपने आप कॉलर को मिलता है — न { } चाहिए न return शब्द। यहाँ double(5) बनता है 10। आर्गुमेंट बदलें; गुणनफल बदलेगा।
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
ब्रेसेज़ का मतलब: return आप लिखें
जब बॉडी { } इस्तेमाल करे, JavaScript आखिरी पंक्ति अपने आप नहीं लौटाता। क्लासिक फ़ंक्शन की तरह खुद return लिखें। जल्दी निकास और बहु-चरण तर्क साफ़ रहते हैं।
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
एक पैरामीटर पर कोष्ठक हटा सकते हैं
बिल्कुल एक पैरामीटर हो तो name => ... बिना ( ) लिख सकते हैं। कॉल साइट वही: greet("Sara")। दो या ज़्यादा पैरामीटर पर कोष्ठक रखें।
const hello = () => "Hello";
console.log(hello());
शून्य पैरामीटर पर भी () चाहिए
इनपुट न हों तो => से पहले खाली कोष्ठक लिखें। हटाना सिंटैक्स त्रुटि है। कॉल फिर भी hello() — खाली जोड़ी का मतलब «कोई पैरामीटर नहीं»।
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
नाम दें, फिर कॉल करें
const add = (a, b) => a + b एरो को add के नीचे रखता है। कॉल किसी भी फ़ंक्शन जैसी: add(3, 4) देता है 7। एक हेल्पर, दो कॉल — बॉडी दोबारा नहीं लिखनी।
पेज पर एरो लगाएँ
एरो से स्वागत स्ट्रिंग बनाएँ, कॉल करें, परिणाम पैराग्राफ में लिखें — वही पेज पैटर्न, छोटा आकार।
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
पैराग्राफ Hello, Omar दिखाता है। एरो ने स्ट्रिंग लौटाई; अगली पंक्ति ने पेज पर रखी। सिर्फ आर्गुमेंट बदलें, रीफ़्रेश करें, नई पंक्ति पढ़ें। अगला पाठ स्कोप है — वे नाम कहाँ दिखते हैं।
अभ्यास चरण
function triple(n) { return n * 3; }को व्यंजक बॉडी वालेconstएरो में लिखें।const hi = name => "hi " + nameलिखें औरhi("Neda")लॉग करें।const ping = () => "pong"लिखें और एक बार कॉल करें।- ब्लॉक बॉडी एरो लिखें जो
n === 0पर"zero", वरना"nonzero"लौटाए। const add = (a, b) => a + bके बाद जाँचें किadd(6, 1)से7मिले।- HTML डेमो में सिर्फ आर्गुमेंट स्ट्रिंग बदलें, रीफ़्रेश करें, पैराग्राफ पढ़ें।
आम गलतियाँ
=>के बाद{ }खोलना औरreturnभूलना — कॉलundefinedदेती है- जब शून्य पैरामीटर हों तब
()हटाना =>को तुलना ऑपरेटर से मिलाना — एरो फ़ंक्शन सिंटैक्स है, «बड़ा» नहीं- यहीं पूरा
thisपाठ अपेक्षा करना — बाइंडिंग अंतर बाद के पेज पर; यहाँ संक्षिप्त आकार है - सोचना कि एरो
returnज्ञान हटा देता है — व्यंजक अभी भी लौटाते हैं; ब्लॉक को अभी भीreturnचाहिए
सार
- एरो फ़ंक्शन
=>इस्तेमाल करते हैं और अक्सरconstमें रहते हैं =>के बाद नंगा व्यंजक अपने आप लौटता है{ }बॉडी को स्पष्टreturnचाहिए- एक पैरामीटर
( )हटा सकता है; शून्य पैरामीटर खाली()चाहते हैं - नाम से कॉल करें जैसे किसी और फ़ंक्शन को
- पेज अपडेट एरो से लौटी स्ट्रिंग इस्तेमाल कर सकता है
- अगला: स्कोप — नाम कहाँ जीवित रहते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी