वार, लेट या कांस्ट? परिवर्तनीय क्षेत्र के मुद्दे और ईएस 6

जावास्क्रिप्ट में स्कोप हमेशा एक मुश्किल विषय रहा है, खासकर जब सी और जावा जैसी अधिक कड़ाई से संगठित भाषाओं की तुलना में। कई वर्षों के लिए, जेएस में गुंजाइश विशेष रूप से व्यापक रूप से चर्चा नहीं की गई थी, क्योंकि भाषा के पास बस कोई साधन नहीं था जो वर्तमान स्थिति को महत्वपूर्ण रूप से प्रभावित करेगा। लेकिन ईसीएमएस्क्रिप्ट 6 में कुछ नई विशेषताएं हैं जो डेवलपर्स को चर के दायरे को बेहतर ढंग से नियंत्रित करने की अनुमति देती हैं। ये सुविधाएँ अब ब्राउज़रों द्वारा बहुत अच्छी तरह से समर्थित हैं, वे अधिकांश डेवलपर्स के लिए काफी सुलभ हैं। हालांकि, चर घोषित करने के लिए नए कीवर्ड, इस तथ्य को ध्यान में रखते हुए कि पुराने var कीवर्ड नहीं चले गए हैं, न केवल नए अवसरों का मतलब है, बल्कि नए प्रश्नों की उपस्थिति भी है। कब और कैसे कीवर्ड का उपयोग करें? वे कैसे व्यवहार करते हैं? किन स्थितियों में var कीवर्ड अभी भी प्रासंगिक है? सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, जिसका उद्देश्य जावास्क्रिप्ट में चर के दायरे की समस्या की खोज करना है।

चर स्कोप: एक अवलोकन

एक चर का दायरा प्रोग्रामिंग में एक महत्वपूर्ण अवधारणा है, जो हालांकि, कुछ डेवलपर्स, विशेष रूप से नौसिखियों को भ्रमित कर सकता है। एक चर का कार्यक्षेत्र उस कार्यक्रम का हिस्सा है जिसमें इस चर को एक्सेस किया जा सकता है।

निम्नलिखित उदाहरण पर एक नज़र डालें:

 var myVar = 1; function setMyVar() { myVar = 2; } setMyVar(); console.log(myVar); 

console.log विधि आउटपुट क्या होगा? इस सवाल का जवाब किसी को आश्चर्यचकित नहीं करेगा: यह 2 आउटपुट देगा। चर myVar एक फ़ंक्शन के बाहर घोषित किया गया है, जो हमें बताता है कि यह वैश्विक दायरे में घोषित किया गया है। इसलिए, समान दायरे में घोषित कोई भी फ़ंक्शन myVar तक पहुंचने में सक्षम होगा। वास्तव में, जब एक ब्राउज़र में निष्पादित कोड की बात आती है, तो पेज से जुड़ी अन्य फ़ाइलों में घोषित कार्यों में भी इस चर तक पहुंच होगी।

अब निम्नलिखित कोड पर एक नज़र डालें:

 function setMyVar() { var myVar = 2; } setMyVar(); console.log(myVar); 

बाह्य रूप से, इसके परिवर्तन, पिछले उदाहरण की तुलना में, महत्वहीन हैं। अर्थात्, हम फंक्शन के अंदर वेरिएबल डिक्लेरेशन लगाते हैं। अब console.log आउटपुट क्या होगा? वास्तव में, कुछ भी नहीं है, क्योंकि यह चर घोषित नहीं किया गया है और जब आप इसे एक्सेस करने का प्रयास करते हैं, तो एक अनहेल्ड ReferenceError एरर त्रुटि के बारे में एक संदेश प्रदर्शित किया जाएगा। यह इसलिए हुआ क्योंकि वेरिएबल का उपयोग करके फ़ंक्शन के अंदर वेरिएबल घोषित किया गया था। नतीजतन, इस चर का दायरा फ़ंक्शन के आंतरिक दायरे तक सीमित है। इसे इस फ़ंक्शन के शरीर में पहुँचा जा सकता है, इस फ़ंक्शन में एम्बेडेड फ़ंक्शन इसके साथ काम कर सकते हैं, लेकिन यह बाहर से पहुंच योग्य नहीं है। यदि हमें एक निश्चित चर का उपयोग करने के लिए एक ही स्तर पर कई कार्यों की आवश्यकता होती है, तो हमें इस चर को उसी स्थान पर घोषित करने की आवश्यकता होती है, जहां ये कार्य घोषित किए जाते हैं, अर्थात्, उनके आंतरिक दायरे से एक स्तर अधिक।

