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
21 KiB
210 lines
21 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "92e136090efc4341b1d51c37924c1802",
|
|
"translation_date": "2025-08-28T16:17:45+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "mr"
|
|
}
|
|
-->
|
|
# JavaScript Basics: पद्धती आणि फंक्शन्स
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केले आहे
|
|
|
|
## प्री-लेक्चर क्विझ
|
|
[प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app)
|
|
|
|
कोड लिहिताना, आपला कोड वाचण्यायोग्य असावा याची खात्री करणे नेहमीच महत्त्वाचे असते. हे थोडेसे विरोधाभासी वाटू शकते, परंतु कोड लिहिल्यापेक्षा अनेक वेळा वाचला जातो. **फंक्शन** हे एक मुख्य साधन आहे जे विकसकाच्या टूलबॉक्समध्ये टिकाऊ कोड सुनिश्चित करण्यासाठी वापरले जाते.
|
|
|
|
[](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 कंपाइलर ते शोधेल.
|
|
|
|
```javascript
|
|
// calling our function
|
|
displayGreeting();
|
|
```
|
|
|
|
> **NOTE:** एक विशेष प्रकारचे फंक्शन आहे ज्याला **method** म्हणतात, जे तुम्ही आधीच वापरत आहात! खरं तर, आम्ही वरील डेमोमध्ये `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 value** वापरून करू शकतो. रिटर्न मूल्य फंक्शनद्वारे परत केले जाते आणि आम्ही ते व्हेरिएबलमध्ये स्टोअर करू शकतो जसे की आम्ही स्ट्रिंग किंवा नंबरसारखे स्थिर मूल्य स्टोअर करू शकतो.
|
|
|
|
जर फंक्शन काहीतरी परत करत असेल तर `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);
|
|
```
|
|
|
|
जर तुम्ही आमचा नवीन कोड चालवला तर तुम्हाला तेच परिणाम मिळतील. आम्ही एक फंक्शन तयार केले आहे, परंतु त्याला नाव देण्याची गरज नव्हती!
|
|
|
|
### फॅट अरो फंक्शन्स
|
|
|
|
अनेक प्रोग्रामिंग भाषांमध्ये (JavaScript सह) सामान्य असलेली एक शॉर्टकट क्षमता म्हणजे **arrow** किंवा **fat arrow** फंक्शन वापरण्याची क्षमता. यात `=>` हा विशेष निर्देशक वापरला जातो, जो बाणासारखा दिसतो - म्हणून नाव! `=>` वापरून, आम्ही `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) फायदेशीर ठरू शकते, कारण ते कोड बेसमध्ये अधिकाधिक वापरले जात आहेत. फंक्शन लिहिण्याचा सराव करा आणि नंतर या सिंटॅक्ससह ते पुन्हा लिहा.
|
|
|
|
## असाइनमेंट
|
|
|
|
[Fun with Functions](assignment.md)
|
|
|
|
---
|
|
|
|
**अस्वीकरण**:
|
|
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |