JavaScript Arrow Functions — छोटा रूप, बड़ा फर्क

अब तक आपने कई functions लंबे तरीके से लिखे हैं: function add(a, b) { return a + b; }। यह काम करता है, पर एक छोटे idea के लिए यह बहुत typing है। JavaScript के पास वही चीज़ लिखने का छोटा तरीका है — arrow function, जिसका नाम बीच के मोटे तीर => से पड़ा है। यह कम शब्दों में वही काम करता है, और आपको यह लगभग हर आधुनिक JavaScript file में मिलेगा।

Diagram — देखें, यह सब कैसे जुड़ता है

इसे अपने फ़ोन के shortcut की तरह सोचिए। लंबा तरीका (पूरा number मिलाना) अब भी काम करता है, पर shortcut आपको उसी व्यक्ति तक तेज़ी से पहुँचाता है। Arrow functions shortcut हैं: वही नतीजा, कम typing, और एक बार आकार जान लेने पर पढ़ने में आसान।

आकार — तीन छोटे नियम

let add = (a, b) => a + b;      // two params, one line, no return needed
let double = x => x * 2;        // one param — the brackets are optional
let sayHi = () => "Namaste!";   // no params — empty brackets

नियम एक: अगर body एक ही लाइन है, तो आप curly braces हटा सकते हैं — और फिर return अपने आप हो जाता है। उस लाइन की value ही नतीजा है। नियम दो: बिल्कुल एक parameter होने पर round brackets वैकल्पिक हैं। नियम तीन: कोई parameter न हो, या एक से ज़्यादा हों, तो brackets रहते हैं। जब body में एक से ज़्यादा लाइनें चाहिए हों, तो आप braces रखते हैं और return खुद लिखते हैं, जैसे सामान्य function में।

एक बड़ा फर्क — this

Arrow functions सिर्फ छोटे नहीं होते। वे this को अलग तरीके से सँभालते हैं, और यही वह हिस्सा है जो interviewers को पूछना बहुत पसंद है। एक सामान्य function को अपना this मिलता है, यह इस पर निर्भर करता है कि उसे कैसे बुलाया गया — button click के अंदर this button है। Arrow function का अपना कोई this नहीं होता: वह आस-पास के code से this उधार लेता है।

let shop = {
  name: "Chai Shop",
  items: ["Masala", "Adrak", "Kulhad"],
  list: function () {
    this.items.forEach(item => {
      console.log(this.name + " sells " + item);
    });
  }
};

forEach के अंदर arrow function अब भी this.name को "Chai Shop" के रूप में देखता है, क्योंकि उसने this list से उधार लिया है। अगर आप वहाँ सामान्य function इस्तेमाल करते, तो this कुछ और ही होता, और this.name undefined होता। इसीलिए map, filter और forEach के अंदर arrows ही मानक चुनाव हैं।

आम गलतियाँ

• Arrow function को object method की तरह इस्तेमाल करना और उम्मीद करना कि this object होगा — ऐसा नहीं है। Methods सामान्य functions होने चाहिए।
• () => { a + b } लिखना और हैरान होना कि जवाब undefined क्यों है — braces के साथ आपको return खुद लिखना पड़ता है।
• दो parameters के साथ brackets भूल जाना — a, b => a + b syntax error है। यह (a, b) => a + b होना चाहिए।
• Arrows को हर जगह इस्तेमाल करना, लंबे functions के लिए भी — पढ़ने में तकलीफ़ होती है। Arrows छोटे कामों के लिए हैं।

याद रखें

• Arrow syntax: (a, b) => a + b — एक लाइन, कोई braces नहीं, कोई return नहीं।
• एक parameter अपने brackets हटा सकता है: x => x * 2।
• Braces के साथ आपको return खुद लिखना पड़ता है।
• Arrows का अपना कोई this नहीं होता — वे आस-पास के code से उधार लेते हैं।
• मोटा तीर जवाब की ओर इशारा करता है — एक लाइन के लिए return की ज़रूरत नहीं।

उदाहरण समझिए

• const price = cup => cup * 10; — एक parameter वाला arrow, कोई brackets नहीं, एक लाइन। price(3) 30 देता है।
• const total = (qty, rate) => qty * rate; — दो parameters, इसलिए brackets रहते हैं। total(3, 10) 30 देता है।
• const bill = qty => { let t = qty * 10; return "Total: ₹" + t; }; — braces के साथ body में दो लाइनें हैं, इसलिए return हाथ से लिखा जाता है।
• document.getElementById("calc").onclick = () => { ... }; — click handler के रूप में arrow: छोटा, और यह this बाहर से उधार लेता है, जो यहाँ हमें चाहिए।
• document.getElementById("out").textContent = bill(qty); — arrow का जवाब पेज पर दिखाया जाता है।