यहां एक दिलचस्प अवलोकन है: अधिकांश वेबसाइटों और वेब एप्लिकेशन का कोड किसी एक प्रोग्रामर के काम पर लागू नहीं होता है। अधिकांश सॉफ्टवेयर परियोजनाएं टीम के विकास का परिणाम हैं, और इसके अलावा, वे तीसरे पक्ष के पुस्तकालयों और रूपरेखाओं का उपयोग करते हैं। भले ही एक वेबसाइट के विकास में केवल एक प्रोग्रामर शामिल हो, वह आमतौर पर बाहरी संसाधनों का उपयोग करता है। इस वजह से, यह आमतौर पर वैश्विक दायरे में चर घोषित करने की अनुशंसा नहीं की जाती है, क्योंकि आप पहले से नहीं जान सकते हैं कि कौन से चर अन्य डेवलपर्स द्वारा घोषित किए जाएंगे जिनके कोड का उपयोग परियोजना में किया जाएगा। इस समस्या को हल करने के लिए, आप जावास्क्रिप्ट के विकास के लिए वस्तु-उन्मुख दृष्टिकोण को लागू करते समय, विशेष रूप से, " मॉड्यूल " पैटर्न और IIFE , कुछ ट्रिक्स का उपयोग कर सकते हैं, हालांकि सामान्य वस्तुओं में डेटा और फ़ंक्शन का इनकैप्सुलेशन समान प्रभाव प्राप्त कर सकता है। सामान्य तौर पर, यह ध्यान दिया जा सकता है कि चर जिनका दायरा उनकी जरूरत से ज्यादा होता है, आमतौर पर एक ऐसी समस्या होती है जिसके साथ कुछ करने की जरूरत होती है।

Var कीवर्ड की समस्या

इसलिए, हमने "गुंजाइश" की अवधारणा का पता लगाया। अब अधिक जटिल चीजों पर चलते हैं। निम्नलिखित कोड पर एक नज़र डालें:

 function varTest() { for (var i = 0; i < 3; i++) {   console.log(i); } console.log(i); } varTest(); 

इसके निष्पादन के बाद कंसोल को क्या मिलेगा? यह स्पष्ट है कि बढ़ते काउंटर i : 0 , 1 और 2 के मूल्य लूप के अंदर प्रदर्शित किए जाएंगे। लूप समाप्त होने के बाद, कार्यक्रम चलना जारी है। अब हम उसी काउंटर वैरिएबल को एक्सेस करने की कोशिश कर रहे हैं जो लूप के for घोषित किया गया था, इस लूप के बाहर। इससे क्या आएगा?

i लूप के बाहर कॉल करने के बाद, 3 कंसोल में पहुंच जाएगा, क्योंकि var कीवर्ड फ़ंक्शन स्तर पर कार्य करता है। यदि आप वैरिएबल का उपयोग करके एक चर घोषित करते हैं, तो आप निर्माण से बाहर निकलने के बाद भी एक फ़ंक्शन में पहुंच सकते हैं जहां यह घोषित किया गया था।

यह एक समस्या में बदल सकता है जब फ़ंक्शन अधिक जटिल हो जाते हैं। निम्नलिखित उदाहरण पर विचार करें:

 function doSomething() { var myVar = 1; if (true) {   var myVar = 2;   console.log(myVar); } console.log(myVar); } doSomething(); 

