You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
22 KiB
210 lines
22 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "92e136090efc4341b1d51c37924c1802",
|
|
"translation_date": "2025-08-29T15:57:38+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "hi"
|
|
}
|
|
-->
|
|
# जावास्क्रिप्ट बेसिक्स: मेथड्स और फंक्शन्स
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
|
|
|
|
## प्री-लेक्चर क्विज़
|
|
[प्री-लेक्चर क्विज़](https://ff-quizzes.netlify.app)
|
|
|
|
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने में आसान हो। यह सुनने में उल्टा लग सकता है, लेकिन कोड को जितनी बार लिखा जाता है, उससे कहीं अधिक बार पढ़ा जाता है। डेवलपर के टूलबॉक्स में एक मुख्य उपकरण जो कोड को बनाए रखने योग्य बनाता है, वह है **फंक्शन**।
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स और फंक्शन्स")
|
|
|
|
> 🎥 ऊपर दी गई इमेज पर क्लिक करें मेथड्स और फंक्शन्स पर वीडियो देखने के लिए।
|
|
|
|
> आप इस पाठ को [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) पर ले सकते हैं!
|
|
|
|
## फंक्शन्स
|
|
|
|
मूल रूप से, एक फंक्शन कोड का एक ब्लॉक है जिसे हम आवश्यकता पड़ने पर निष्पादित कर सकते हैं। यह उन परिस्थितियों के लिए आदर्श है जहां हमें एक ही कार्य को कई बार करना होता है; लॉजिक को कई स्थानों पर डुप्लिकेट करने के बजाय (जो बाद में अपडेट करना मुश्किल बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं और जब भी हमें ऑपरेशन की आवश्यकता हो, इसे कॉल कर सकते हैं - आप एक फंक्शन को दूसरे फंक्शन से भी कॉल कर सकते हैं!
|
|
|
|
उतना ही महत्वपूर्ण है फंक्शन को नाम देने की क्षमता। जबकि यह मामूली लग सकता है, नाम कोड के एक हिस्से को जल्दी से डॉक्यूमेंट करने का एक तरीका प्रदान करता है। आप इसे एक बटन पर लेबल के रूप में सोच सकते हैं। यदि मैं एक बटन पर क्लिक करता हूं जिस पर लिखा है "टाइमर रद्द करें", तो मुझे पता है कि यह घड़ी को चलना बंद कर देगा।
|
|
|
|
## फंक्शन बनाना और कॉल करना
|
|
|
|
फंक्शन के लिए सिंटैक्स इस प्रकार दिखता है:
|
|
|
|
```javascript
|
|
function nameOfFunction() { // function definition
|
|
// function definition/body
|
|
}
|
|
```
|
|
|
|
यदि मैं एक ग्रीटिंग दिखाने के लिए एक फंक्शन बनाना चाहता हूं, तो यह इस प्रकार दिख सकता है:
|
|
|
|
```javascript
|
|
function displayGreeting() {
|
|
console.log('Hello, world!');
|
|
}
|
|
```
|
|
|
|
जब भी हम अपने फंक्शन को कॉल (या इनवोक) करना चाहते हैं, तो हम फंक्शन के नाम के बाद `()` का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारा फंक्शन परिभाषित करने से पहले या बाद में कॉल किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए ढूंढ लेगा।
|
|
|
|
```javascript
|
|
// calling our function
|
|
displayGreeting();
|
|
```
|
|
|
|
> **NOTE:** एक विशेष प्रकार का फंक्शन जिसे **मेथड** कहा जाता है, वह भी है, जिसे आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर के डेमो में देखा जब हमने `console.log` का उपयोग किया। जो चीज़ एक मेथड को फंक्शन से अलग बनाती है, वह यह है कि मेथड एक ऑब्जेक्ट से जुड़ा होता है (`console` हमारे उदाहरण में), जबकि फंक्शन स्वतंत्र होता है। आप देखेंगे कि कई डेवलपर्स इन शब्दों का परस्पर उपयोग करते हैं।
|
|
|
|
### फंक्शन के लिए सर्वोत्तम प्रथाएं
|
|
|
|
फंक्शन बनाते समय ध्यान में रखने के लिए कुछ सर्वोत्तम प्रथाएं हैं:
|
|
|
|
- हमेशा की तरह, वर्णनात्मक नामों का उपयोग करें ताकि आप जान सकें कि फंक्शन क्या करेगा।
|
|
- शब्दों को जोड़ने के लिए **camelCasing** का उपयोग करें।
|
|
- अपने फंक्शन्स को एक विशिष्ट कार्य पर केंद्रित रखें।
|
|
|
|
## फंक्शन में जानकारी पास करना
|
|
|
|
फंक्शन को अधिक पुन: उपयोगी बनाने के लिए, आप अक्सर उसमें जानकारी पास करना चाहेंगे। यदि हम ऊपर दिए गए `displayGreeting` उदाहरण पर विचार करें, तो यह केवल **Hello, world!** दिखाएगा। यह सबसे उपयोगी फंक्शन नहीं है जिसे कोई बना सकता है। यदि हम इसे थोड़ा अधिक लचीला बनाना चाहते हैं, जैसे किसी को ग्रीट करने वाले व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, तो हम एक **पैरामीटर** जोड़ सकते हैं। पैरामीटर (जिसे कभी-कभी **आर्ग्युमेंट** भी कहा जाता है) फंक्शन को भेजी गई अतिरिक्त जानकारी है।
|
|
|
|
पैरामीटर परिभाषा भाग में कोष्ठक के भीतर सूचीबद्ध होते हैं और इस प्रकार अल्पविराम से अलग होते हैं:
|
|
|
|
```javascript
|
|
function name(param, param2, param3) {
|
|
|
|
}
|
|
```
|
|
|
|
हम अपने `displayGreeting` को एक नाम स्वीकार करने और उसे प्रदर्शित करने के लिए अपडेट कर सकते हैं।
|
|
|
|
```javascript
|
|
function displayGreeting(name) {
|
|
const message = `Hello, ${name}!`;
|
|
console.log(message);
|
|
}
|
|
```
|
|
|
|
जब हम अपने फंक्शन को कॉल करना चाहते हैं और पैरामीटर पास करना चाहते हैं, तो हम इसे कोष्ठक में निर्दिष्ट करते हैं।
|
|
|
|
```javascript
|
|
displayGreeting('Christopher');
|
|
// displays "Hello, Christopher!" when run
|
|
```
|
|
|
|
## डिफ़ॉल्ट मान
|
|
|
|
हम अपने फंक्शन को और भी अधिक लचीला बना सकते हैं, अधिक पैरामीटर जोड़कर। लेकिन क्या होगा यदि हम नहीं चाहते कि हर मान निर्दिष्ट किया जाए? हमारे ग्रीटिंग उदाहरण के साथ जारी रखते हुए, हम नाम को आवश्यक छोड़ सकते हैं (हमें यह जानने की आवश्यकता है कि हम किसे ग्रीट कर रहे हैं), लेकिन हम चाहते हैं कि ग्रीटिंग को इच्छानुसार अनुकूलित करने की अनुमति हो। यदि कोई इसे अनुकूलित नहीं करना चाहता है, तो हम इसके बजाय एक डिफ़ॉल्ट मान प्रदान करते हैं। पैरामीटर को डिफ़ॉल्ट मान प्रदान करने के लिए, हम इसे उसी तरह सेट करते हैं जैसे हम किसी वेरिएबल के लिए मान सेट करते हैं - `parameterName = 'defaultValue'`। एक पूर्ण उदाहरण देखने के लिए:
|
|
|
|
```javascript
|
|
function displayGreeting(name, salutation='Hello') {
|
|
console.log(`${salutation}, ${name}`);
|
|
}
|
|
```
|
|
|
|
जब हम फंक्शन को कॉल करते हैं, तो हम तय कर सकते हैं कि `salutation` के लिए मान सेट करना है या नहीं।
|
|
|
|
```javascript
|
|
displayGreeting('Christopher');
|
|
// displays "Hello, Christopher"
|
|
|
|
displayGreeting('Christopher', 'Hi');
|
|
// displays "Hi, Christopher"
|
|
```
|
|
|
|
## रिटर्न मान
|
|
|
|
अब तक, जो फंक्शन हमने बनाया है, वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह वही हो सकता है जो हम चाहते हैं, खासकर जब हम ऐसे फंक्शन्स बनाते हैं जो अन्य सेवाओं को कॉल करेंगे। लेकिन क्या होगा यदि मैं एक हेल्पर फंक्शन बनाना चाहता हूं जो एक गणना करता है और मान को वापस प्रदान करता है ताकि मैं इसे कहीं और उपयोग कर सकूं?
|
|
|
|
हम इसे **रिटर्न मान** का उपयोग करके कर सकते हैं। एक रिटर्न मान फंक्शन द्वारा लौटाया जाता है, और इसे एक वेरिएबल में उसी तरह संग्रहीत किया जा सकता है जैसे हम किसी स्ट्रिंग या नंबर जैसे स्थिर मान को संग्रहीत कर सकते हैं।
|
|
|
|
यदि कोई फंक्शन कुछ रिटर्न करता है, तो `return` कीवर्ड का उपयोग किया जाता है। `return` कीवर्ड को रिटर्न किए जा रहे मान या संदर्भ की अपेक्षा होती है, जैसे:
|
|
|
|
```javascript
|
|
return myVariable;
|
|
```
|
|
|
|
हम एक फंक्शन बना सकते हैं जो एक ग्रीटिंग संदेश बनाता है और कॉलर को मान वापस करता है।
|
|
|
|
```javascript
|
|
function createGreetingMessage(name) {
|
|
const message = `Hello, ${name}`;
|
|
return message;
|
|
}
|
|
```
|
|
|
|
जब हम इस फंक्शन को कॉल करेंगे, तो हम मान को एक वेरिएबल में संग्रहीत करेंगे। यह उसी तरह है जैसे हम एक वेरिएबल को स्थिर मान पर सेट करते हैं (जैसे `const name = 'Christopher'`)।
|
|
|
|
```javascript
|
|
const greetingMessage = createGreetingMessage('Christopher');
|
|
```
|
|
|
|
## फंक्शन्स को फंक्शन्स के पैरामीटर के रूप में उपयोग करना
|
|
|
|
जैसे-जैसे आप अपने प्रोग्रामिंग करियर में आगे बढ़ेंगे, आप ऐसे फंक्शन्स से मिलेंगे जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। यह अनोखा ट्रिक आमतौर पर तब उपयोग किया जाता है जब हमें यह नहीं पता होता कि कुछ कब होगा या पूरा होगा, लेकिन हमें पता होता है कि हमें प्रतिक्रिया में एक ऑपरेशन करना है।
|
|
|
|
उदाहरण के लिए, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और जब यह पूरा होता है तो कोड निष्पादित करेगा। हमें इसे बताना होगा कि हम कौन सा कोड निष्पादित करना चाहते हैं। यह एकदम सही काम है फंक्शन के लिए!
|
|
|
|
यदि आप नीचे दिया गया कोड चलाते हैं, तो 3 सेकंड के बाद आपको संदेश **3 seconds has elapsed** दिखाई देगा।
|
|
|
|
```javascript
|
|
function displayDone() {
|
|
console.log('3 seconds has elapsed');
|
|
}
|
|
// timer value is in milliseconds
|
|
setTimeout(displayDone, 3000);
|
|
```
|
|
|
|
### अनाम फंक्शन्स
|
|
|
|
आइए हम जो बनाया है उसे फिर से देखें। हम एक नाम के साथ एक फंक्शन बना रहे हैं जिसे केवल एक बार उपयोग किया जाएगा। जैसे-जैसे हमारा एप्लिकेशन अधिक जटिल होता जाएगा, हम देख सकते हैं कि हम बहुत सारे फंक्शन्स बना रहे हैं जिन्हें केवल एक बार कॉल किया जाएगा। यह आदर्श नहीं है। जैसा कि यह पता चलता है, हमें हमेशा नाम प्रदान करने की आवश्यकता नहीं होती है!
|
|
|
|
जब हम एक फंक्शन को पैरामीटर के रूप में पास कर रहे होते हैं, तो हम इसे पहले से बनाने को छोड़ सकते हैं और इसके बजाय इसे पैरामीटर के हिस्से के रूप में बना सकते हैं। हम वही `function` कीवर्ड का उपयोग करते हैं, लेकिन इसके बजाय इसे पैरामीटर के रूप में बनाते हैं।
|
|
|
|
आइए ऊपर दिए गए कोड को फिर से लिखें ताकि यह एक अनाम फंक्शन का उपयोग करे:
|
|
|
|
```javascript
|
|
setTimeout(function() {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
यदि आप हमारा नया कोड चलाते हैं, तो आप देखेंगे कि हमें वही परिणाम मिलते हैं। हमने एक फंक्शन बनाया, लेकिन इसे नाम देने की आवश्यकता नहीं पड़ी!
|
|
|
|
### फैट एरो फंक्शन्स
|
|
|
|
कई प्रोग्रामिंग भाषाओं (जिनमें जावास्क्रिप्ट भी शामिल है) में एक सामान्य शॉर्टकट है जिसे **एरो** या **फैट एरो** फंक्शन कहा जाता है। यह `=>` नामक एक विशेष संकेतक का उपयोग करता है, जो एक एरो जैसा दिखता है - इसलिए इसका नाम! `=>` का उपयोग करके, हम `function` कीवर्ड को छोड़ सकते हैं।
|
|
|
|
आइए हमारे कोड को एक बार फिर से लिखें ताकि यह फैट एरो फंक्शन का उपयोग करे:
|
|
|
|
```javascript
|
|
setTimeout(() => {
|
|
console.log('3 seconds has elapsed');
|
|
}, 3000);
|
|
```
|
|
|
|
### प्रत्येक रणनीति का उपयोग कब करें
|
|
|
|
अब आपने देखा कि हमारे पास एक फंक्शन को पैरामीटर के रूप में पास करने के तीन तरीके हैं और आप सोच रहे होंगे कि प्रत्येक का उपयोग कब करें। यदि आप जानते हैं कि आप फंक्शन का एक से अधिक बार उपयोग करेंगे, तो इसे सामान्य रूप से बनाएं। यदि आप इसे केवल एक स्थान के लिए उपयोग करेंगे, तो आमतौर पर अनाम फंक्शन का उपयोग करना सबसे अच्छा होता है। चाहे आप फैट एरो फंक्शन का उपयोग करें या अधिक पारंपरिक `function` सिंटैक्स का, यह आप पर निर्भर है, लेकिन आप देखेंगे कि अधिकांश आधुनिक डेवलपर्स `=>` को प्राथमिकता देते हैं।
|
|
|
|
---
|
|
|
|
## 🚀 चुनौती
|
|
|
|
क्या आप एक वाक्य में फंक्शन्स और मेथड्स के बीच का अंतर स्पष्ट कर सकते हैं? इसे आज़माएं!
|
|
|
|
## पोस्ट-लेक्चर क्विज़
|
|
[पोस्ट-लेक्चर क्विज़](https://ff-quizzes.netlify.app)
|
|
|
|
## समीक्षा और स्व-अध्ययन
|
|
|
|
यह [एरो फंक्शन्स पर थोड़ा और पढ़ने](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) लायक है, क्योंकि वे कोड बेस में तेजी से उपयोग किए जा रहे हैं। एक फंक्शन लिखने का अभ्यास करें, और फिर इसे इस सिंटैक्स के साथ फिर से लिखें।
|
|
|
|
## असाइनमेंट
|
|
|
|
[फन विद फंक्शन्स](assignment.md)
|
|
|
|
---
|
|
|
|
**अस्वीकरण**:
|
|
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं। |