Web-Dev-For-Beginners/translations/mr/2-js-basics/2-functions-methods/README.md

JavaScript मूलभूत गोष्टी: पद्धती आणि फंक्शन्स

स्केच नोट Tomomi Imura यांच्याकडून

व्याख्यानपूर्व प्रश्नमंजुषा

व्याख्यानपूर्व प्रश्नमंजुषा

सतत एकच कोड पुन्हा पुन्हा लिहिणे हे प्रोग्रामिंगमधील सर्वात सामान्य त्रासांपैकी एक आहे. फंक्शन्स या समस्येचे निराकरण करतात कारण ते कोड पुनर्वापर करण्यायोग्य ब्लॉक्समध्ये पॅकेज करण्याची परवानगी देतात. फंक्शन्स म्हणजे हेन्री फोर्डच्या असेंब्ली लाइनला क्रांतिकारक बनवणाऱ्या प्रमाणित भागांसारखे आहेत – एकदा तुम्ही विश्वासार्ह घटक तयार केला की, तुम्ही तो पुन्हा तयार न करता आवश्यकतेनुसार वापरू शकता.

फंक्शन्स तुम्हाला कोडचे तुकडे एकत्र करण्याची परवानगी देतात जेणेकरून तुम्ही ते तुमच्या प्रोग्राममध्ये पुन्हा वापरू शकता. एकाच लॉजिकची कॉपी-पेस्ट करण्याऐवजी, तुम्ही एकदा फंक्शन तयार करू शकता आणि आवश्यकतेनुसार ते कॉल करू शकता. ही पद्धत तुमचा कोड व्यवस्थित ठेवते आणि अपडेट्स खूप सोपे बनवते.

या धड्यात, तुम्ही स्वतःचे फंक्शन्स कसे तयार करायचे, त्यांना माहिती कशी द्यायची आणि उपयुक्त परिणाम कसे मिळवायचे हे शिकाल. तुम्ही फंक्शन्स आणि पद्धतींमधील फरक शोधाल, आधुनिक सिंटॅक्स पद्धती शिकाल आणि फंक्शन्स इतर फंक्शन्ससह कसे कार्य करू शकतात हे पाहाल. आपण हे संकल्पना टप्प्याटप्प्याने तयार करू.

🎥 वरील प्रतिमेवर क्लिक करा पद्धती आणि फंक्शन्सबद्दल व्हिडिओसाठी.

तुम्ही Microsoft Learn वर हा धडा घेऊ शकता!

फंक्शन्स

फंक्शन म्हणजे विशिष्ट कार्य करणारा स्वयंपूर्ण कोड ब्लॉक. हे लॉजिक समाविष्ट करते जे तुम्हाला आवश्यक असताना अंमलात आणता येते.

तुमच्या प्रोग्राममध्ये एकच कोड अनेक वेळा लिहिण्याऐवजी, तुम्ही तो फंक्शनमध्ये पॅकेज करू शकता आणि तुम्हाला आवश्यक असताना ते फंक्शन कॉल करू शकता. ही पद्धत तुमचा कोड स्वच्छ ठेवते आणि अपडेट्स खूप सोपे बनवते. विचार करा की तुम्हाला तुमच्या कोडबेसमधील 20 वेगवेगळ्या ठिकाणी विखुरलेले लॉजिक बदलायचे असल्यास देखभाल करणे किती आव्हानात्मक होईल.

तुमच्या फंक्शन्सचे वर्णनात्मक नाव देणे आवश्यक आहे. चांगल्या नावाचा फंक्शन त्याचा हेतू स्पष्टपणे सांगतो – जेव्हा तुम्ही cancelTimer() पाहता, तेव्हा तुम्हाला लगेच समजते की ते काय करते, जसे की स्पष्टपणे लेबल असलेले बटण तुम्हाला सांगते की तुम्ही त्यावर क्लिक केल्यावर काय होईल.

फंक्शन तयार करणे आणि कॉल करणे

फंक्शन कसे तयार करायचे ते पाहूया. सिंटॅक्स एकसंध पद्धतीचे अनुसरण करते:

function nameOfFunction() { // function definition
 // function definition/body
}

याचे विश्लेषण करूया:

• function कीवर्ड JavaScript ला सांगतो "अरे, मी एक फंक्शन तयार करत आहे!"
• nameOfFunction येथे तुम्ही तुमच्या फंक्शनला वर्णनात्मक नाव देता
• कंस () येथे तुम्ही पॅरामीटर्स जोडू शकता (आम्ही लवकरच त्यावर येऊ)
• कर्ली ब्रेसेस {} मध्ये प्रत्यक्ष कोड असतो जो तुम्ही फंक्शन कॉल केल्यावर चालतो

चला एक साधे ग्रीटिंग फंक्शन तयार करूया आणि हे कृतीत पाहूया:

