Syntax and benefits of arrow functions In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में एरो फ़ंक्शन ES6 ECMAScript वर्ष 2015 में लांच किया गया मॉडर्न फीचर्स था, एरो फ़ंक्शन जावास्क्रिप्ट प्रोग्रामर को ट्रेडिशनल फ़ंक्शन एक्सप्रेशन प्रैक्टिस की बजाय फ़ंक्शन को क्रिएट करने का एक फ्लेक्सिबल मेथड प्रोवाइड करता हैं। जहा एरो फ़ंक्शन उपयोग के साथ आप this कीवर्ड को मैनेज करने में थोड़ा डिफरेंस हैं।
Syntax of JavaScript arrow function.
एरो फ़ंक्शन => (मोटा तीर) सिंटैक्स का उपयोग कर क्रिएट करे।
Basic syntax of JavaScript arrow function.
const functionName = (parameter1, parameter2, …) => {
/ program code to be executed in arrow function
};
Key points of JavaScript arrow function.
- डिक्लेअर एरो फंक्शन के पैरामीटर के चारों ओर कोष्ठक से इंडीकेट किया जाता है.
- यदि मौजूदा फंक्शन में केवल एक पैरामीटर आर्गुमेंट है, तो कोष्ठक का उपयोग वैकल्पिक हो सकता हैं।
- यदि मौजूदा एरो फंक्शन में कोई पैरामीटर डिक्लेअर नहीं हैं, या एक से अधिक फंक्शन आर्गुमेंट पैरामीटर हैं, तो कोष्ठक का उपयोग करना जरूरी हो जाता हैं।
JavaScript Arrow Function (=>).
=> यह मौजूदा जावास्क्रिप्ट प्रोग्राम में एरो फंक्शन के पैरामीटर को फ़ंक्शन बॉडी से सेपरेट कर डिस्प्ले करता है।
Arrow Function Body.
यदि मौजूदा प्रोग्राम में फ़ंक्शन बॉडी एक एकल एक्सप्रेशन वैल्यू है, तो जावास्क्रिप्ट प्रोग्रामर कर्ली ब्रेसेज़ {} और रिटर्न स्टेटमेंट को उपयोग नहीं कर सकते हैं. जहा, मौजूदा एरो फंक्शन में एक्सप्रेशन अप्रत्यक्ष रूप से रिटर्न किया जाता है।
यदि मौजूदा एरो फ़ंक्शन बॉडी में मल्टीप्ल स्टेटमेंट हैं, तो प्रोग्रामर मौजूदा एरो फंक्शन में कर्ली ब्रेस {} का उपयोग कर सकता है, और यदि प्रोग्रामर मौजूदा फंक्शन में कुछ वैल्यू रिटर्न करना चाहते हैं, तो उसे प्रोग्राम में क्लेअरली आर्डर में return कीवर्ड को क्रिएट करना होगा।
Arrow Function Examples.
Arrow function with one parameter in JavaScript.
const message = info => { // Use of arrow function
console.log(“Welcome to, ” + info + “|”);
};
message(“Vcanhelpsu Edtech platform”); // Result is – Welcome to,Vanhelpsu Edtech platform
Arrow function with one parameter Explanation.
यहाँ एक इन्फो पैरामीटर के चारों ओर कोष्ठक नहीं हैं, क्योंकि इस फंक्शन में केवल एक एरो पैरामीटर है।
JavaScript arrow function with multiple parameters.
const total = (p, q) => {
return p + q;
};
console.log(total(7, 8)); // Result is – 15
JavaScript arrow function with multiple parameters Explanation.
ऊपर दिए गए प्रोग्राम में कोष्ठक जरूरी हैं, क्योंकि इस प्रोग्राम में कई एरो फंक्शन पैरामीटर p और q वैल्यू हैं।
Single expression implicit return arrow function.
const product = (p, q) => p * q;
console.log(product(7, 2)); // Result is -14
Explanation of single expression implicit return arrow function.
यहाँ इस एरो फ़ंक्शन बॉडी में केवल एक ही पैरामीटर एक्सप्रेशन उपयोग किया गया है, इस कारण कर्ली ब्रेसेज़ {} और return कीवर्ड उपयोग नहीं किए गए हैं। जहा इस प्रोग्राम एक्सप्रेशन में p * q के आउटपुट को डिस्प्ले किया जाता है।
Javascript arrow function without parameters.
const displaypmessage = () => {
console.log(“Welcome to, Vcanhelpsu Edtech Platfrom”);
};
displaypmessage(); // Result – Welcome to, Vcanhelpsu Edtech Platfrom
Javascript arrow function without parameters explanation.
जब जावास्क्रिप्ट प्रोग्राम में किसी एरो फंक्शन में कोई पैरामीटर नहीं हैं, तो आप एम्प्टी कोष्ठक () का उपयोग कर सकते हैं।
Javascript arrow function with multiple statements.
const totalvalue = (p, q) => {
let total = p + q;
console.log(“The total is – ” + total);
return total;
};
console.log(totalvalue(7, 9)); // Result is – 16
Explanation of a JavaScript arrow function with multiple statements.
मौजूदा प्रोग्राम में मल्टीप्ल एरो स्टेटमेंट हैं, तो इस प्रोग्राम में कर्ली ब्रेसिज़ का उपयोग जरूरी हैं, और रिटर्न स्टेटमेंट का उपयोग कर वैल्यू को रिटर्न किया गया है।
Advantages of arrow functions in JavaScript programs.
Concise syntax of arrow functions.
एरो फ़ंक्शन, फ़ंक्शन लिखने के लिए एक छोटा और साफ़ सिंटैक्स प्रदान करते हैं, जो विशेष रूप से छोटे, सिंगल-रौ फ़ंक्शन के लिए उपयोगी है।
const square = p => p * p;
JavaScript implicit return keyword.
जब जावास्क्रिप्ट प्रोग्राम फ़ंक्शन में मैन फंक्शन पोरशन सिंगल एक्सप्रेशन से क्रिएटेड होता है, तो उपयोग किया गया एरो फ़ंक्शन प्रोग्रामर को रिटर्न कीवर्ड का उपयोग किए बिना वैल्यू को रिटर्न परमिशन प्रोवाइड करता हैं।
const double = p => p * 4; // Implicit return function
Arrow functions in JavaScript programs have no binding.
जावास्क्रिप्ट में एरो फ़ंक्शन का इम्पोर्टेन्ट एडवांटेज यह है कि एरो फंक्शन का अपना this वैल्यू नहीं होता है। बल्कि, वे इसे लेक्सिकल स्कोप के रूप में आसपास के प्रोग्राम सोर्स कोड वैल्यू रेफ़्रेन्स से इनहेरिट होते हैं। एरो फंक्शन उन्हें प्रोग्राम ऑब्जेक्ट के मध्य या कॉलबैक जैसे प्रोग्राम इवेंट हैंडलर मेथड के लिए के लिए यूज़फुल बनाता है।
JavaScript Arrow Functions (Fix this behavior).
function Tester() {
this.test = 0;
setInterval(() => {
this.test++; // here `this` keyword used to refers the tester object
console.log(this.test);
}, 400);
}
const tester = new Tester();
इस प्रोग्राम में, एरो फ़ंक्शन यह तय करता है कि this टेस्टर ऑब्जेक्ट को रेफ़्रेन्स करता है, जिससे this.test++ प्रॉपर वर्क कर सके।
Less code for callbacks from arrow functions.
जावास्क्रिप्ट प्रोग्राम में एरो फ़ंक्शन कॉलबैक मेथड से फंक्शन प्रोग्रामिंग को आसान करते हैं, क्योंकि प्रोग्रामर इसे क्लियर आर्डर में बाइंड या डिटेल फ़ंक्शन डिक्लेरेशन करने की जरूरत नहीं होती है।
/ Using JavaScript traditional functions.
setTimeout(function() {
console.log(“Display message after 4 seconds”);
}, 4000);
// here use arrow function
setTimeout(() => console.log(“Display message after 4 seconds”), 1000);
When not to use arrow functions in JavaScript programs.
जैसा की जावास्क्रिप्ट प्रोग्राम में एरो फ़ंक्शन के उपयोग के कई एडवांटेज हैं, लेकिन फिर भी कुछ कंडीशन में प्रोग्रामर को इसे यूज़ नहीं करना चाहिए।
array Function Methods inside an object or class.
जावास्क्रिप्ट प्रोग्राम में एरो फ़ंक्शन को ऑब्जेक्ट या क्लास में मेथड्स के रूप में उपयोग नहीं करना चाहिए। क्योंकि उनका अपना this कीवर्ड नहीं होता। लेकिन आप एरो फ़ंक्शन को मेथड के रूप में उपयोग कर सकते हैं, जहा मौजूदा फंक्शन में this कीवर्ड के आस-पास के लेक्सिकल स्कोप पैरामीटर वैल्यू को रेफ़्रेन्स करता है, न कि स्वयं अपने ऑब्जेक्ट को।
const company = {
name: “Vcanhelpsu”,
message: () => {
console.log(“Vcanhelpsu, ” + this.name); // here `this` is not referring to the company object
}
};
company.message(); // here `this.name` value is not define
When you need an argument object in an arrow function.
याद रहे, जावास्क्रिप्ट प्रोग्राम में एरो फ़ंक्शन का अपना कोई आर्गुमेंट ऑब्जेक्ट वैल्यू नहीं होता है, जिसका उपयोग किसी प्रोग्राम में पास किए गए वेरिएबल आर्गुमेंट पैरामीटर को एक्सेस करने में किया जाता है। यदि प्रोग्रामर को पैरामीटर आर्गुमेंट एक्सेस की जरूरत है, तो प्रोग्रामर एक ट्रेडिशनल जावास्क्रिप्ट फ़ंक्शन का उपयोग कर सकते है।
const total = () => {
console.log(arguments); // here `arguments` will be undefined nature
};
total(2, 7, 9);
Whereas you, here the programmer has to use a traditional function.
function total() {
console.log(arguments); // now it works correctly
}
total(7, 9, 8);
Arrow Function Benefits and Summary
| Benefit of arrow function | Description of arrow function |
| Concise function syntax | Javascript program Arrow functions use to provide a shorter, cleaner way to write desire functions. |
| No need Implicit return | With arrow function used In single-expression program functions, you no need to use the return keyword statement. |
| Use Lexical this approach | In some program condition Arrow functions inherit this from their surrounding program source code context, and avoiding issues in callbacks and event handlers methods. |
| Easier callbacks function callbacks | Javascript program with Arrow functions make it easier to write and use callbacks without binding this methods. |
| No arguments object | Most of time Arrow functions do not have their own arguments object (use traditional functions when you need it) and manage its all attributes. |
Conclusion of Arrow Function in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में एरो फ़ंक्शन एक मॉडर्न प्रोग्रामिंग फीचर्स है, जो जावास्क्रिप्ट प्रोग्रामर को फ़ंक्शन क्रिएट करने के लिए अधिक डिटेल और फंक्शनल सिंटैक्स प्रोवाइड करता है। एरो फंशन स्पैशली रूप से पर्टिकुलर कंडीशन में उपयोगी होते हैं. जहाँ प्रोग्रामर को फंक्शन कॉलबैक या फ़ंक्शन को इस तरह से मैनेज करने की जरूरत होती है। लेकिन, जावास्क्रिप्ट प्रोग्राम में ऑब्जेक्ट मेथड्स में या जब आपको आर्गुमेंट ऑब्जेक्ट का उपयोग की जरूरत हो, तो एरो फंक्शन का उपयोग नहीं करना चाहिए।
