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.
225 lines
23 KiB
225 lines
23 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "5958491a27a8dd97a4777f34f9214bca",
|
|
"translation_date": "2025-10-20T21:13:30+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "mr"
|
|
}
|
|
-->
|
|
# जावास्क्रिप्ट मूलभूत गोष्टी: पद्धती आणि फंक्शन्स
|
|
|
|
|
|
> स्केच नोट [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!** प्रदर्शित करेल. हे फारसे उपयुक्त फंक्शन नाही. जर आपण ते थोडे अधिक लवचिक बनवू इच्छित असाल, जसे की अभिवादन करायच्या व्यक्तीचे नाव निर्दिष्ट करण्याची परवानगी देणे, तर आपण एक **parameter** जोडू शकतो. पॅरामीटर (कधीकधी **argument** असेही म्हणतात) म्हणजे फंक्शनला पाठवलेली अतिरिक्त माहिती.
|
|
|
|
पॅरामीटर्स परिभाषा भागात कंसात सूचीबद्ध केले जातात आणि ते अल्पविरामाने वेगळे केले जातात:
|
|
|
|
```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 सेकंदांनंतर तुम्हाला संदेश दिसेल **3 सेकंद झाले**.
|
|
|
|
```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` सिंटॅक्स वापरायचे हे तुमच्यावर अवलंबून आहे, परंतु तुम्हाला लक्षात येईल की बहुतेक आधुनिक विकसकांना `=>` अधिक आवडते.
|
|
|
|
---
|
|
|
|
|
|
|
|
## 🚀 आव्हान
|
|
|
|
फंक्शन्स आणि पद्धतींमधील फरक एका वाक्यात स्पष्ट करू शकता का? प्रयत्न करा!
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
Agent मोड वापरून खालील आव्हान पूर्ण करा:
|
|
|
|
**वर्णन:** या शिकवणीत समाविष्ट असलेल्या विविध फंक्शन संकल्पनांचे प्रदर्शन करणारे गणितीय फंक्शन्सचे युटिलिटी लायब्ररी तयार करा, ज्यामध्ये पॅरामीटर्स, डीफॉल्ट मूल्ये, रिटर्न मूल्ये आणि अरो फंक्शन्स समाविष्ट आहेत.
|
|
|
|
**प्रॉम्प्ट:** `mathUtils.js` नावाचा जावास्क्रिप्ट फाइल तयार करा ज्यामध्ये खालील फंक्शन्स असतील:
|
|
1. दोन पॅरामीटर्स घेणारे आणि त्यांची बेरीज परत करणारे `add` फंक्शन
|
|
2. डीफॉल्ट पॅरामीटर मूल्यांसह फंक्शन `multiply` (दुसरा पॅरामीटर डीफॉल्ट 1)
|
|
3. एक अरो फंक्शन `square` जे एक नंबर घेते आणि त्याचा वर्ग परत करते
|
|
4. एक फंक्शन `calculate` जे दुसऱ्या फंक्शनला पॅरामीटर म्हणून स्वीकारते आणि दोन नंबर, नंतर त्या नंबरवर फंक्शन लागू करते
|
|
5. प्रत्येक फंक्शन योग्य चाचणी प्रकरणांसह कॉल करण्याचे प्रदर्शन करा
|
|
|
|
## व्याख्यानोत्तर प्रश्नमंजुषा
|
|
[व्याख्यानोत्तर प्रश्नमंजुषा](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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |