Scope and hoisting In Hindi
जावास्क्रिप्ट वेब डेवेलोपमेंट में स्कोप और होइस्टिंग एक इम्पोर्टेन्ट प्रोग्रामिंग कॉन्सेप्ट हैं, जो किसी जावास्क्रिप्ट वेबपेज सोर्स कोड में यूजर डिफाइन प्रोग्राम वेरिएबल डाटा टाइप, फ़ंक्शन और डाटा ऑब्जेक्ट की डिफ़ॉल्ट वेरिएबल एक्सेसिबिलिटी और प्रोग्राम बिहेवियर को कंट्रोल या मैनेज करते हैं। किसी भी जावास्क्रिप्ट वेब डेवलपर को बग-फ़्री और प्रेडिक्टेबल प्रोग्राम सोर्स कोड क्रिएट करने के लिए इन्हें समझना और डील करना बेहद ज़रूरी है।
So, let’s explore the scope and hoisting concepts in JavaScript web development.
Scope features in JavaScript web development.
जावास्क्रिप्ट वेब डेवलपमेंट स्क्रिप्ट में स्कोप का अर्थ है, वह वेब स्क्रिप्ट कॉन्टेक्स्ट है, जिसमें कोई वेब डेवलपमेंट स्क्रिप्ट में वेरिएबल या फ़ंक्शन एक्सेस या कण्ट्रोल होता है। जावास्क्रिप्ट प्रोग्रामिंग में मुख्य रूप से तीन प्रकार के प्रोग्राम वेरिएबल स्कोप डिफाइन होते हैं.
JavaScript global program variable scope.
किसी भी जावास्क्रिप्ट वेब डेवलपमेंट स्क्रिप्ट फ़ंक्शन या ब्लॉक के बाहर डिक्लेयर किए गए सभी प्रोग्राम वेरिएबल या फ़ंक्शन का ग्लोबल स्कोप नेचर होता है. इसका अर्थ है कि यह जावास्क्रिप्ट यूजर डिफाइन प्रोग्राम सोर्स कोड में कहीं से भी एक्सेसिबल या मैनेजेबल होते है।
let globalVariable = “This is a global variable define”;
function checkGlobal() {
console.log(globalVariable); // here it Accessible inside the global function
}
checkGlobal(); // Result – “This is a global variable define”
console.log(globalVariable); // Result – “This is a global variable define”
In the example above.
- यहाँ इस एक्साम्प्ल globalVariable फ़ंक्शन के अंदर और बाहर दोनों जगह एक्सेसिबल होता है, क्योंकि यहाँ globalVariable का स्कोप ग्लोबल स्कोप के रूप में डिफाइन है।
JavaScript function program variable scope.
किसी जावास्क्रिप्ट वेब स्क्रिप्ट प्रोग्राम फ़ंक्शन के अंदर यूजर डिफाइन डिक्लेयर किए गए वेरिएबल फ़ंक्शन-बेस्ड स्कोप्ड होते हैं, इसका मतलब है कि ये फंक्शन सिर्फ़ उसी डिफाइन डिक्लेअर फ़ंक्शन के अंदर से ही एक्सेस कण्ट्रोल या मैनेज किए जा सकते हैं।
function localFunction() {
let localVariable = “This is a local variable scope”;
console.log(localVariable); // here it only Accessible inside the declare function
}
localFunction(); // Result is – “This is a local variable scope”
console.log(localVariable); // it display Error – ‘localVariable’ is not defined
In the example above.
- localVariable सिर्फ़ localFunction के अंदर से ही एक्सेस किया जा सकता है, और फ़ंक्शन के बाहर से इसे किसी भी प्रकार से एक्सेस नहीं किया जा सकता है। फिर भी इसे एक्सेस करते है, तो यह एक एरर को डिस्प्ले करता है.
JavaScript block program variable scope.
जावास्क्रिप्ट प्रोग्रामिंग में ES6 में let और const डाटा टाइप वेरिएबल मेथड आने के साथ, किसी भी कर्ली ब्लॉक ({} से घिरे) के अंदर डिक्लेयर किए गए प्रोग्राम वेरिएबल ब्लॉक-स्कोप्ड नेचर के डिफाइन होते हैं, इसका अर्थ है कि ये सिर्फ़ उसी प्रोग्राम ब्लॉक के अंदर से ही एक्सेस और कण्ट्रोल किए जा सकते हैं।
if (true) {
let blockVariable = “This is a block-scoped program variable define”;
console.log(blockVariable); // here it only Accessible inside the define program block
}
console.log(blockVariable); // Display Error – ‘blockVariable’ is not defined
In this example.
- यहाँ इस प्रोग्राम में blockVariable सिर्फ़ if ब्लॉक के अंदर से ही एक्सेस और मैनेज किया जा सकता है, जहाँ इसे प्रोग्राम में इफ स्टेटमेंट के साथ डिक्लेयर किया गया था। इसे प्रोग्राम ब्लॉक के बाहर से एक्सेस नहीं किया जा सकता है।
Hoisting concept in JavaScript.
होइस्टिंग जावास्क्रिप्ट वेब डेवलपमेंट या प्रोग्रामिंग में एक ऐसा कांसेप्ट है, जहाँ प्रोग्राम में डिक्लेअर वेरिएबल और यूजर डिफाइन फ़ंक्शन डिक्लेरेशन को प्रोग्राम कंपाइलेशन फ़ेज़ के समय, यूजर क्रिएटेड प्रोग्राम सोर्स कोड एग्ज़िक्यूट होने से पहले, उनके अपने डिफाइन वेरिएबल स्कोप के टॉप पे मूव किया जाता है. जिसे जावास्क्रिप्ट में “होइस्ट” बिहैवियर के रूप में जाना जाता है।
JavaScript Variable Hoisting Concept.
जावास्क्रिप्ट प्रोग्राम में var के साथ, वेरिएबल को उनके डिफाइन स्कोप के टॉप पर होइस्ट किया जाता है. लेकिन जब तक उनका एक्चुअल प्रोग्राम डिक्लेरेशन एग्ज़िक्यूट नहीं हो जाता है, तब तक उन वेरिएबल को अनडिफ़ाइंड के साथ इनिशियलाइज़ किया जाता है।
console.log(sampleVar); // Result is – undefined (because it’s hoisted but not initialized yet in program)
var sampleVar = “Vcanhelpsu”;
console.log(sampleVar); // Result is – Vcanhelpsu
Here in this example.
- sampleVar वेरिएबल को उसके स्कोप के टॉप पर होइस्ट किया गया है, लेकिन इसमें sampleVar की वैल्यू तब तक अनडिफ़ाइंड पर सेट रहती है. जब तक कि वह लाइन जहाँ इसे “Vcanhelpsu” असाइन किया गया है, और प्रोग्राम में ये प्रॉपर एग्ज़िक्यूट नहीं हो जाती है।
Hoisting concept with let and const in JavaScript.
जावास्क्रिप्ट प्रोग्राम में let और const डाटा टाइप डिक्लेरेशन मेथड भी होइस्ट होते हैं, लेकिन ये var वेरिएबल से डिफरेंट वर्क करते हैं।
उन्हें प्रोग्राम में ब्लॉक के टॉप पर होइस्ट किया जाता है, लेकिन जब तक प्रोग्राम एग्ज़िक्यूशन डिक्लेरेशन लाइन तक नहीं पहुँचता जाता है. तब तक उन्हें प्रोग्राम में इनिशियलाइज़ नहीं किया जाता है। इसका मतलब है कि उनके प्रोग्राम में डिक्लेरेशन से पहले उन्हें एक्सेस करने पर ReferenceError डिस्प्ले हो जाता है।
console.log(testLet); // Display Error: Cannot access ‘testLet’ before initialization
let testLet = “Vcanhelpsu”;
console.log(sampleConst); // Display Error: Cannot access ‘sampleConst’ before initialization
const sampleConst = “Education Platform”;
Here in this program example.
- यहाँ testLet और sampleConst दोनों वेरिएबल प्रोग्राम में होइस्ट किए गए हैं, लेकिन ये प्रोग्राम में इनिशियलाइज़ होने तक “टेम्पोरल डेड ज़ोन” (TDZ) में स्टोर रहते हैं. इस वजह से प्रोग्राम में डिक्लेरेशन से पहले उन्हें एक्सेस करने की कोशिश करने पर ReferenceError डिस्प्ले होता है।
Function Hoisting Concept in JavaScript.
जावास्क्रिप्ट प्रोग्राम में यूजर डिफाइन फ़ंक्शन डिक्लेरेशन को उनके स्कोप में सबसे ऊपर होइस्ट किया जाता है, जिसमें फ़ंक्शन बॉडी भी मौजूद होती है। इसका मतलब है कि जावास्क्रिप्ट यूजर प्रोग्राम सोर्स कोड में किसी फ़ंक्शन के डिक्लेरेशन से पहले उसे कॉल कर सकते हैं।
sampleFunction(); // Result – “Welcome to, Vcanhelpsu”
function sampleFunction() {
console.log(“Welcome to, Vcanhelpsu”);
}
In this program example.
- यहाँ इस प्रोग्राम में फ़ंक्शन sampleFunction() को उसके डिक्लेरेशन से पहले कॉल किया जा सकता है, क्योंकि यहाँ प्रोग्राम में फ़ंक्शन डिक्लेरेशन को स्कोप में सबसे ऊपर होइस्ट किया गया है।
- जैसा की, किसी फ़ंक्शन प्रोग्राम एक्सप्रेशन में (वेरिएबल को असाइन किए गए) उसी तरह से होइस्ट नहीं होते हैं।
sampleFunc(); // Error: sampleFunc is not a function
var sampleFunc = function() {
console.log(“Welcome to, Vcanhelpsu”);
};
In the example above.
- sampleFunc() फ़ंक्शन को फंक्शन में होइस्ट किया गया है, लेकिन इसे फ़ंक्शन डिक्लेरेशन के बदले एक प्रोग्राम वेरिएबल डिक्लेरेशन (वैल्यू अनडिफाइंड के साथ) के रूप में होइस्ट किया गया है। फ़ंक्शन सिर्फ़ उस लाइन के बाद डिफाइन होता है जहाँ sampleFunc() को फ़ंक्शन असाइन किया गया है, इस वजह से प्रोग्राम में असाइनमेंट से पहले इसे कॉल करने पर एरर आता है।
Examples of variable hoisting and variable scope in JavaScript.
Example of variable hoisting with var.
console.log(sample); // Outputs: undefined (hoisted, but not initialized yet)
var sample = “Vcanhelpsu”;
console.log(sample); // Result – Vcanhelpsu
Example of hoisting with JavaScript let and const.
console.log(info); // Error: Cannot access ‘info’ before initialization
let info = “Vcanhelpsu”;
console.log(info1); // Error: Cannot access ‘info1’ before initialization
const info1 = “Vcanhelpsu”;
JavaScript function hoisting example.
hiVcanhelpsu(); // Outputs: Vcanhelpsu
function hiVcanhelpsu() {
console.log(“Vcanhelpsu”);
}
Example of function expression/not hoisted.
welcome(); // Error: welcome is not a function
var welcome = function() {
console.log(“How are you”);
};
Main Differences between Scope and Hoisting in JavaScript.
| Aspect | Var data type element | let and const data type element |
| Variable Scope | Function based variable scoped define in program | Block based variable scoped define in program |
| Variable Hoisting | It Hoisted to the top and initialized as undefined in program | it Hoisted, but not initialized (temporal store in dead zone) |
| Redeclaration features | Yes, the Can be redeclared in the same program scope | No they Cannot be redeclared in the same program scope |
| Reassignment features | This Can be reassigned in variable | This Can be reassigned (let), but not for const data type |
The result of Scope and hoisting in JavaScript.
- जावास्क्रिप्ट प्रोग्राम में स्कोप यह इंडीकेट करता है कि आपके प्रोग्राम सोर्स कोड में वेरिएबल और फ़ंक्शन कहाँ से और कैसे कैसे मेथड यूज़ कर एक्सेस किए जा सकते हैं. जिसमे ग्लोबल, फ़ंक्शन, या ब्लॉक, फंक्शन वेरिएबल स्कोप या मेथड डिफाइन हो सकते है।
- जावास्क्रिप्ट वेरिएबल होइस्टिंग कांसेप्ट में, प्रोग्राम कम्पाइलेशन फ़ेज़ के समय वेरिएबल और फ़ंक्शन डिक्लेरेशन को उनके स्कोप के टॉप पर मूव किया जाता है. जबकि var के साथ, इनिशियलाइज़ेशन डिक्लेरेशन लाइन पर होता है. जबकि let और const डाटा टाइप वेरिएबल के साथ, ये वेरिएबल प्रोग्राम में इनिशियलाइज़ होने तक टेम्पोरल डेड ज़ोन में स्टोर रहते हैं।
