जावास्क्रिप्ट चर isting के लिए एक गाइड and लेट और कास्ट के साथ ho

नए जावास्क्रिप्ट डेवलपर्स में अक्सर चर / फ़ंक्शन उत्थापन के अनूठे व्यवहार को समझने में कठिन समय होता है।

चूंकि हम बाद में var, let और const घोषणाओं के बारे में बात करने जा रहे हैं, इसलिए फंक्शन उत्थापन के बजाय परिवर्तनशील होडिंग को समझना महत्वपूर्ण है। में गोता लगा दो!

परिवर्तनशील उत्थापन क्या है?

जावास्क्रिप्ट इंजन "चर" का उपयोग करते हुए सभी चर घोषणाओं को मानता है जैसे कि वे एक कार्यात्मक दायरे के शीर्ष पर घोषित किए गए हैं (यदि किसी फ़ंक्शन के अंदर घोषित किया गया है) या वैश्विक गुंजाइश (यदि किसी फ़ंक्शन के बाहर घोषित किया गया है) तो परवाह किए बिना कि वास्तविक घोषणा कहां होती है। यह अनिवार्य रूप से "उत्थापन" है।

तो चर वास्तव में उनकी घोषणा से पहले उपलब्ध हो सकते हैं।

आइए इसे कार्रवाई में देखते हैं ..

// OUTPUT: अपरिभाषित
console.log (आकार);
var आकार = "वर्ग";
// OUTPUT: "वर्ग"
console.log (आकार);

यदि आप C- आधारित भाषाओं से आ रहे हैं, तो आपको पहले कंसोल के लिए एक त्रुटि की उम्मीद है। उस बिंदु पर परिवर्तनीय आकार को परिभाषित नहीं किए जाने के बाद से कॉल किया जाता है। लेकिन जावास्क्रिप्ट दुभाषिया आगे दिखता है और शीर्ष पर सभी चर घोषणाओं को "लहराता" है, और आरंभीकरण उसी स्थान पर रहता है।

यहाँ पर्दे के पीछे क्या हो रहा है:

// घोषणा को सबसे ऊपर फहराया जाता है
var आकार;
// OUTPUT: अपरिभाषित
console.log (आकार);
आकार = "वर्ग";
// OUTPUT: "वर्ग"
console.log (आकार);

यहाँ एक और उदाहरण है इस बार एक कार्यात्मक दायरे में चीजों को और अधिक स्पष्ट करने के लिए:

फ़ंक्शन getShape (स्थिति) {
    // आकार अपरिभाषित के मूल्य के साथ यहां मौजूद है
    // OUTPUT: अपरिभाषित
    console.log (आकार);
    अगर (शर्त) {
        var आकार = "वर्ग";
        // कुछ अन्य कोड
        वापस आकार;
    } अन्य {
        // आकार अपरिभाषित के मूल्य के साथ यहां मौजूद है
        विवरण झूठा है;
    }
}

आप उपरोक्त उदाहरण में देख सकते हैं कि getShape () फ़ंक्शन के शीर्ष पर आकृति की घोषणा को कैसे फहराया जाता है। ऐसा इसलिए है क्योंकि अन्य भाषाओं में देखे जाने पर स्थानीय स्कोप नहीं बनता है। एक स्थानीय गुंजाइश अनिवार्य रूप से जावास्क्रिप्ट में कार्य क्षेत्र है। इसलिए, यदि and अपरिभाषित ’मान वाले ब्लॉक के बाहर और फ़ंक्शन के भीतर हर जगह आकार उपलब्ध है।

जावास्क्रिप्ट के इस डिफ़ॉल्ट व्यवहार के अपने फायदे और नुकसान का उचित हिस्सा है। इनको पूरी तरह से समझने से हमारे कोड में सूक्ष्म लेकिन खतरनाक कीड़े हो सकते हैं।

ब्लॉक-स्तरीय घोषणाएँ दर्ज करें!

ES6 ने एक वैरिएबल के जीवनचक्र पर अधिक नियंत्रण और लचीलेपन के साथ डेवलपर्स को प्रदान करने के लिए ब्लॉक-स्तरीय स्कूपिंग विकल्प पेश किए।

ब्लॉक-स्तरीय घोषणाएं ब्लॉक / लेक्सिकल स्कोप में की जाती हैं जो ब्लॉक "{}" के अंदर बनाई जाती हैं।

घोषणा करते हैं

यह वाक्य-विन्यास var के समान है, बस var को उसके दायरे के साथ एक वैरिएबल घोषित करने की अनुमति दें, जो केवल कोड ब्लॉक है।

अपने लेट डिक्लेरेशन को किसी ब्लॉक में सबसे ऊपर रखें ताकि वे उस पूरे ब्लॉक में उपलब्ध हों।

उदाहरण के लिए:

फ़ंक्शन getShape (स्थिति) {
// आकार यहाँ मौजूद नहीं है
// कंसोल.लॉग (आकार); => संदर्भError: आकार परिभाषित नहीं है
अगर (शर्त) {
        आकार देना = "वर्ग";
        // कुछ अन्य कोड
        वापस आकार;
    } अन्य {
        // आकार यहाँ भी मौजूद नहीं है
        विवरण झूठा है;
    }
}

