← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 13 of 26

JS ऐरो फंक्शन्स

एक formal letter और एक quick text message के फर्क के बारे में सोचें, दोनों एक ही message पहुंचाते हैं, पर text message एक छोटा, ज़्यादा casual format इस्तेमाल करता है जो सीधे मुद्दे पर आता है। Arrow functions JavaScript functions के लिए वही छोटा format हैं, जो ES6 में introduce हुआ, function keyword की जगह => इस्तेमाल करते हुए, और अक्सर साधारण one-line functions के लिए curly braces और return keyword को पूरी तरह skip करने देते हैं। आप modern JavaScript में हर जगह arrow functions देखेंगे, खासतौर पर असली projects में array methods और event handlers के अंदर, cookiescursor.com पर चल रहे scripts सहित।

In this page:

  1. Arrow Function Syntax
  2. Implicit Return
  3. Array Methods में Arrow Functions
  4. Arrow Functions में this
  5. Arrow Functions कब इस्तेमाल न करें
Syntax
javascript 
const functionName = (parameters) => expression;

const functionName = (parameters) => {
  // body
  return value;
};

Arrow Function Syntax

एक arrow function, function keyword की जगह parameter list के बाद => रखता है, और किसी single expression के लिए, curly braces और return keyword दोनों को पूरी तरह छोड़ा जा सकता है।

Note: किसी एक parameter के लिए, आसपास के parentheses optional होते हैं, name => ... valid है, हालांकि कई style guides consistency के लिए अभी भी उन्हें रखने की सलाह देते हैं।
Warning: कई parameters के लिए हमेशा उनके आसपास parentheses चाहिए होते हैं, (a, b) => ..., वहाँ उन्हें छोड़ने से syntax error आता है।

उदाहरण: Arrow Function Syntax

javascript 
const add = (a, b) => a + b;
console.log(add(2, 3));

Implicit Return

जब किसी arrow function का body एक single expression हो, तो आप curly braces और return keyword दोनों छोड़ सकते हैं, JavaScript अपने आप expression का result return कर देता है।

Note: Implicit return छोटे, one-line transformations के लिए आदर्श है, खासतौर पर map और filter जैसे array methods के अंदर।
Warning: किसी object literal को implicitly return करने के लिए उसे parentheses में लपेटना ज़रूरी है, जैसे () => ({ key: value }), वरना braces को function body के रूप में पढ़ा जाता है।

उदाहरण: Implicit Return

javascript 
const square = n => n * n; // implicit return, no braces needed
console.log(square(5));

Array Methods में Arrow Functions

map, filter, और forEach जैसे array methods को पास किए गए छोटे, inline callbacks के रूप में arrow functions बहुत आम हैं, जो code को compact और readable बनाए रखते हैं।

Note: जब कोई callback एक line में फिट होने जितना छोटा हो, तो implicit return वाला arrow function आमतौर पर एक पूरे function expression से ज़्यादा साफ पढ़ने में आता है।
Warning: कई lines में फैली ज़्यादा जटिल callback logic के लिए, explicit return वाला पूरा curly-brace syntax अक्सर किसी one-liner को जबरदस्ती फिट करने से ज़्यादा साफ होता है।

उदाहरण: Arrow Functions in Array Methods

javascript 
const nums = [1, 2, 3];
console.log(nums.map(n => n * 2));

Arrow Functions में this

regular functions के उलट, arrow functions का अपना this नहीं होता, वे उस enclosing scope से this inherit करते हैं जहाँ arrow function define किया गया था, जो context के हिसाब से मददगार या हैरान करने वाला दोनों हो सकता है।

Note: यह inherited-this व्यवहार arrow functions को किसी method के अंदर callbacks के लिए बढ़िया बनाता है, जहाँ आप चाहते हैं कि this अभी भी outer object को refer करे।
Warning: किसी object के method के रूप में सीधे arrow function इस्तेमाल करना आमतौर पर this को तोड़ देता है, क्योंकि यह surrounding scope से inherit करता है, न कि उस object से जो method कॉल कर रहा है।

उदाहरण: this in Arrow Functions

javascript 
const obj = {
  value: 42,
  regular: function () {
    const arrow = () => console.log(this.value); // inherits this from regular()
    arrow();
  },
};
obj.regular();

Arrow Functions कब इस्तेमाल न करें

ऐसे object methods के लिए arrow functions से बचना बेहतर है जिन्हें this चाहिए, और इन्हें new के साथ constructor functions के रूप में इस्तेमाल नहीं किया जा सकता, इन खास मामलों में regular function declarations ही सही विकल्प रहते हैं।

Note: एक साधारण नियम के तौर पर, object methods और constructors के लिए regular functions इस्तेमाल करें, और छोटे callbacks और standalone utility functions के लिए arrow functions।
Warning: new keyword के साथ arrow function इस्तेमाल करने की कोशिश तुरंत एक TypeError देती है, arrow functions कभी constructors नहीं हो सकते।

उदाहरण: When NOT to Use Arrow Functions

javascript 
const obj = {
  value: 42,
  // Avoid: arrow function as a method, 'this' won't refer to obj
  broken: () => console.log(this),
};
obj.broken(); // this is NOT obj
Live Example
Related Topics

JS फंक्शन्स · JS हायर ऑर्डर फंक्शन्स · JS डिस्ट्रक्चरिंग · JS क्लासेस

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी object method की तरह arrow function इस्तेमाल करना जो this पर निर्भर करता है, arrow functions का अपना this नहीं होता, जिससे अनपेक्षित व्यवहार होता है।
  2. यह भूल जाना कि arrow function syntax में कई parameters के लिए parentheses ज़रूरी हैं, लेकिन एक single parameter के लिए optional।
  3. बिना parentheses के implicitly return होने वाले किसी object literal को wrap करना, जिसे JavaScript function body block के रूप में गलत समझता है।
चैप्टर सारांश
  • Arrow functions => syntax इस्तेमाल करते हैं और किसी single expression के लिए curly braces और return छोड़ सकते हैं, जिसे implicit return कहते हैं।
  • Arrow functions का अपना this नहीं होता, वे उस surrounding scope से this inherit करते हैं जहाँ वे defined थे।
  • Arrow functions छोटे callbacks के लिए ideal हैं, जैसे map या filter के अंदर, लेकिन object methods के लिए उतने उपयुक्त नहीं।
ब्राउज़र सपोर्ट

Arrow functions को 2015 से सभी major browsers में support मिला है और यह modern JavaScript का पूरी तरह standard हिस्सा है।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Destructuring Next Lesson → JS Classes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.