क्यों `समारोह फू () {}} के बजाय` कास्ट फू = () => {} `का उपयोग करें

Question

उदाहरण के लिए, इस Redux वीडियो में , प्रशिक्षक हमेशा वाक्यविन्यास का उपयोग करता है

const counter = (state=0, action) => {
   ... function body here
}

जहाँ मैं सिर्फ "पारंपरिक" का उपयोग करूंगा

function counter(state=0, action) {
   ... function body here
}

जो वास्तव में छोटा है और, IMO, स्पष्ट है। "फ़ंक्शन" शब्द के लिए पृष्ठ के बाएं और काफी बाएं हिस्से को स्कैन करना आसान है, एक छोटे "=>" के लिए दांतेदार दाहिने किनारे को स्कैन करने से।

के अलावा this, और उद्देश्य, राय नहीं होने की कोशिश कर रहा है, क्या नए उपयोगी सिंटैक्स में कुछ उपयोगी अंतर या लाभ है?

Comments

StackOverflow पर यह सवाल आपकी रूचि ले सकता है: stackoverflow.com/questions/34361379/…

— विन्सेन्ट सेवार्ड

मैं कोई जावास्क्रिप्ट विशेषज्ञ नहीं हूँ, लेकिन मुझे लगता है कि constयह सुनिश्चित करने में मदद करता है कि फ़ंक्शन बाद में फिर से परिभाषित न हो।

— मेटाफ़ाइट

धन्यवाद @VincentSavard, यह एकदम सही है, और मूल रूप से मुझे क्या उम्मीद थी: "यह" के अलावा, और प्रोटोटाइप / वर्ग सामान, कोई वास्तविक अंतर नहीं प्रतीत होता है।

— user949300

@ user949300 वहाँ है एक अंतर है, एक MetaFight का उल्लेख है। इसके अलावा, प्रोटोटाइप / "यह सामान" जल्दी से महत्वपूर्ण अंतर बन जाता है, साथ ही साथ।

— msanford

लंबी कहानी छोटी: आपको एक किनारे के मामले में स्पष्ट और संक्षिप्त मूल्य देना चाहिए।

— वेन ब्लास

Answer 1

फंक्शन स्टेटमेंट्स (नामित फ़ंक्शंस, 2nd सिंटैक्स दिखाए गए) पूर्ण लेक्सिकल स्कोप के शीर्ष पर फहराए जाते हैं, यहां तक ​​कि ifस्टेटमेंट्स जैसे मनमाने और नियंत्रण ब्लॉक के पीछे भी । का उपयोग करते हुए const(जैसे let) एक चर घोषित करने के लिए यह गुंजाइश ब्लॉक देता है, पूर्ण उत्थापन (मात्र ब्लॉक करने के लिए उत्थापन) बंद हो जाता है, और इससे यह फिर से घोषित नहीं हो सकता।

जब एक साथ स्क्रिप्टिंग को समेटना, या कुछ अन्य पैकेज-बिल्डिंग टूल्स का उपयोग करना, फंक्शन उत्थापन परस्पर विरोधी स्क्रिप्ट को उन तरीकों से तोड़ सकता है जो डिबग करना मुश्किल है क्योंकि यह चुपचाप विफल रहता है। constकार्यक्रम चलने से पहले एक पुनः घोषित एक अपवाद फेंक देगा, इसलिए इसे डीबग करना बहुत आसान है।

Comments

धन्यवाद। अच्छा उत्तर। मैंने मुख्य रूप से छोटे JS प्रोजेक्ट्स, या नोड.जेएस सर्वर प्रोजेक्ट्स पर काम किया है, जहां उनके पास नेमस्पेसिंग के लिए एक अच्छा मॉड्यूल सिस्टम है। लेकिन सिर्फ बंडलों का उपयोग करके अधिक क्लाइंट-साइड प्रोजेक्ट पर शुरू करना और यह अच्छी अंतर्दृष्टि है।

— user949300

बस एक नोट जो एस्क्लिंट नो-फंक-असाइन करता है, इस पुनर्वितरण के मुद्दे को पकड़ सकता है।

— user949300

ऐसा कोड लिखना जो सांकेतिक रूप से टाइप की गई भाषा का लाभ प्राप्त करने के लिए भ्रामक संकेतों के लिए टाइपस्क्रिप्ट का उपयोग करने का एक कारण है, न कि const। यह थोड़ा अदूरदर्शी है, IMO, constइस कारण के लिए हर जगह का उपयोग शुरू करने के लिए है, इस समय में एसेलिंट, वेबपैक, बैबल और इसके आगे। कम से कम एक दशक से मैन्युअल रूप से अब कोई भी फाइलों को एक साथ नहीं कर रहा है।

— वेन ब्लास

Answer 2

यहां आपको इसका उपयोग क्यों करना चाहिए function:

1. सिग्नलिंग स्पष्ट और संक्षिप्त है। यह किसी भी किनारे-मामले को फहराने वाली चिंताओं की तुलना में कहीं अधिक फायदेमंद है जो अन्य उत्तर में सूचीबद्ध हैं।

2. आप वास्तव में मॉड्यूल के भीतर उत्थापन चाहते हैं क्योंकि जैसा कि आप नीचे दिए गए कोड से देख सकते हैं, असफलता की constघोषणा tryDoTheThingचुपचाप और जब तक आप इसे कॉल करने का प्रयास नहीं करते तब तक पकड़ा नहीं जाएगा।

3. अधिकांश जूनियर्स जिनके संपर्क में मैं constहर फंक्शन को घोषित करने के लिए उपयोग करना शुरू कर देता हूं क्योंकि यह अभी एक सनक है, जैसे टैब पर स्पेस का उपयोग करना या सब कुछ बनाना functional!!!क्योंकि "OOP खराब" है। ऐसा मत करो। आप उस आदमी नहीं बनना चाहते हैं जो पूरी तरह से निहितार्थों को समझने के बिना fads का अनुसरण करता है।

https://gist.github.com/stephenjfox/fec4c72c7f6ae254f31407295dc72074 के माध्यम से

/*
This shows that, because of block-scoping, const function references must be
invoked in-order or else things will fail silently.
const's are added the name space serially (in the order in which they appear)
and much of the body isn't declared when we first try to invoke or functions
*/


const tryDoTheThing = () => {
  console.log(`This is me trying to be awesome ${getAwesome()}`)
}


// "getAwesome is not defined", because it is referenced too early
tryDoTheThing() // comment to see the rest work


const getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


const doTheThing = () => {
  console.log(`This is awesome! ${getAwesome()}`)
}

doTheThing() // prints

बनाम

/*
Function declarations are given two passes, where the first lifts them to
the top of the namespace, allowing "out of order" usage
*/

doTheThing();


function doTheThing() {
  console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}