अब कंसोल को क्या मिलेगा? 2 और 2 । हम एक चर घोषित करते हैं, इसे 1 नंबर के साथ आरंभीकृत करते हैं, और फिर उसी if अंदर उसी चर को फिर से परिभाषित करने की कोशिश if । चूँकि ये दोनों घोषणाएँ एक ही दायरे में मौजूद हैं, हम एक ही नाम के साथ एक नया चर घोषित नहीं कर सकते हैं, भले ही हम स्पष्ट रूप से ऐसा करना चाहते हैं। नतीजतन, पहला वेरिएंट if अंदर ओवरराइट किया गया है।

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

चर घोषित करने के नए तरीके

ECMAScript 6 मानक (जावास्क्रिप्ट सुविधाओं का एक नया सेट, जिसे ES6 और ES2015 के रूप में भी जाना जाता है) हमें चर घोषित करने के दो नए तरीके देता है, जो कि भिन्न रूप में भिन्न होते हैं, जैसे कि var की तुलना में, और कुछ और विशेषताएं हैं। ये let और const कीवर्ड हैं। दोनों हमें तथाकथित ब्लॉक स्कोप देते हैं। इसका मतलब यह है कि उनके उपयोग का दायरा कोड के एक ब्लॉक तक सीमित हो सकता है, जैसे कि लूप के लिए या if । यह डेवलपर को चरों के दायरे को चुनने में अधिक लचीलापन देता है। नए कीवर्ड पर विचार करें।

.Use के कीवर्ड

let कीवर्ड, var समान है, मुख्य अंतर इसके साथ घोषित चर का सीमित दायरा है। हम उपरोक्त उदाहरणों में से एक को फिर से लिखते हैं, let साथ var जगह:

 function doSomething() { let myVar = 1; if (true) {   let myVar = 2;   console.log(myVar); } console.log(myVar); } doSomething(); 

इस स्थिति में, संख्या 2 और 1 कंसोल को मिलेगा। ऐसा इसलिए होता है क्योंकि if लेटर के साथ घोषित चर के लिए एक नया स्कोप निर्धारित करता है। यह इस तथ्य की ओर जाता है कि दूसरा घोषित चर पूरी तरह से स्वतंत्र इकाई है, पहले से संबंधित नहीं है। आप स्वतंत्र रूप से उनके साथ काम कर सकते हैं। हालांकि, इसका मतलब यह नहीं है कि कोड के नेस्टेड ब्लॉक, जैसे कि हमारे if , उस कीवर्ड से घोषित चर से पूरी तरह से काट if , जिसमें वे स्वयं उस क्षेत्र में स्थित हैं। निम्नलिखित कोड पर एक नज़र डालें:

 function doSomething() { let myVar = 1; if (true) {   console.log(myVar); } } doSomething(); 

इस उदाहरण में, कंसोल को नंबर 1 मिलेगा। if के अंदर के कोड की पहुंच उस चर तक है, जो हमने उसके बाहर बनाई थी। इसलिए, यह कंसोल में इसके मूल्य को प्रदर्शित करता है। और अगर आप दायरे को मिलाने की कोशिश करें तो क्या होगा? उदाहरण के लिए, यह करें:

 function doSomething() { let myVar = 1; if (true) {   console.log(myVar);   let myVar = 2;   console.log(myVar); } } doSomething(); 

ऐसा लगता है कि पहला console.log कॉल 1 आउटपुट करेगा, लेकिन वास्तव में, जब आप इस कोड को निष्पादित करने का प्रयास करते हैं, तो एक ReferenceError त्रुटि त्रुटि दिखाई देगी जो हमें बताती है कि इस दायरे के लिए myVar चर परिभाषित नहीं है या नहीं है (इस त्रुटि का पाठ अलग-अलग है) ब्राउज़र)। जावास्क्रिप्ट में, इस तरह की चीज है जो चर को अपने दायरे के शीर्ष तक बढ़ाती है। यही है, अगर एक चर को एक निश्चित दायरे में घोषित किया जाता है, तो जावास्क्रिप्ट इसे निष्पादित करने की आज्ञा से पहले ही इसके लिए एक जगह रखता है। यह वास्तव में कैसे भिन्न होता है जब var और let का उपयोग किया जाता है।

