21 KiB

Raw Permalink Blame History

JavaScript Basics: पद्धती आणि फंक्शन्स

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

प्री-लेक्चर क्विझ

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

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

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

फंक्शन्स

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

फंक्शनला नाव देण्याची क्षमता देखील तितकीच महत्त्वाची आहे. हे क्षुल्लक वाटू शकते, परंतु नाव कोडच्या विभागाचे जलद दस्तऐवजीकरण करण्याचा मार्ग प्रदान करते. तुम्ही याचा विचार बटणावर लेबल म्हणून करू शकता. जर मी "Cancel timer" असे लिहिलेले बटण क्लिक केले, तर मला माहित आहे की ते घड्याळ थांबवेल.

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

फंक्शनसाठी सिंटॅक्स खालीलप्रमाणे दिसतो:

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

जर मला अभिवादन प्रदर्शित करण्यासाठी फंक्शन तयार करायचे असेल, तर ते असे दिसेल:

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

जेव्हा आम्हाला आमचे फंक्शन कॉल (किंवा इनव्होक) करायचे असेल, तेव्हा आम्ही फंक्शनचे नाव () सह वापरतो. आमचे फंक्शन कॉल करण्यापूर्वी किंवा नंतर परिभाषित केले जाऊ शकते हे लक्षात घेण्यासारखे आहे; JavaScript कंपाइलर ते शोधेल.

// calling our function
displayGreeting();

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

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

फंक्शन तयार करताना लक्षात ठेवण्यासाठी काही सर्वोत्तम पद्धती आहेत:

नेहमीप्रमाणे, वर्णनात्मक नावे वापरा जेणेकरून तुम्हाला फंक्शन काय करेल हे माहित असेल
शब्द एकत्र करण्यासाठी camelCasing वापरा
तुमचे फंक्शन्स विशिष्ट कार्यावर लक्ष केंद्रित करा

फंक्शनला माहिती पास करणे

फंक्शन अधिक पुनर्वापरयोग्य बनवण्यासाठी तुम्हाला त्यात माहिती पास करायची असते. जर आपण वरील displayGreeting उदाहरण विचारात घेतले, तर ते फक्त Hello, world! प्रदर्शित करेल. हे फारसे उपयुक्त फंक्शन नाही. जर आपण ते थोडे अधिक लवचिक बनवायचे असेल, जसे की अभिवादन करायच्या व्यक्तीचे नाव निर्दिष्ट करण्याची परवानगी देणे, तर आपण parameter जोडू शकतो. पॅरामीटर (कधीकधी argument असेही म्हणतात) म्हणजे फंक्शनला पाठवलेली अतिरिक्त माहिती.

पॅरामीटर्स परिभाषा भागात कंसात सूचीबद्ध केले जातात आणि ते अल्पविरामाने वेगळे असतात:

function name(param, param2, param3) {

}

आम्ही आमच्या displayGreeting ला नाव स्वीकारण्यासाठी अपडेट करू शकतो आणि ते प्रदर्शित करू शकतो.

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

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

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

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

आम्ही आमचे फंक्शन अधिक लवचिक बनवण्यासाठी अधिक पॅरामीटर्स जोडू शकतो. परंतु जर आम्हाला प्रत्येक मूल्य निर्दिष्ट करणे आवश्यक नसेल तर काय करावे? आमच्या अभिवादनाच्या उदाहरणावरून, आम्ही नाव आवश्यक ठेवू शकतो (आपण कोणाला अभिवादन करतो हे माहित असणे आवश्यक आहे), परंतु आम्हाला अभिवादन स्वतः इच्छेनुसार सानुकूलित करण्याची परवानगी द्यायची आहे. जर कोणी ते सानुकूलित करू इच्छित नसेल, तर आम्ही त्याऐवजी डीफॉल्ट मूल्य प्रदान करतो. पॅरामीटरला डीफॉल्ट मूल्य प्रदान करण्यासाठी, आम्ही ते व्हेरिएबलसाठी मूल्य सेट करण्याच्या पद्धतीने सेट करतो - parameterName = 'defaultValue'. संपूर्ण उदाहरण पाहण्यासाठी:

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

जेव्हा आम्ही फंक्शन कॉल करतो, तेव्हा आम्ही salutation साठी मूल्य सेट करायचे आहे की नाही हे ठरवू शकतो.

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

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

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

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

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

जर फंक्शन काहीतरी परत करत असेल तर return कीवर्ड वापरला जातो. return कीवर्ड परत केलेल्या गोष्टीचे मूल्य किंवा संदर्भ अपेक्षित करतो:

return myVariable;

आम्ही अभिवादन संदेश तयार करण्यासाठी फंक्शन तयार करू शकतो आणि कॉल करणाऱ्याला मूल्य परत देऊ शकतो.

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

जेव्हा आम्ही हे फंक्शन कॉल करतो तेव्हा आम्ही मूल्य व्हेरिएबलमध्ये स्टोअर करू. हे स्थिर मूल्य सेट करण्याच्या पद्धतीसारखेच आहे (जसे const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

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

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

उदाहरण म्हणून, setTimeout विचार करा, जे टाइमर सुरू करते आणि पूर्ण झाल्यावर कोड चालवते. आम्हाला त्याला सांगावे लागेल की आम्हाला कोणता कोड चालवायचा आहे. हे फंक्शनसाठी योग्य काम वाटते!

जर तुम्ही खालील कोड चालवला, तर 3 सेकंदानंतर तुम्हाला संदेश दिसेल 3 seconds has elapsed.

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

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

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

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

आमचा कोड अनामिक फंक्शन वापरण्यासाठी पुन्हा लिहूया:

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

जर तुम्ही आमचा नवीन कोड चालवला तर तुम्हाला तेच परिणाम मिळतील. आम्ही एक फंक्शन तयार केले आहे, परंतु त्याला नाव देण्याची गरज नव्हती!

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

अनेक प्रोग्रामिंग भाषांमध्ये (JavaScript सह) सामान्य असलेली एक शॉर्टकट क्षमता म्हणजे arrow किंवा fat arrow फंक्शन वापरण्याची क्षमता. यात => हा विशेष निर्देशक वापरला जातो, जो बाणासारखा दिसतो - म्हणून नाव! => वापरून, आम्ही function कीवर्ड वगळू शकतो.

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

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

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

आता तुम्ही पाहिले आहे की आम्ही फंक्शनला पॅरामीटर म्हणून पास करण्याचे तीन मार्ग आहेत आणि तुम्हाला प्रत्येक कधी वापरायचे याबद्दल आश्चर्य वाटत असेल. जर तुम्हाला माहित असेल की तुम्ही फंक्शन एकापेक्षा जास्त वेळा वापरणार आहात, तर ते सामान्य पद्धतीने तयार करा. जर तुम्ही ते फक्त एका ठिकाणी वापरणार असाल, तर अनामिक फंक्शन वापरणे सामान्यतः सर्वोत्तम असते. तुम्ही फॅट अॅरो फंक्शन वापरता की अधिक पारंपरिक function सिंटॅक्स वापरता हे तुमच्यावर अवलंबून आहे, परंतु तुम्हाला लक्षात येईल की बहुतेक आधुनिक विकसक => ला प्राधान्य देतात.

🚀 आव्हान

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

पोस्ट-लेक्चर क्विझ

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

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

असाइनमेंट

Fun with Functions

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

21 KiB Raw Permalink Blame History