यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें शामिल करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'टूल ऑफ़ ट्रेड' सेक्शन में, आप उपयोगी सॉफ़्टवेयर के बारे में जानेंगे जो आपको डेवलपर के रूप में मदद करता है।
यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें शामिल करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'टूल ऑफ़ ट्रेड' सेक्शन में, आप उपयोगी सॉफ़्टवेयर के बारे में जानेंगे जो आपको डेवलपर के रूप में मदद करता है।
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह काउंटरटाइनेटिव लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
> Click the image above for a video about methods and functions.
> मेथड्स एंड फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
## Functions
## फ़ंक्शंस
At its core, a function is a block of code we can execute on demand. This is perfect for scenarios where we need to perform the same task multiple times; rather than duplicating the logic in multiple locations (which would make it hard to update when the time comes), we can centralize it in one location, and call it whenever we need the operation performed - you can even call functions from other functions!.
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य कार्यों से भी कॉल कर सकते हैं!
Just as important is the ability to name a function. While this might seem trivial, the name provides a quick way of documenting a section of code. You could think of this as a label on a button. If I click on a button which reads "Cancel timer", I know it's going to stop running the clock.
बस के रूप में महत्वपूर्ण एक समारोह का नाम करने की क्षमता है। हालांकि यह तुच्छ प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर को रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
## Creating and calling a function
## फंक्शन बनाना और कॉल करना
The syntax for a function looks like the following:
किसी फ़ंक्शन का सिंटैक्स निम्न जैसा दिखता है:
```javascript
```javascript
function nameOfFunction() { // function definition
function nameOfFunction() { // function definition
@ -29,7 +29,7 @@ function nameOfFunction() { // function definition
}
}
```
```
If I wanted to create a function to display a greeting, it might look like this:
अगर मैं ग्रीटिंग प्रदर्शित करने के लिए कोई फ़ंक्शन बनाना चाहता हूं, तो यह इस तरह दिख सकता है:
```javascript
```javascript
function displayGreeting() {
function displayGreeting() {
@ -37,28 +37,28 @@ function displayGreeting() {
}
}
```
```
Whenever we want to call (or invoke) our function, we use the name of the function followed by `()`. It's worth noting the fact our function can be defined before or after we decide to call it; the JavaScript compiler will find it for you.
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम `()` के बाद फ़ंक्शन के नाम का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
```javascript
```javascript
// calling our function
// calling our function
displayGreeting();
displayGreeting();
```
```
> **NOTE:** There is a special type of function known as a **method**, which you've already been using! In fact, we saw this in our demo above when we used `console.log`. What makes a method different from a function is a method is attached to an object (`console` in our example), while a function is free floating. You will hear many developers use these terms interchangeably.
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **method** के रूप में जाना जाता है, जिसे आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। किसी कार्य को किसी फ़ंक्शन से अलग करने वाली विधि एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री फ़्लोटिंग है। आपने सुना होगा कई डेवलपर्स इन शब्दों का इस्तेमाल परस्पर करते हैं।
### Function best practices
### सर्वोत्तम फ़ंक्शन प्रथाएं
There are a handful of best practices to keep in mind when creating functions
फ़ंक्शन का निर्माण करते समय ध्यान में रखने के लिए सर्वोत्तम अभ्यास हैं
- As always, use descriptive names so you know what the function will do
- हमेशा की तरह, वर्णनात्मक नामों का उपयोग करें ताकि आप जान सकें कि फ़ंक्शन क्या करेगा
- Use **camelCasing** to combine words
- शब्दों को संयोजित करने के लिए **camelCasing** का उपयोग करें
- Keep your functions focused on a specific task
- अपने कार्यों को किसी विशिष्ट कार्य पर केंद्रित रखें
## Passing information to a function
## किसी फ़ंक्शन के लिए जानकारी पास करना
To make a function more reusable you'll often want to pass information into it. If we consider our `displayGreeting` example above, it will only display **Hello, world!**. Not the most useful function one could create. If we want to make it a little more flexible, like allowing someone to specify the name of the person to greet, we can add a **parameter**. A parameter (also sometimes called an **argument**), is additional information sent to a function.
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello,world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
Parameters are listed in the definition part within parenthesis and are comma separated like so:
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया गया है और अल्पविराम को अलग किया जाता है:
```javascript
```javascript
function name(param, param2, param3) {
function name(param, param2, param3) {
@ -66,7 +66,7 @@ function name(param, param2, param3) {
}
}
```
```
We can update our `displayGreeting` to accept a name and have that displayed.
हम एक नाम को स्वीकार करने के लिए अपने `displayGreeting` को अपडेट कर सकते हैं और उसे प्रदर्शित कर सकते हैं।
```javascript
```javascript
function displayGreeting(name) {
function displayGreeting(name) {
@ -75,16 +75,16 @@ function displayGreeting(name) {
}
}
```
```
When we want to call our function and pass in the parameter, we specify it in the parenthesis.
जब हम अपने फ़ंक्शन को कॉल करना चाहते हैं और पैरामीटर में पास करते हैं, तो हम इसे कोष्ठक में निर्दिष्ट करते हैं।
```javascript
```javascript
displayGreeting('Christopher');
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
// displays "Hello, Christopher!" when run
```
```
## Default values
## डिफॉल्ट मान
We can make our function even more flexible by adding more parameters. But what if we don't want to require every value be specified? Keeping with our greeting example, we could leave name as required (we need to know who we're greeting), but we want to allow the greeting itself to be customized as desired. If someone doesn't want to customize it, we provide a default value instead. To provide a default value to a parameter, we set it much in the same way we set a value for a variable - `parameterName = 'defaultValue'`. To see a full example:
हम अधिक मापदंडों को जोड़कर अपने कार्य को और अधिक लचीला बना सकते हैं। लेकिन क्या होगा अगर हम हर मूल्य को निर्दिष्ट करने की आवश्यकता नहीं चाहते हैं? अपने ग्रीटिंग उदाहरण के साथ रखते हुए, हम आवश्यकता के अनुसार नाम छोड़ सकते हैं (हमें यह जानना होगा कि हम किसका अभिवादन कर रहे हैं), लेकिन हम चाहते हैं कि ग्रीटिंग को वांछित रूप में अनुकूलित किया जाए। यदि कोई इसे अनुकूलित नहीं करना चाहता है, तो हम इसके बजाय एक डिफ़ॉल्ट मान प्रदान करते हैं। एक पैरामीटर को एक डिफ़ॉल्ट मान प्रदान करने के लिए, हम इसे उसी तरह से सेट करते हैं जिस तरह से हम एक चर के लिए मान सेट करते हैं - `parameterName = 'defaultValue'`। एक पूर्ण उदाहरण देखने के लिए:
```javascript
```javascript
function displayGreeting(name, salutation='Hello') {
function displayGreeting(name, salutation='Hello') {
@ -92,7 +92,7 @@ function displayGreeting(name, salutation='Hello') {
}
}
```
```
When we call the function, we can then decide if we want to set a value for `salutation`.
जब हम फ़ंक्शन को कॉल करते हैं, तो हम यह तय कर सकते हैं कि क्या हम `सैल्यूटेशन` के लिए कोई मूल्य निर्धारित करना चाहते हैं।
Up until now the function we built will always output to the [console](https://developer.mozilla.org/en-US/docs/Web/API/console). Sometimes this can be exactly what we're looking for, especially when we create functions which will be calling other services. But what if I want to create a helper function to perform a calculation and provide the value back so I can use it elsewhere?
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/en-US/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
We can do this by using a **return value**. A return value is returned by the function, and can be stored in a variable just the same as we could store a literal value such as a string or number.
हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं।
If a function does return something then the keyword `return` is used. The `return` keyword expects a value or reference of what's being returned like so:
यदि कोई फ़ंक्शन कुछ वापस करता है तो कीवर्ड `return` का उपयोग किया जाता है। `return` कीवर्ड को इस तरह से लौटाए जाने के मूल्य या संदर्भ की उम्मीद है:
```javascript
```javascript
return myVariable;
return myVariable;
```
```
We could create a function to create a greeting message and return the value back to the caller
हम एक बधाई संदेश बनाने के लिए एक फ़ंक्शन बना सकते हैं और कॉलर को वापस मान दे सकते हैं
```javascript
```javascript
function createGreetingMessage(name) {
function createGreetingMessage(name) {
@ -123,19 +123,19 @@ function createGreetingMessage(name) {
}
}
```
```
When calling this function we'll store the value in a variable. This is much the same way we'd set a variable to a static value (like `const name = 'Christopher'`).
इस फ़ंक्शन को कॉल करते समय हम एक वैरिएबल में मान संग्रहीत करेंगे। यह उसी तरह है जैसे हम एक वैरिएबल को स्थिर मान (जैसे `const name ='Christopher'`) में सेट करते हैं।
As you progress in your programming career, you will come across functions which accept functions as parameters. This neat trick is commonly used when we don't know when something is going to occur or complete, but we know we need to perform an operation in response.
जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है।
As an example, consider [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), which begins a timer and will execute code when it completes. We need to tell it what code we want to execute. Sounds like a perfect job for a function!
एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
If you run the code below, after 3 seconds you'll see the message **3 seconds has elapsed**.
यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है।
```javascript
```javascript
function displayDone() {
function displayDone() {
@ -145,13 +145,13 @@ function displayDone() {
setTimeout(displayDone, 3000);
setTimeout(displayDone, 3000);
```
```
### Anonymous functions
### अनाम फंक्शन्स
Let's take another look at what we've built. We're creating a function with a name which will be used one time. As our application gets more complex, we can see ourselves creating a lot of functions which will only be called once. This isn't ideal. As it turns out, we don't always need to provide a name!
आइए एक और नज़र डालें कि हमने क्या बनाया है। हम एक नाम के साथ एक फ़ंक्शन बना रहे हैं जिसका उपयोग एक बार किया जाएगा। जैसे-जैसे हमारा आवेदन अधिक जटिल होता जाता है, हम स्वयं को बहुत सारे कार्य बनाते हुए देख सकते हैं, जिसे केवल एक बार ही कहा जाएगा। यह आदर्श नहीं है। जैसा कि यह पता चला है, हमें हमेशा एक नाम प्रदान करने की आवश्यकता नहीं है!
When we are passing a function as a parameter we can bypass creating one in advance and instead build one as part of the parameter. We use the same `function` keyword, but instead we build it as a parameter.
जब हम एक फ़ंक्शन को एक पैरामीटर के रूप में पारित कर रहे हैं, तो हम पहले से एक बनाने के लिए बाईपास कर सकते हैं और इसके बजाय एक पैरामीटर के हिस्से के रूप में निर्माण कर सकते हैं। हम उसी `function` कीवर्ड का उपयोग करते हैं, लेकिन इसके बजाय हम इसे एक पैरामीटर के रूप में बनाते हैं।
Let's rewrite the code above to use an anonymous function:
अनाम फ़ंक्शन का उपयोग करने के लिए ऊपर दिए गए कोड को फिर से लिखें:
```javascript
```javascript
setTimeout(function() {
setTimeout(function() {
@ -159,13 +159,13 @@ setTimeout(function() {
}, 3000);
}, 3000);
```
```
If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name!
यदि आप हमारा नया कोड चलाते हैं, तो आपको वही परिणाम मिलेंगे। हमने एक फ़ंक्शन बनाया है, लेकिन इसे कोई नाम नहीं देना है!
### Fat arrow functions
### फैट एरो फंक्शन्स
One shortcut common in a lot of programming languages (including JavaScript) is the ability to use what's called an **arrow** or **fat arrow** function. It uses a special indicator of `=>`, which looks like an arrow - thus the name! By using `=>`, we are able to skip the `function` keyword.
बहुत सारी प्रोग्रामिंग भाषाओं में एक शॉर्टकट (जावास्क्रिप्ट सहित) एक का उपयोग करने की क्षमता है जिसे **एरो** या **फैट एरो** फ़ंक्शन कहा जाता है। यह `=>` के एक विशेष संकेतक का उपयोग करता है, जो एक तीर की तरह दिखता है - इस प्रकार नाम! `=>` का उपयोग करके, हम `function` कीवर्ड को छोड़ सकते हैं।
Let's rewrite our code one more time to use a fat arrow function:
चलो एक फैट एरो फंक्शन्स का उपयोग करने के लिए हमारे कोड को एक बार फिर से लिखें:
```javascript
```javascript
setTimeout(() => {
setTimeout(() => {
@ -173,23 +173,23 @@ setTimeout(() => {
}, 3000);
}, 3000);
```
```
### When to use each strategy
### प्रत्येक रणनीति का उपयोग कब करें
You've now seen we have three ways to pass a function as a parameter and might be wondering when to use each. If you know you'll be using the function more than once, create it as normal. If you'll be using it for just the one location, it's generally best to use an anonymous function. Whether or not you use a fat arrow function or the more traditional `function` syntax is up to you, but you will notice most modern developers prefer `=>`.
अब आपने देखा है कि हमारे पास फंक्शन को एक पैरामीटर के रूप में पास करने के तीन तरीके हैं और प्रत्येक का उपयोग करते समय सोच सकते हैं। यदि आप जानते हैं कि आप एक से अधिक बार फ़ंक्शन का उपयोग कर रहे हैं, तो इसे सामान्य रूप से बनाएं। यदि आप इसे केवल एक स्थान के लिए उपयोग कर रहे हैं, तो यह आमतौर पर एक अनाम फ़ंक्शन का उपयोग करने के लिए सबसे अच्छा है।आप फैट एरो फंक्शन्स या अधिक पारंपरिक `फ़ंक्शन` सिंटैक्स का उपयोग करते हैं या नहीं, आप पर निर्भर है, लेकिन आप देखेंगे कि अधिकांश आधुनिक डेवलपर्स` => `पसंद करते हैं।
---
---
## 🚀 Challenge
## 🚀 चुनौती
Can you articulate in one sentence the difference between functions and methods? Give it a try!
क्या आप एक वाक्य में कार्यों और विधियों के बीच के अंतर को स्पष्ट कर सकते हैं? कोशिश तो करो!
It's worth [reading up a little more on arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), as they are increasingly used in code bases. Practice writing a function, and then rewriting it with this syntax.
यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
Sanjay
4 years ago