S06L04 - एरो फंक्शन्स

html


JavaScript में एरो फंक्शन्स में महारत हासिल करना: एक व्यापक मार्गदर्शिका
विषय सूची

परिचय ............................................................ 1
एरो फंक्शन्स को समझना .................... 3

2.1 एरो फंक्शन्स क्या हैं? ..................... 3
2.2 एरो फंक्शन्स का उपयोग करने के लाभ ...... 4>


पारंपरिक फंक्शन्स को एरो फंक्शन्स में परिवर्तित करना ............................................................... 6

3.1 मूलभूत परिवर्तन ............................................. 6
3.2 सिंटैक्स को सरल बनाना ......................................... 7


कई पैरामीटर्स और स्टेटमेंट्स के साथ एरो फंक्शन्स ............................................................... 9

4.1 कई पैरामीटर्स को संभालना ................ 9
4.2 कई स्टेटमेंट्स के लिए ब्रेसेस का उपयोग करना ...... 10>


व्यावहारिक उदाहरण ............................................ 12

5.1 जोड़ने का फंक्शन ......................................... 12
5.2 वर्ग का फंक्शन ............................................ 14>


तुलना: पारंपरिक बनाम एरो फंक्शन्स .............................................................. 16>
जब और कहाँ एरो फंक्शन्स का उपयोग करें ...... 18>
निष्कर्ष .............................................................. 20>


परिचय
JavaScript, एक बहुमुखी और शक्तिशाली प्रोग्रामिंग भाषा, निरंतर विकसित हो रही है ताकि डेवलपर्स को कोड लिखने के अधिक कुशल और पठनीय तरीके प्रदान किए जा सकें। ऐसी ही एक विकास है arrow functions का परिचय, एक फीचर जो फंक्शन एक्सप्रेशन्स को सरल बनाता है और कोड की स्पष्टता को बढ़ाता है। यह ईबुक एरो फंक्शन्स की जटिलताओं में गहराई से उतरती है, शुरुआती और उन डेवलपर्स को मार्गदर्शन करती है जिनके पास बुनियादी ज्ञान है ताकि वे उनकी पूरी क्षमता का उपयोग कर सकें। हम सिंटैक्स, लाभ, व्यावहारिक उदाहरण, और आपके JavaScript परियोजनाओं में एरो फंक्शन्स का उपयोग करने के सर्वोत्तम अभ्यासों का अन्वेषण करेंगे।

एरो फंक्शन्स को समझना
एरो फंक्शन्स क्या हैं?
ईएस6 (ECMAScript 2015) में पेश किए गए एरो फंक्शन्स फंक्शन एक्सप्रेशन्स को लिखने के लिए एक संक्षिप्त सिंटैक्स प्रदान करते हैं। ये न केवल ब्‍योलरप्लेट कोड को छोटा करते हैं बल्कि इनके आस-पास के स्कोप से this संदर्भ को विरासत में लेते हैं, जिससे पारंपरिक फंक्शन्स से जुड़ी सामान्य खामियों को समाप्त किया जा सकता है।
पारंपरिक फंक्शन एक्सप्रेशन:




		
		
			
			
Java
			
			function add(a, b) {
    return a + b;
}
			
				
					
				
					1
2
3
				
						function add(a, b) {
    return a + b;
}
					
				
			
		


एरो फंक्शन समतुल्य:




		
		
			
			
Java
			
			const add = (a, b) => a + b;
			
				
					
				
					1
				
						const add = (a, b) => a + b;
					
				
			
		


एरो फंक्शन्स का उपयोग करने के लाभ

संक्षिप्त सिंटैक्स: ब्‍योलरप्लेट कोड को कम करता है, इसे लिखना और पढ़ना आसान बनाता है।
लेक्सिकल this: पैरेंट स्कोप से this को विरासत में लेता है, जिससे सामान्य त्रुटियों से बचा जा सकता है।
इम्प्लिसिट रिटर्न: सिंगल-एक्सप्रेशन फंक्शन्स के लिए, return कीवर्ड को छोड़ सकते हैं।
सुधरी हुई पठनीयता: छोटा कोड समग्र पठनीयता और रखरखाव क्षमता को बेहतर बनाता है।