ध्यान दें कि कैसे आकार केवल यदि मौजूद ब्लॉक के अंदर मौजूद है, और हमारे पिछले मामले की तरह अपरिभाषित आउटपुट के बजाय इसके बाहर तक पहुँचने पर एक त्रुटि फेंकता है, जैसे कि var घोषणाओं के साथ हमारा पिछला मामला।

नोट: यदि कोई पहचानकर्ता पहले से ही var के साथ किसी स्कोप के अंदर परिभाषित किया गया है, तो समान स्कोप को उसी स्कोप के अंदर लेट डिक्लेरेशन में एक एरर फेंकता है।
इसके अलावा, यदि कोई लेट डिक्लेरेशन वैसा ही नाम के साथ वैरिएबल बनाता है जैसा कि इसके बाहरी दायरे में वैरिएबल में कोई त्रुटि नहीं है। (यह मामला स्थाई घोषणाओं के साथ समान है, जिसके बारे में हम शीघ्र ही बात करेंगे।)

उदाहरण के लिए:

var आकार = "वर्ग";

आकार देना = "आयत";
// SyntaxError: पहचानकर्ता 'आकार' पहले ही घोषित किया जा चुका है

तथा:

var आकार = "वर्ग";
अगर (शर्त) {
    // एक त्रुटि नहीं है
    आकार देना = "आयत";
    // अधिक कोड
}
// कोई त्रुटि नहीं

कॉन्स्टल डिक्लेरेशन

डिक्लेरेशन सिंटैक्स, let & var के समान है, जीवनचक्र लेट के समान है। लेकिन आपको कुछ नियमों का पालन करना होगा।

कास्ट का उपयोग करके घोषित बाइंडिंग को स्थिरांक के रूप में माना जाता है, और इसलिए उन्हें एक बार परिभाषित मूल्यों को फिर से असाइन नहीं किया जा सकता है। इसके कारण, घोषणा के समय हर कॉन्स्टिट्यूशन को इनिशियलाइज़ किया जाना चाहिए।

उदाहरण के लिए:

// वैध
const आकार = "त्रिकोण";
// सिंटैक्स त्रुटि: अनुपलब्ध प्रारंभ
कास्ट रंग;
// TypeError: निरंतर चर के लिए असाइनमेंट
आकार = "वर्ग"

हालाँकि, किसी ऑब्जेक्ट के गुणों को संशोधित किया जा सकता है!

कास्ट आकार = {
    नाम: "त्रिकोण",
    पक्ष: 3
}
// काम करता है
आकार.नाम = "वर्ग";
shape.sides = 4;
// SyntaxError: अवैध शॉर्टहैंड प्रॉपर्टी इनिशियलाइज़र
आकार = {
    नाम: "षट्भुज",
    पक्ष: 6
}

उपर्युक्त उदाहरण में हम देख सकते हैं कि केवल आकृति ऑब्जेक्ट के गुणों को बदला जा सकता है क्योंकि हम केवल वही बदल रहे हैं जिसमें आकृति शामिल है, न कि वह जिसके लिए बाध्य है।

हम यह कह कर संक्षेप कर सकते हैं कि कास्ट बाइंडिंग को पूरी तरह से संशोधित करने से रोकता है - वह मूल्य जो इसे करने के लिए बाध्य है।

नोट: गुणों को उत्परिवर्तित किया जा सकता है। तो सच्ची अपरिवर्तनीयता के लिए, Immutable.js या मोरी का उपयोग करें।

टेम्पोरल डेड जोन

अब हमें पता है कि घोषित होने से पहले लेट या कॉन्स्टेबल वेरिएबल एक्सेस करने से एक रेफरेंस गिर जाएगा। कार्यक्षेत्र में प्रवेश करने और घोषित किए जाने के बीच की अवधि, जहां उन्हें एक्सेस नहीं किया जा सकता है, टेम्पोरल डेड जोन कहलाता है।

ध्यान दें कि "टेम्पोरल डेड ज़ोन" औपचारिक रूप से ECMAScript विनिर्देश में उल्लिखित नहीं है। यह प्रोग्रामर्स के बीच एक लोकप्रिय शब्द है।

मैं व्यक्तिगत रूप से आपको हमेशा कॉन्स्ट का उपयोग करने की सलाह देता हूं, क्योंकि यह कम कीड़े की ओर जाता है। मुझे अभी तक ऐसी स्थिति का सामना करना पड़ा है जहां मुझे var का उपयोग करने की आवश्यकता थी।

एक सामान्य नियम के रूप में, केवल लूप काउंटर के लिए या केवल तभी उपयोग करें जब आपको वास्तव में पुनर्मूल्यांकन की आवश्यकता हो। हर जगह, कास्ट का उपयोग करें। व्यक्तिगत रूप से मैंने फ़िल्टर (), मानचित्र () और कम () के लिए लूप खोले हैं। तुम भी।

जेएस में उत्थापन के विषय से संबंधित फंक्शन उत्थापन और महत्वपूर्ण साक्षात्कार प्रश्नों पर इसके लिए भाग 2 की जाँच करना सुनिश्चित करें।

कार्यों से संबंधित ईएस 6 में कुछ उपयोगी नई सुविधाओं के बारे में मेरे लेख के लिए यहां क्लिक करें।

फिर मिलते हैं। शांति! ️️