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.
208 lines
20 KiB
208 lines
20 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
|
|
"translation_date": "2025-08-25T21:41:56+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "ne"
|
|
}
|
|
-->
|
|
# जाभास्क्रिप्ट आधारभूत: मेथड्स र फङ्सन्स
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
|
|
|
|
## प्रि-लेक्चर क्विज
|
|
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/9)
|
|
|
|
जब हामी कोड लेख्ने कुरा सोच्छौं, हाम्रो कोड पढ्न सजिलो बनाउनु महत्त्वपूर्ण हुन्छ। यो अलि अचम्म लाग्न सक्छ, तर कोड लेखिएको भन्दा धेरै पटक पढिन्छ। डेभलपरको टूलबक्समा कोडलाई व्यवस्थित र सजिलो बनाउनको लागि एउटा मुख्य उपकरण भनेको **फङ्सन** हो।
|
|
|
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
|
|
|
> 🎥 माथिको तस्बिरमा क्लिक गरेर मेथड्स र फङ्सन्सको बारेमा भिडियो हेर्नुहोस्।
|
|
|
|
> तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
|
|
|
|
## फङ्सन्स
|
|
|
|
फङ्सन भनेको मुख्य रूपमा कोडको एउटा ब्लक हो, जसलाई हामी आवश्यक पर्दा चलाउन सक्छौं। यो त्यस्ता अवस्थामा उपयोगी हुन्छ, जहाँ एउटै काम बारम्बार गर्नुपर्छ। एउटै तर्कलाई धेरै ठाउँमा दोहोर्याउनुको सट्टा (जसले पछि अपडेट गर्न गाह्रो बनाउँछ), हामी यसलाई एउटै ठाउँमा राख्न सक्छौं र आवश्यक पर्दा चलाउन सक्छौं। तपाईंले फङ्सनलाई अर्को फङ्सनबाट पनि बोलाउन सक्नुहुन्छ!
|
|
|
|
फङ्सनलाई नाम दिन सक्ने क्षमता पनि उत्तिकै महत्त्वपूर्ण छ। यो सामान्य लाग्न सक्छ, तर नामले कोडको भागलाई छिटो बुझ्न मद्दत गर्छ। यसलाई बटनमा लेबल जस्तै सोच्न सकिन्छ। यदि मैले "Cancel timer" लेखिएको बटन क्लिक गरेँ भने, मलाई थाहा हुन्छ यसले घडी रोक्छ।
|
|
|
|
## फङ्सन बनाउने र बोलाउने
|
|
|
|
फङ्सनको सिंट्याक्स यस प्रकार देखिन्छ:
|
|
|
|
```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!** देखाउँछ। यो धेरै उपयोगी फङ्सन होइन। यदि हामी यसलाई अलि लचिलो बनाउन चाहन्छौं, जस्तै अभिवादन गर्ने व्यक्तिको नाम निर्दिष्ट गर्न दिनु, हामी **parameter** थप्न सक्छौं।
|
|
|
|
प्यारामिटरहरू परिभाषा भागमा कोष्ठकभित्र सूचीबद्ध गरिन्छ र कमाले छुट्याइन्छ:
|
|
|
|
```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"
|
|
```
|
|
|
|
## रिटर्न मानहरू
|
|
|
|
अहिलेसम्म हामीले बनाएको फङ्सनले सधैं [console](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 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/web/quiz/10)
|
|
|
|
## समीक्षा र आत्म-अध्ययन
|
|
|
|
[एरो फङ्सनहरूको बारेमा](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) थप पढ्न लायक छ, किनभने यी कोड बेसहरूमा बढ्दो रूपमा प्रयोग गरिन्छ। एउटा फङ्सन लेख्ने अभ्यास गर्नुहोस्, र त्यसपछि यसलाई यो सिंट्याक्स प्रयोग गरेर पुनःलेखन गर्नुहोस्।
|
|
|
|
## असाइनमेन्ट
|
|
|
|
[फन विथ फङ्सन्स](assignment.md)
|
|
|
|
**अस्वीकरण**:
|
|
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। |