पारंपरिक फंक्शन्स को एरो फंक्शन्स में परिवर्तित करना
मूलभूत परिवर्तन
पारंपरिक फंक्शन को एरो फंक्शन में परिवर्तित करने में function कीवर्ड को हटाना और एरो (=>) सिंटैक्स को पेश करना शामिल होता है।
उदाहरण:




		
		
			
			
Java
			
			// पारंपरिक फंक्शन
function greet(name) {
    return `Hello, ${name}!`;
}

// एरो फंक्शन
const greet = (name) => `Hello, ${name}!`;
			
				
					
				
					1
2
3
4
5
6
7
				
						// पारंपरिक फंक्शन
function greet(name) {
    return `Hello, ${name}!`;
}
 
// एरो फंक्शन
const greet = (name) => `Hello, ${name}!`;
					
				
			
		


सिंटैक्स को सरल बनाना
जब फंक्शन बॉडी में एक ही रिटर्न स्टेटमेंट होता है, तो आप एरो फंक्शन को और भी सरल बना सकते हैं पैरामीटर्स के चारों ओर कीकोष्ठकों (यदि केवल एक ही हैं) और कर्ली ब्रेसेस को हटा कर।
एकल पैरामीटर बिना कोष्ठकों के:




		
		
			
			
Java
			
			// पारंपरिक फंक्शन
function square(x) {
    return x * x;
}

// एरो फंक्शन
const square = x => x * x;
			
				
					
				
					1
2
3
4
5
6
7
				
						// पारंपरिक फंक्शन
function square(x) {
    return x * x;
}
 
// एरो फंक्शन
const square = x => x * x;
					
				
			
		


एकल एक्सप्रेशन बिना कर्ली ब्रेसेस के:




		
		
			
			
Java
			
			const multiply = (a, b) => a * b;
			
				
					
				
					1
				
						const multiply = (a, b) => a * b;
					
				
			
		



कई पैरामीटर्स और स्टेटमेंट्स के साथ एरो फंक्शन्स
कई पैरामीटर्स को संभालना
उन फंक्शन्स के लिए जो कई पैरामीटर्स स्वीकार करते हैं, पैरामीटर सूची के चारों ओर कोष्ठकों की आवश्यकता अनिवार्य होती है।
उदाहरण:




		
		
			
			
Java
			
			const subtract = (a, b) => a - b;
			
				
					
				
					1
				
						const subtract = (a, b) => a - b;
					
				
			
		


कई स्टेटमेंट्स के लिए ब्रेसेस का उपयोग करना
यदि फंक्शन बॉडी में एक से अधिक स्टेटमेंट्स होते हैं, तो कर्ली ब्रेसेस आवश्यक होते हैं, और यदि किसी मान को रिटर्न करना है तो एक स्पष्ट return स्टेटमेंट का उपयोग करना पड़ता है।
उदाहरण:




		
		
			
			
Java
			
			const divide = (a, b) => {
    if (b === 0) {
        console.error("Division by zero!");
        return null;
    }
    return a / b;
};
			
				
					
				
					1
2
3
4
5
6
7
				
						const divide = (a, b) => {
    if (b === 0) {
        console.error("Division by zero!");
        return null;
    }
    return a / b;
};
					
				
			
		



व्यावहारिक उदाहरण
जोड़ने का फंक्शन
आइए देखें कि कैसे एक पारंपरिक जोड़ने वाले फंक्शन को एरो फंक्शन में परिवर्तित किया जाता है।
पारंपरिक फंक्शन:




		
		
			
			
Java
			
			function add(a, b) {
    return a + b;
}
			
				
					
				
					1
2
3
				
						function add(a, b) {
    return a + b;
}
					
				
			
		


एरो फंक्शन परिवर्तन:




		
		
			
			
Java
			
			const add = (a, b) => a + b;
			
				
					
				
					1
				
						const add = (a, b) => a + b;
					
				
			
		


स्टेप-बाय-स्टेप विवरण:

function कीवर्ड हटाएं: function कीवर्ड को छोड़ दिया जाता है।
एरो सिंटैक्स पेश करें: पैरामीटर सूची और फंक्शन बॉडी के बीच एरो (=>) रखें।
इम्प्लिसिट रिटर्न: चूंकि फंक्शन बॉडी एकल एक्सप्रेशन है, return कीवर्ड की आवश्यकता नहीं है।

आउटपुट:




		
		
			
			
Java
			
			console.log(add(10, 20)); // Output: 30
			
				
					
				
					1
				
						console.log(add(10, 20)); // Output: 30