function displayGreeting() {
  console.log('Hello, world!');
}

हे फंक्शन "Hello, world!" कन्सोलवर प्रिंट करते. एकदा तुम्ही ते परिभाषित केले की, तुम्ही ते आवश्यकतेनुसार कितीही वेळा वापरू शकता.

तुमचे फंक्शन अंमलात आणण्यासाठी (किंवा "कॉल" करण्यासाठी), त्याचे नाव कंसासह लिहा. JavaScript तुम्हाला तुमचे फंक्शन कॉल करण्यापूर्वी किंवा नंतर परिभाषित करण्याची परवानगी देते – JavaScript इंजिन अंमलबजावणी क्रम हाताळेल.

// calling our function
displayGreeting();

जेव्हा तुम्ही ही ओळ चालवता, तेव्हा तुमच्या displayGreeting फंक्शनमधील सर्व कोड अंमलात आणते, "Hello, world!" तुमच्या ब्राउझरच्या कन्सोलमध्ये प्रदर्शित करते. तुम्ही हे फंक्शन वारंवार कॉल करू शकता.

टीप: तुम्ही या धड्यांमध्ये पद्धती वापरत आहात. console.log() ही एक पद्धत आहे – मूलत: console ऑब्जेक्टशी संबंधित फंक्शन. मुख्य फरक असा आहे की पद्धती ऑब्जेक्ट्सशी जोडलेल्या असतात, तर फंक्शन्स स्वतंत्रपणे उभे असतात. अनेक डेव्हलपर्स अनौपचारिक संभाषणात हे शब्द परस्पर बदलून वापरतात.

फंक्शनसाठी सर्वोत्तम पद्धती

उत्तम फंक्शन्स लिहिण्यासाठी काही टिप्स येथे आहेत:

• तुमच्या फंक्शन्सना स्पष्ट, वर्णनात्मक नावे द्या – तुमचे भविष्याचे स्वतः तुम्हाला धन्यवाद देतील!
• camelCasing चा वापर करा बहु-शब्द नावांसाठी (उदा. calculateTotal ऐवजी calculate_total)
• प्रत्येक फंक्शन एकाच गोष्टीवर लक्ष केंद्रित करून चांगले करण्यासाठी ठेवा

फंक्शनला माहिती देणे

आपले displayGreeting फंक्शन मर्यादित आहे – ते प्रत्येकासाठी "Hello, world!" प्रदर्शित करू शकते. पॅरामीटर्स आम्हाला फंक्शन्स अधिक लवचिक आणि उपयुक्त बनवण्याची परवानगी देतात.

पॅरामीटर्स प्लेसहोल्डर्ससारखे कार्य करतात जिथे तुम्ही प्रत्येक वेळी फंक्शन वापरता तेव्हा वेगवेगळ्या मूल्ये घालू शकता. अशा प्रकारे, एकच फंक्शन प्रत्येक कॉलवर वेगवेगळ्या माहितीवर कार्य करू शकते.

तुम्ही तुमचे फंक्शन परिभाषित करताना कंसामध्ये पॅरामीटर्स सूचीबद्ध करता, एकाधिक पॅरामीटर्स अल्पविरामाने वेगळे करता:

function name(param, param2, param3) {

}

प्रत्येक पॅरामीटर प्लेसहोल्डरप्रमाणे कार्य करते – जेव्हा कोणी तुमचे फंक्शन कॉल करतो, तेव्हा ते प्रत्यक्ष मूल्ये प्रदान करतात जी या ठिकाणी प्लग केली जातात.

चला आपले ग्रीटिंग फंक्शन अपडेट करूया जेणेकरून ते कोणाचे नाव स्वीकारू शकेल:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

