इस विषय को कई बार कवर किया गया है, फिर भी, मैं इस बारे में बात करना चाहूंगा कि जिस समस्या को संबोधित करने का इरादा है, उसके परिप्रेक्ष्य से (जावास्क्रिप्ट का उपयोग करके) क्या दायरा है।

दायरा वास्तव में किस समस्या का समाधान करता है?

जैसे-जैसे एप्लिकेशन का आकार बढ़ता है, उनकी जटिलता भी बढ़ती है - स्कोप ऐसी जटिलता को प्रबंधित करने का एक उपकरण है।

युग्मन बनाम वियुग्मन

आइए मान लें कि हमारे पास एक वैश्विक वैरिएबल त्रिज्या है जो 7 पर सेट है और एक फ़ंक्शन createSpecialButton() है जो एक "विशेष" बटन लौटाता है:

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

यह फ़ंक्शन एक विशिष्ट त्रिज्या वाला एक बटन लौटाता है, जो इस मामले में 7 पर सेट है। अभी, कोड के साथ कोई समस्या नहीं है, क्योंकि हम जानते हैं कि त्रिज्या किस पर सेट है और इसलिए जानते हैं कि परिणामी बटन क्या करेगा हमशक्ल। हालाँकि, क्या होता है जब हम दो और फ़ंक्शन जोड़ते हैं जो दोनों त्रिज्या चर पर निर्भर करते हैं? हमारा कोड अब इस तरह दिखता है:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

यह परिवर्तन करने के बाद, createSpecialButton() को कॉल करते समय त्रिज्या का मान क्या होगा? यदि आपने 16 का अनुमान लगाया है, तो आप सही हैं।

सिर्फ दो अतिरिक्त फ़ंक्शन जोड़कर, हमने अपने कोड की जटिलता को काफी बढ़ा दिया है, और अब एक ऐसी दुनिया में रहते हैं जिसमें कोड के कई, असंबंधित, टुकड़े एक ही निर्भरता पर निर्भर हैं। अब, कल्पना करें कि यह एक बहुत बड़ा पूर्ण-स्टैक एप्लिकेशन था - यह तर्क करना तुरंत मुश्किल हो जाएगा कि राज्य के कुछ हिस्से कहां से आ रहे थे और बग सामने आने पर उन्हें कैसे ठीक किया जाए।

इसे ठीक करने के लिए, हम प्रत्येक फ़ंक्शन के लिए अलग-अलग त्रिज्या चर परिभाषित कर सकते हैं:

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

आप इस परिवर्तन को देख सकते हैं और कह सकते हैं "ठीक है, ठीक है, लेकिन अब और अधिक कोड है - यह सही नहीं लगता"। यह सही है, अधिक कोड है, हालांकि कम कोड बेहतर नहीं है यदि इसके परिणामस्वरूप कम रखरखाव योग्य कोड होता है - हमने जो परिवर्तन किया है वह हमारे कोड की रखरखाव क्षमता में सुधार करता है, और यह हमेशा एक अच्छी बात है।

जावास्क्रिप्ट में स्कोप के प्रकार

वैश्विक कार्यक्षेत्र

वैश्विक दायरा आपके पूरे एप्लिकेशन में हर चीज के लिए सुलभ है। यदि आप एक Node.JS ऐप लिख रहे हैं तो संभवतः आप वैश्विक दायरे के साथ काम नहीं करेंगे या उसका सामना नहीं करेंगे। हालाँकि, यदि आप एक वेब ऐप में काम कर रहे हैं, तो आप स्क्रिप्ट टैग का उपयोग करके या window.SOMETHING का उपयोग करके घोषणाओं को वैश्विक दायरे में रख सकते हैं।

उदाहरण के लिए, स्क्रिप्ट टैग का उपयोग करके, आप कुछ ऐसा कर सकते हैं:

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

विंडो ग्लोबल ऑब्जेक्ट का उपयोग करते समय, आप कुछ ऐसा कर सकते हैं:

  window.username = "Garrett";

मॉड्यूल का दायरा

यदि आप Node.JS प्रोजेक्ट में काम कर रहे हैं, तो मॉड्यूल स्कोप वह है जिसके साथ आप उच्चतम स्तर पर काम करेंगे। .js (या .ts) एक्सटेंशन वाली प्रत्येक फ़ाइल एक अलग मॉड्यूल है, जिसका अर्थ है कि आपकी घोषणाएँ किसी दी गई फ़ाइल में मौजूद हर चीज़ तक पहुंच योग्य होंगी, जब तक कि आप उन्हें स्पष्ट रूप से निर्यात नहीं करते।

उदाहरण के लिए, user.ts में, दोनों फ़ंक्शन वेरिएबल नाम तक पहुंच सकते हैं।

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

हालांकि, user.ts के इस संस्करण में, केवल accessName() ही वेरिएबल नाम तक पहुंच सकता है:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

ध्यान दें कि इन दोनों मॉड्यूल में, कुछ भी निर्यात नहीं किया जाता है। दूसरे शब्दों में, अन्य मॉड्यूल के कोड के पास इस कोड के बारे में जानने का कोई तरीका नहीं है और इस प्रकार इसे आयात और उपयोग नहीं किया जा सकता है। हालाँकि हम इसे बदल सकते हैं:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

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

कार्य क्षेत्र

हमने वास्तव में फ़ंक्शन स्कोप पहले ही देख लिया है। नीचे दिए गए कोड को देखें (यह ऊपर दिए गए स्निपेट में से एक ही कोड है):

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

इसे चलाने का प्रयास करें - greetAgain() एक त्रुटि में चलेगा क्योंकि जिस नाम चर को पढ़ने का प्रयास किया जा रहा है वह केवल greet() के संदर्भ (यानी "दायरे") के भीतर मौजूद है।

ध्यान दें: आप इसे "स्थानीय दायरा" के रूप में देख सकते हैं।

ब्लॉक स्कोप

ब्लॉक स्कोप एक दिलचस्प है क्योंकि यह केवल नए वेरिएबल प्रकारों के साथ काम करता है - विशेष रूप से, लेट और कॉन्स्ट, न कि var। चलो एक नज़र मारें।

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

उपर्युक्त उदाहरण में, हम देख सकते हैं कि 1) {} के भीतर कोड रखने से एक कोड ब्लॉक बनता है। 2) लेट और कॉन्स्ट का उपयोग करके परिभाषित वेरिएबल्स को केवल उस कोड ब्लॉक के भीतर ही एक्सेस किया जा सकता है। 3) var के साथ बनाया गया वेरिएबल ब्लॉक स्कोप के नियमों का पालन नहीं करता है, क्योंकि इसे अभी भी {} के बाहर एक्सेस किया जा सकता है।

ध्यान दें: आधुनिक जावास्क्रिप्ट परिवर्तनीय घोषणाओं के लिए लेट और कॉन्स्ट का उपयोग करता है न कि var का।

घोषणाएँ न्यूनतम आवश्यक दायरे में की जानी चाहिए

अंत में, याद रखें कि स्कोप हमारे कोड में जटिलता को प्रबंधित करने के लिए एक उपकरण है, और जितना अधिक आप दायरे के स्तर में घोषणाएं रखेंगे, आपके कोड में उतनी ही अधिक जटिलता होगी, इसलिए घोषणाओं को लक्ष्य बनाना सबसे अच्छा है आवश्यक न्यूनतम दायरे में रखा जाए।