प्रोजेक्ट कोड (index.js):





		
		
			
			
Java
			
			// जोड़ने के लिए एरो फंक्शन
const add = (a, b) => a + b;

// add फंक्शन का परीक्षण
console.log(add(10, 20)); // Expected Output: 30
			
				
					
				
					1
2
3
4
5
				
						// जोड़ने के लिए एरो फंक्शन
const add = (a, b) => a + b;
 
// add फंक्शन का परीक्षण
console.log(add(10, 20)); // Expected Output: 30
					
				
			
		


वर्ग का फंक्शन
अगला, हम एक संख्या को वर्ग करने वाले फंक्शन को इसके एरो फंक्शन रूप में परिवर्तित करेंगे।
पारंपरिक फंक्शन:




		
		
			
			
Java
			
			function square(x) {
    return x * x;
}
			
				
					
				
					1
2
3
				
						function square(x) {
    return x * x;
}
					
				
			
		


एरो फंक्शन परिवर्तन:




		
		
			
			
Java
			
			const square = x => x * x;
			
				
					
				
					1
				
						const square = x => x * x;
					
				
			
		


और अधिक सरल बनाना:
चूंकि केवल एक पैरामीटर है, कोष्ठकों को छोड़ दिया जा सकता है।
आउटपुट:




		
		
			
			
Java
			
			console.log(square(10)); // Output: 100
			
				
					
				
					1
				
						console.log(square(10)); // Output: 100

प्रोजेक्ट कोड (index.js):





		
		
			
			
Java
			
			// किसी संख्या को वर्ग करने के लिए एरो फंक्शन
const square = x => x * x;

// square फंक्शन का परीक्षण
console.log(square(10)); // Expected Output: 100
			
				
					
				
					1
2
3
4
5
				
						// किसी संख्या को वर्ग करने के लिए एरो फंक्शन
const square = x => x * x;
 
// square फंक्शन का परीक्षण
console.log(square(10)); // Expected Output: 100
					
				
			
		



तुलना: पारंपरिक बनाम एरो फंक्शन्स


विशेषता
पारंपरिक फंक्शन
एरो फंक्शन


सिंटैक्स लंबाई
लंबा, function कीवर्ड की आवश्यकता होती है
छोटा, => सिंटैक्स का उपयोग करता है


this बाइंडिंग
डायनामिक, यह निर्भर करता है कि फंक्शन कैसे कॉल किया जाता है
लेक्सिकली बाउंड टू आसपास के स्कोप


इम्प्लिसिट रिटर्न
मान वापस करने के लिए return कीवर्ड की आवश्यकता होती है
एक्सप्रेशन्स को इम्प्लिसिटली रिटर्न कर सकता है


कन्स्ट्रक्टर्स
new के साथ कन्स्ट्रक्टर्स के रूप में उपयोग किया जा सकता है
कन्स्ट्रक्टर्स के रूप में उपयोग नहीं किया जा सकता


आर्गुमेंट्स ऑब्जेक्ट
arguments ऑब्जेक्ट तक पहुंच है
अपना arguments ऑब्जेक्ट नहीं होता


उदाहरण तुलना:




		
		
			
			
Java
			
			// पारंपरिक फंक्शन
function multiply(a, b) {
    return a * b;
}

// एरो फंक्शन
const multiply = (a, b) => a * b;
			
				
					
				
					1
2
3
4
5
6
7
				
						// पारंपरिक फंक्शन
function multiply(a, b) {
    return a * b;
}
 
// एरो फंक्शन
const multiply = (a, b) => a * b;
					
				
			
		



जब और कहाँ एरो फंक्शन्स का उपयोग करें
जब एरो फंक्शन्स का उपयोग करें

संक्षिप्त फंक्शनल एक्सप्रेशन्स: सरल ऑपरेशन्स जैसे एरे मेथड्स (map, filter, reduce) के लिए आदर्श।
this संदर्भ बनाए रखना: उपर स्कोप से this संदर्भ को संरक्षित करने की आवश्यकता होने पर उपयुक्त।
ब्‍योलरप्लेट को कम करना: साफ-सुथरे और अधिक संक्षिप्त कोड लिखने में मदद करता है।

जब एरो फंक्शन्स का उपयोग न करें