निम्नलिखित उदाहरण पर विचार करें:

 console.log(varTest); var varTest = 1; console.log(letTest); let letTest = 2; 

दोनों मामलों में, हम इसे घोषित करने से पहले चर का उपयोग करने का प्रयास करते हैं। लेकिन कंसोल आउटपुट कमांड अलग तरह से व्यवहार करते हैं। पहला, एक वैरिएबल का उपयोग करना, जिसे बाद में var कीवर्ड का उपयोग करके घोषित किया जाएगा, undefined आउटपुट करेगा - अर्थात, इस वेरिएबल को क्या लिखा जाएगा। दूसरा कमांड, जो वेरिएबल को एक्सेस करने की कोशिश करता है, जिसे बाद में let कीवर्ड का उपयोग करके घोषित किया जाएगा, एक ReferenceError को फेंक देगा और हमें बताएगा कि हम घोषित या आरंभ होने से पहले वेरिएबल का उपयोग करने का प्रयास कर रहे हैं। क्या बात है?

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

 var var1; console.log(var1); console.log(var2); var var2 = 1; 

इस स्थिति में, हालांकि var1 और var2 अलग-अलग घोषित किया गया है, दोनों var2 undefined आउटपुट देंगे। यहाँ बिंदु यह है कि वेरिएबल में वेरिएंट के साथ घोषित किया गया है, लेकिन इनिशियलाइज़ नहीं है, undefined मान स्वचालित रूप से लिखा जाता है। उसी समय, जैसा कि हमने पहले ही कहा है, चर का उपयोग करके घोषित किए गए चर, जो घोषित किए जाने से पहले एक्सेस किए जाते हैं, उनमें भी undefined होते हैं। नतीजतन, अगर इस तरह के कोड में कुछ गलत हो जाता है, तो यह समझना संभव नहीं होगा कि वास्तव में त्रुटि का स्रोत क्या है - एक असंगठित चर का उपयोग करना या इसकी घोषणा से पहले एक चर का उपयोग करना।

लेटर कीवर्ड के साथ घोषित चर के लिए जगह उनके ब्लॉक में आरक्षित है, लेकिन, घोषित होने से पहले वे अस्थायी मृत क्षेत्र (TDZ, टेम्पोरल डेड जोन) में गिर जाते हैं। यह इस तथ्य की ओर जाता है कि घोषित होने से पहले उनका उपयोग नहीं किया जा सकता है, और इस तरह के एक चर तक पहुंचने का प्रयास एक त्रुटि की ओर जाता है। हालाँकि, सिस्टम समस्या का सही कारण जानता है और उसे रिपोर्ट करता है। यह इस उदाहरण में स्पष्ट रूप से देखा गया है:

 let var1; console.log(var1); console.log(var2); let var2 = 1; 

यहां, console.log लिए पहला कॉल undefined आउटपुट करेगा, और दूसरा एक ReferenceError त्रुटि को फेंक देगा, हमें बताएगा कि चर अभी तक घोषित या आरंभीकृत नहीं हुआ है।

नतीजतन, यदि var का उपयोग undefined दिखाई देता है, तो हम प्रोग्राम के इस व्यवहार का कारण नहीं जानते हैं। एक चर को या तो घोषित किया जा सकता है और असंगठित किया जा सकता है, या यह अभी तक इस दायरे में घोषित नहीं किया जा सकता है, लेकिन इसे एक्सेस करने के लिए कमांड के नीचे स्थित कोड में घोषित किया जाएगा। let कीवर्ड का उपयोग करके, हम समझ सकते हैं कि वास्तव में क्या हो रहा है, जो डिबगिंग के लिए अधिक उपयोगी है।