लक्षात घ्या की आम्ही बॅकटिक्स (`) आणि ${} वापरत आहोत जेणेकरून नाव थेट आमच्या संदेशात घालता येईल – याला टेम्पलेट लिटरल म्हणतात आणि व्हेरिएबल्स मिसळून स्ट्रिंग तयार करण्याचा हा खूप उपयुक्त मार्ग आहे.

आता जेव्हा आम्ही आमचे फंक्शन कॉल करतो, तेव्हा आम्ही कोणतेही नाव पास करू शकतो:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript स्ट्रिंग 'Christopher' घेते, ते name पॅरामीटरला असाइन करते आणि वैयक्तिकृत संदेश तयार करते "Hello, Christopher!"

डीफॉल्ट मूल्ये

आपण काही पॅरामीटर्स वैकल्पिक बनवू इच्छित असल्यास काय? तेथे डीफॉल्ट मूल्ये उपयुक्त ठरतात!

म्हणून म्हणायचे आहे की लोकांना ग्रीटिंग शब्द सानुकूलित करण्याची परवानगी द्यायची आहे, परंतु जर त्यांनी एक निर्दिष्ट केला नाही, तर आम्ही फक्त "Hello" वापरू. तुम्ही डीफॉल्ट मूल्ये सेट करू शकता ज्याप्रमाणे व्हेरिएबल सेट करतो:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

येथे, name आवश्यक आहे, परंतु salutation ला 'Hello' चा बॅकअप मूल्य आहे जर कोणी वेगळे ग्रीटिंग प्रदान केले नाही.

आता आम्ही हे फंक्शन दोन वेगवेगळ्या प्रकारे कॉल करू शकतो:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

पहिल्या कॉलमध्ये, JavaScript डीफॉल्ट "Hello" वापरते कारण आम्ही सल्यूटेशन निर्दिष्ट केले नाही. दुसऱ्या कॉलमध्ये, ते आमचे सानुकूल "Hi" वापरते. ही लवचिकता फंक्शन्सला विविध परिस्थितींशी जुळवून घेण्यास सक्षम करते.

रिटर्न मूल्ये

आमचे फंक्शन्स आतापर्यंत फक्त कन्सोलवर संदेश प्रिंट करत आहेत, परंतु तुम्हाला काहीतरी गणना करायचे असेल आणि तुम्हाला त्याचा परिणाम परत हवा असेल तर काय?

तेथे रिटर्न मूल्ये उपयोगी ठरतात. काहीतरी फक्त प्रदर्शित करण्याऐवजी, फंक्शन तुम्हाला एक मूल्य परत देऊ शकते जे तुम्ही व्हेरिएबलमध्ये संग्रहित करू शकता किंवा तुमच्या कोडच्या इतर भागांमध्ये वापरू शकता.

मूल्य परत पाठवण्यासाठी, तुम्ही return कीवर्ड वापरता आणि त्यानंतर तुम्हाला जे परत करायचे आहे ते लिहा:

return myVariable;

येथे एक महत्त्वाची गोष्ट आहे: जेव्हा फंक्शन return स्टेटमेंटवर पोहोचते, तेव्हा ते त्वरित चालणे थांबवते आणि ते मूल्य परत पाठवते ज्याने ते कॉल केले आहे.

चला आपले ग्रीटिंग फंक्शन बदलूया जेणेकरून ते संदेश परत देईल आणि प्रिंट करणार नाही:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

आता ग्रीटिंग प्रिंट करण्याऐवजी, हे फंक्शन संदेश तयार करते आणि तो आम्हाला परत देते.

परत दिलेले मूल्य वापरण्यासाठी, आम्ही ते इतर कोणत्याही मूल्याप्रमाणे व्हेरिएबलमध्ये संग्रहित करू शकतो:

const greetingMessage = createGreetingMessage('Christopher');

आता greetingMessage मध्ये "Hello, Christopher" आहे आणि आम्ही ते आमच्या कोडमध्ये कुठेही वापरू शकतो – वेबपेजवर प्रदर्शित करण्यासाठी, ईमेलमध्ये समाविष्ट करण्यासाठी किंवा दुसऱ्या फंक्शनला पास करण्यासाठी.

फंक्शन्स फंक्शन्ससाठी पॅरामीटर्स म्हणून

फंक्शन्स इतर फंक्शन्ससाठी पॅरामीटर्स म्हणून पास केले जाऊ शकतात. सुरुवातीला ही संकल्पना क्लिष्ट वाटू शकते, परंतु हे एक शक्तिशाली वैशिष्ट्य आहे जे लवचिक प्रोग्रामिंग पद्धती सक्षम करते.

हा नमुना खूप सामान्य आहे जेव्हा तुम्हाला म्हणायचे असते "जेव्हा काहीतरी घडते, तेव्हा हे दुसरे काहीतरी करा." उदाहरणार्थ, "जेव्हा टाइमर संपतो, तेव्हा हा कोड चालवा" किंवा "जेव्हा वापरकर्ता बटण क्लिक करतो, तेव्हा हे फंक्शन कॉल करा."

चला setTimeout पाहूया, जे एक बिल्ट-इन फंक्शन आहे जे काही वेळ थांबते आणि नंतर काही कोड चालवते. आम्हाला ते कोणता कोड चालवायचा आहे ते सांगावे लागेल – फंक्शन पास करण्यासाठी योग्य केस!

हा कोड वापरून पहा – 3 सेकंदांनंतर तुम्हाला एक संदेश दिसेल:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

लक्षात घ्या की आम्ही displayDone (कंसाशिवाय) setTimeout ला पास करतो. आम्ही स्वतः फंक्शन कॉल करत नाही – आम्ही ते setTimeout ला देत आहोत आणि म्हणत आहोत "हे 3 सेकंदात कॉल करा."

अनामिक फंक्शन्स

कधी कधी तुम्हाला फक्त एका गोष्टीसाठी फंक्शनची आवश्यकता असते आणि त्याला नाव देण्याची इच्छा नसते. विचार करा – जर तुम्ही फक्त एकदा फंक्शन वापरत असाल, तर अतिरिक्त नावाने तुमचा कोड का भरावा?

JavaScript तुम्हाला अनामिक फंक्शन्स तयार करण्याची परवानगी देते – नाव नसलेले फंक्शन्स जे तुम्ही जिथे आवश्यक आहे तिथे परिभाषित करू शकता.

आमच्या टाइमर उदाहरणाला अनामिक फंक्शन वापरून पुन्हा लिहिण्यासाठी येथे आहे:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

हे समान परिणाम साध्य करते, परंतु फंक्शन थेट setTimeout कॉलमध्ये परिभाषित केले जाते, स्वतंत्र फंक्शन घोषणेसाठी गरज दूर करते.

फॅट अ‍ॅरो फंक्शन्स

आधुनिक JavaScript मध्ये फंक्शन्स लिहिण्याचा आणखी एक लहान मार्ग आहे ज्याला अ‍ॅरो फंक्शन्स म्हणतात. ते => वापरतात (जे बाणासारखे दिसते – समजले?) आणि डेव्हलपर्समध्ये खूप लोकप्रिय आहेत.

अ‍ॅरो फंक्शन्स तुम्हाला function कीवर्ड वगळण्याची आणि अधिक संक्षिप्त कोड लिहिण्याची परवानगी देतात.

आमच्या टाइमर उदाहरणाला अ‍ॅरो फंक्शन वापरून पुन्हा लिहिण्यासाठी येथे आहे:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() येथे पॅरामीटर्स जातील (या प्रकरणात रिक्त), नंतर बाण => येतो आणि शेवटी कर्ली ब्रेसेसमध्ये फंक्शन बॉडी. हे समान कार्यक्षमता अधिक संक्षिप्त सिंटॅक्ससह प्रदान करते.

प्रत्येक रणनीती कधी वापरायची

प्रत्येक दृष्टिकोन कधी वापरायचा? एक व्यावहारिक मार्गदर्शक: जर तुम्ही फंक्शन अनेक वेळा वापरणार असाल, तर त्याला नाव द्या आणि वेगळे परिभाषित करा. जर ते एका विशिष्ट वापरासाठी असेल, तर अनामिक फंक्शन विचारात घ्या. अ‍ॅरो फंक्शन्स आणि पारंपरिक सिंटॅक्स दोन्ही वैध पर्याय आहेत, जरी अ‍ॅरो फंक्शन्स आधुनिक JavaScript कोडबेसमध्ये प्रचलित आहेत.

---

🚀 आव्हान

फंक्शन्स आणि पद्धतींमधील फरक एका वाक्यात सांगू शकता का? प्रयत्न करा!

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: या धड्यात कव्हर केलेल्या विविध फंक्शन संकल्पनांचे प्रदर्शन करणारे गणितीय फंक्शन्सचे युटिलिटी लायब्ररी तयार करा, ज्यामध्ये पॅरामीटर्स, डीफॉल्ट मूल्ये, रिटर्न मूल्ये आणि अ‍ॅरो फंक्शन्स समाविष्ट आहेत.

प्रॉम्प्ट: mathUtils.js नावाचा JavaScript फाइल तयार करा ज्यामध्ये खालील फंक्शन्स असतील:

1. दोन पॅरामीटर्स घेणारे आणि त्यांची बेरीज परत करणारे add फंक्शन
2. डीफॉल्ट पॅरामीटर मूल्यांसह multiply फंक्शन (दुसरा पॅरामीटर डीफॉल्ट 1)
3. एक अ‍ॅरो फंक्शन square जे एक संख्या घेते आणि तिचा वर्ग परत करते
4. एक फंक्शन calculate जे दुसऱ्या फंक्शनला पॅरामीटर म्हणून स्वीकारते आणि दोन संख्या, नंतर त्या संख्यांवर फंक्शन लागू करते
5. प्रत्येक फंक्शन योग्य चाचणी प्रकरणांसह कॉल करणे प्रदर्शित करा

agent mode बद्दल अधिक जाणून घ्या.

व्याख्यानोत्तर प्रश्नमंजुषा

व्याख्यानोत्तर प्रश्नमंजुषा

पुनरावलोकन आणि स्व-अभ्यास

अ‍ॅरो फंक्शन्सबद्दल थोडे अधिक वाचणे फायदेशीर आहे, कारण ते कोड बेसमध्ये वाढत्या प्रमाणात वापरले जात आहेत. फंक्शन लिहिण्याचा सराव करा आणि नंतर या सिंटॅक्ससह ते पुन्हा लिहा.

असाइनमेंट

Fun with Functions

---

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावासह असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.