ऑब्जेक्ट मेथड्स: एरो फंक्शन्स का अपना this नहीं होता, जिससे वे उन ऑब्जेक्ट मेथड्स के लिए अनुपयुक्त होते हैं जो डायनामिक this बाइंडिंग पर निर्भर करते हैं।
कन्स्ट्रक्टर फंक्शन्स: इन्हें new कीवर्ड के साथ उपयोग नहीं किया जा सकता क्योंकि इनमें prototype नहीं होता।
डायनामिक संदर्भ आवश्यकताएँ: स्थितियाँ जहां डायनामिक this बाइंडिंग आवश्यक होती है।

उदाहरण: पारंपरिक फंक्शन का उपयोग करते हुए ऑब्जेक्ट मेथड




		
		
			
			
Java
			
			const calculator = {
    number: 10,
    add(a) {
        return this.number + a;
    }
};

console.log(calculator.add(5)); // Output: 15
			
				
					
				
					1
2
3
4
5
6
7
8
				
						const calculator = {
    number: 10,
    add(a) {
        return this.number + a;
    }
};
 
console.log(calculator.add(5)); // Output: 15
					
				
			
		


ऑब्जेक्ट मेथड में एरो फंक्शन का गलत उपयोग




		
		
			
			
Java
			
			const calculator = {
    number: 10,
    add: (a) => this.number + a // 'this' calculator ऑब्जेक्ट से बाइंड नहीं है
};

console.log(calculator.add(5)); // Output: NaN
			
				
					
				
					1
2
3
4
5
6
				
						const calculator = {
    number: 10,
    add: (a) => this.number + a // 'this' calculator ऑब्जेक्ट से बाइंड नहीं है
};
 
console.log(calculator.add(5)); // Output: NaN
					
				
			
		



निष्कर्ष
एरो फंक्शन्स JavaScript में एक महत्वपूर्ण प्रगति का प्रतिनिधित्व करते हैं, जो डेवलपर्स को फंक्शन एक्सप्रेशन्स लिखने के लिए एक अधिक संक्षिप्त और सहज तरीका प्रदान करते हैं। उनका लेक्सिकल this संदर्भ बनाए रखने और ब्‍योलरप्लेट कोड को कम करने की क्षमता उन्हें आधुनिक JavaScript विकास में एक मूल्यवान उपकरण बनाती है। हालांकि, उनके सीमाओं को समझना आवश्यक है ताकि उन्हें प्रभावी ढंग से उपयोग किया जा सके।
मुख्य बिंदु:

एरो फंक्शन्स फंक्शन्स लिखने के लिए एक संक्षिप्त सिंटैक्स प्रदान करते हैं।
वे अपने आस-पास के स्कोप से this संदर्भ को विरासत में लेते हैं।
छोटे, एकल-उद्देश्य फंक्शन्स और फंक्शनल प्रोग्रामिंग पैटर्न्स के लिए आदर्श।
ऑब्जेक्ट मेथड्स या कन्स्ट्रक्टर फंक्शन्स के लिए उपयुक्त नहीं।

एरो फंक्शन्स को अपनाने से साफ-सुथरे, अधिक रखरखाव योग्य कोड उत्पन्न हो सकता है, जो आपकी उत्पादकता और आपके JavaScript अनुप्रयोगों की गुणवत्ता दोनों में सुधार करता है।
ध्यान दें: यह लेख AI द्वारा उत्पन्न किया गया है।

विशेषता	पारंपरिक फंक्शन	एरो फंक्शन
सिंटैक्स लंबाई	लंबा, function कीवर्ड की आवश्यकता होती है	छोटा, => सिंटैक्स का उपयोग करता है
this बाइंडिंग	डायनामिक, यह निर्भर करता है कि फंक्शन कैसे कॉल किया जाता है	लेक्सिकली बाउंड टू आसपास के स्कोप
इम्प्लिसिट रिटर्न	मान वापस करने के लिए return कीवर्ड की आवश्यकता होती है	एक्सप्रेशन्स को इम्प्लिसिटली रिटर्न कर सकता है
कन्स्ट्रक्टर्स	new के साथ कन्स्ट्रक्टर्स के रूप में उपयोग किया जा सकता है	कन्स्ट्रक्टर्स के रूप में उपयोग नहीं किया जा सकता
आर्गुमेंट्स ऑब्जेक्ट	arguments ऑब्जेक्ट तक पहुंच है	अपना arguments ऑब्जेक्ट नहीं होता