▍ कास्ट कीवर्ड का प्रयोग

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

 let mutableVar = 1; const immutableVar = 2; mutableVar = 3; immutableVar = 4; 

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

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

 const myButton = document.querySelector('#my-button'); 

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

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

क्या हमें var कीवर्ड की आवश्यकता है?

let और const कीवर्ड एक अधिक जिम्मेदार प्रोग्रामिंग दृष्टिकोण में योगदान करते हैं। क्या ऐसी परिस्थितियाँ हैं जहाँ अभी भी var keyword की आवश्यकता है? हाँ हैं। ऐसी कई स्थितियाँ हैं जिनमें यह खोजशब्द अभी भी हमारे लिए उपयोगी है। ध्यान से विचार करें कि हम const या const को बदलने से पहले क्या बात करते हैं।

ब्राउज़रों द्वारा ▍ वार कीवर्ड समर्थन स्तर

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

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

जब लोग साइटों के लिए ब्राउज़र समर्थन के बारे में बात करते हैं, तो वे आमतौर पर पूछते हैं कि साइट किस ब्राउज़र में बेहतर तरीके से काम करेगी। यदि हम एक ऐसी साइट के बारे में बात कर रहे हैं, जिसकी कार्यक्षमता let और const के उपयोग पर आधारित है, तो एक समान प्रश्न को अलग तरीके से पेश करना होगा: "हमारी साइट किस ब्राउज़र में काम नहीं करेगी?"। और यह display: flex का उपयोग करने के बारे में बात करने की तुलना में बहुत अधिक गंभीर है display: flex या नहीं। अधिकांश वेबसाइटों के लिए, पुराने ब्राउज़र वाले उपयोगकर्ताओं की संख्या चिंता करने के लिए पर्याप्त बड़ी नहीं होगी। हालांकि, अगर हम किसी ऑनलाइन स्टोर जैसी चीज़ों के बारे में बात कर रहे हैं, या ऐसी साइटें जिनके मालिक विज्ञापन खरीदते हैं, तो यह बहुत महत्वपूर्ण विचार हो सकता है। ऐसी परियोजनाओं में नए अवसरों का उपयोग करने से पहले, जोखिम के स्तर का आकलन करें।

यदि आपको वास्तव में पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, लेकिन आप let , const और अन्य नई ईएस 6 सुविधाओं का उपयोग करना चाहते हैं, let इस समस्या का एक समाधान बबल जैसे जावास्क्रिप्ट ट्रांसपोर्टर का उपयोग करना है। Transpilers नए कोड का अनुवाद प्रदान करते हैं जो पुराने ब्राउज़र समझेंगे। बैबल का उपयोग करके, आप आधुनिक कोड लिख सकते हैं जो भाषा की नवीनतम विशेषताओं का उपयोग करता है, और फिर इसे कोड में परिवर्तित कर सकता है जो पुराने ब्राउज़र चला सकते हैं।

, ? , . , , , , . , . , , . ES6-, Babel, Babel , , . , , . . ? - IE8 ? , , , , , .

▍ var

, var , . . :

 var myVar = 1; function myFunction() { var myVar = 2; //  ,     myVar    ! } 

, myVar , , . , . , , , , . , . var .

 var myVar = 1; function myFunction() { var myVar = 2; console.log(myVar); // 2 console.log(window.myVar); // 1 } 

var , window . let const . , JS- , (, , ) , .

, . , . , , , :

 let myGlobalVars = {}; let myVar = 1; myGlobalVars.myVar = myVar; function myFunction() { let myVar = 2; console.log(myVar); // 2 console.log(myGlobalVars.myVar); // 1 } 

, , , , . , , var , , , , , .

परिणाम

, ? ? :

• IE10 - ? — var .
• JavaScript, , , var , const . - (, , ) — let .

let const , ECMAScript 6, ( ) - -. , , , . , - , «» «» , , let const , .

! , const var , let , , , ?