🧑🏿‍🤝‍🧑🏽 👆 🧒🏽 जावास्क्रिप्ट ES6: कमजोरियाँ 🚘 🥓 🤜🏽

जून 2018 में, ECMAScript 2015 ( ES6 ) मानक ने अपनी तीन साल की सालगिरह मनाई। ईएस 6 में, सबसे पहले, कई नई जावास्क्रिप्ट विशेषताएं दिखाई दी हैं, और दूसरी बात, इस मानक के साथ भाषा के विकास का एक नया युग शुरू होता है। इसके अलावा, जेएस की यह अंतिम बड़े पैमाने पर रिलीज थी, क्योंकि अब TC39 मानक के छोटे वार्षिक मुद्दों को जारी करने के लिए योजना लागू करता है, और हर कुछ वर्षों में इसे फिर से बाहर नहीं लाता है।

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

जेएस कमजोरियों के बारे में

डगलस क्रॉकफोर्ड ने अपनी पुस्तक जावास्क्रिप्ट: स्ट्रॉन्ग्स में भी इस बारे में लिखा है कि भाषा की कमजोरियों को क्या माना जा सकता है। यह कुछ ऐसा है, जो उनकी राय में, उपयोग करने के लायक नहीं है। सौभाग्य से, ईएस 6 के नवाचारों के बीच जेएस की पुरानी समस्याग्रस्त विशेषताओं में से कुछ के रूप में भयावह समानता ऑपरेटर के रूप में कुछ भी नहीं है, जो निहित प्रकार रूपांतरण, eval() फ़ंक्शन, और बयान के with है। ईएस 6 की नई विशेषताओं को बेहतर तरीके से डिजाइन किया गया है। हालाँकि, उसमें कुछ चीजें हैं जिनसे मैं बचता हूं। जेएस "कमजोरियों" की मेरी सूची में वे विशेषताएं निम्नलिखित कारणों से इस सूची में हैं:

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

अब, इन विचारों से निर्देशित, चलो ES6 की कमजोरियों के बारे में बात करते हैं।

कीवर्ड कास्ट

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

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

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

 const CONSTANT = 123; //      "TypeError: invalid assignment to const `CONSTANT`" CONSTANT = 345; const CONSTANT_ARR = [] CONSTANT_ARR.push(1) //     [1]  -    console.log(CONSTANT_ARR)

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

टैग की गईं तार स्ट्रिंग्स

const कीवर्ड एक उदाहरण है कि कैसे विनिर्देशन कुछ समस्याओं को हल करने के लिए बहुत सारे तरीके बनाता है। टैग किए गए टेम्पलेट स्ट्रिंग्स के मामले में, हमारे पास विपरीत स्थिति है। इस तरह के तारों के वाक्यविन्यास को TC39 समिति ने स्ट्रिंग इंटरपोल और मल्टीलाइन स्ट्रिंग्स को हल करने के तरीके के रूप में माना था। तब उन्होंने मैक्रो के उपयोग के माध्यम से इस अवसर का विस्तार करने का निर्णय लिया।

यदि आपने पहले कभी टैग किए गए पैटर्न के तार नहीं देखे हैं, तो ध्यान रखें कि वे स्ट्रिंग डेकोरेटर की तरह थोड़े हैं। यहाँ MDN के साथ उनके साथ काम करने का एक उदाहरण है:

 var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { var str0 = strings[0]; // "that " var str1 = strings[1]; // " is a " //  (  ) //     , //  ,      . // var str2 = strings[2]; var ageStr; if (ageExp > 99){   ageStr = 'centenarian'; } else {   ageStr = 'youngster'; } return str0 + personExp + str1 + ageStr; } var output = myTag`that ${ person } is a ${ age }`; console.log(output); // that Mike is a youngster

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

पुन: डिज़ाइन किए गए विनाशकारी असाइनमेंट अभिव्यक्तियाँ

सरल कार्यों को हल करने के लिए उपयोग किए जाने पर भाषा की कुछ विशेषताएं बहुत अच्छी लगती हैं, हालांकि, जब कार्य अधिक जटिल हो जाते हैं, तो ये सुविधाएँ हाथ से निकल सकती हैं। उदाहरण के लिए, मुझे टर्निरी सशर्त ऑपरेटर पसंद है:

 let conferenceCost = isStudent ? 50 : 200

हालांकि, इसकी मदद से लिखा गया कोड, यह समझना मुश्किल हो जाता है कि क्या, इस ऑपरेटर का उपयोग करते हुए, आप नेस्टेड कंस्ट्रक्शन का उपयोग करना शुरू करते हैं:

 let conferenceCost = isStudent ? hasDiscountCode ? 25 : 50 : hasDiscountCode ? 100 : 200;

इसे विनाशकारी कार्य कहा जा सकता है। यह तंत्र आपको वस्तुओं या सरणियों से चर के मूल्यों को खींचने की अनुमति देता है:

 let {a} = {a: 2, b: 3}; let [b] = [4, 5]; console.log(a, b) // 2, 4

इसके अलावा, इसका उपयोग करते समय, आप चर का नाम बदल सकते हैं, नेस्टेड मान प्राप्त कर सकते हैं, डिफ़ॉल्ट मान सेट कर सकते हैं:

 let {a: val1} = {a: 2, b: 3}; let [{b}] = [{a:3, b:4} , {c: 5, d: 6}]; let {c=6} = {a: 2, c: 5}; let {d=6} = {a: 2, c: 5}; console.log(val1, b, c, d) // 2, 4, 5, 6

यह सब अद्भुत है - जब तक कि इन सभी विशेषताओं का उपयोग करके जटिल अभिव्यक्तियों का निर्माण करना नहीं आता है। उदाहरण के लिए, नीचे दी गई अभिव्यक्ति में, 4 चर घोषित किए जाते हैं: userName , eventType , eventDate , और eventId । eventRecord ऑब्जेक्ट की संरचना में उनके मान अलग-अलग स्थानों से लिए गए हैं।

 let eventRecord = { user: { name: "Ben M", email: "ben@m.com" }, event: "logged in", metadata: { date: "10-10-2017" }, id: "123" }; let { user: { name: userName = "Unknown" }, event: eventType = "Unknown Event", metadata: [date: eventDate], id: eventId } = obj;

ऐसे कोड को समझना लगभग असंभव है। यह समस्या बहुत अधिक पठनीय कोड का उपयोग करके हल की जा सकती है, यदि आप विनाश के कई ऑपरेशन का उपयोग करते हैं या उन्हें पूरी तरह से छोड़ देते हैं।

 let eventRecord = { user: { name: "Ben M", email: "ben@m.com" }, event: "logged in", metadata: { date: "10-10-2017" }, id: "123" }; let userName = eventRecord.user.userName || 'Unknown'; let eventDate = eventRecord.metadata.date; let {event:eventType='UnknownEvent', id:eventId} = eventRecord;

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

डिफ़ॉल्ट निर्यात

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

ES6 मॉड्यूल निर्यात मूल्यों के दो मुख्य तरीकों का समर्थन करता है: नामित निर्यात और डिफ़ॉल्ट निर्यात, या डिफ़ॉल्ट निर्यात:

 const mainValue = 'This is the default export export default mainValue export const secondaryValue = 'This is a secondary value; export const secondaryValue2 = 'This is another secondary value;

एक मॉड्यूल कई नामित निर्यात कमांड का उपयोग कर सकता है, लेकिन केवल एक डिफ़ॉल्ट निर्यात कमांड। जब आयात की गई डिफॉल्ट एक्सपोर्ट कमांड का उपयोग करके निर्यात किया गया था, तो आयात करने वाली फ़ाइल में, आप डिफ़ॉल्ट रूप से किसी भी नाम से जो कुछ भी निर्यात किया जाता है, दे सकते हैं, क्योंकि इस ऑपरेशन के दौरान कोई नाम नहीं खोजा जाता है। नामित निर्यात का उपयोग करते समय, आपको निर्यात फ़ाइलों से चर नामों का उपयोग करने की आवश्यकता होती है, हालांकि नाम बदलना भी संभव है।

 //   import renamedMainValue from './the-above-example'; //   import {secondaryValue} from './the-above-example'; //     import {secondaryValue as otherValue} from './the-above-example';

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

नामित निर्यात का उपयोग करते समय, निर्यात किए गए चर के नाम, डिफ़ॉल्ट रूप से, आयातित चर के नामों के अनुरूप होते हैं, जो उन लोगों के लिए उनकी खोज को सरल करता है जो बुद्धिमान विकास उपकरण का उपयोग नहीं करते हैं।
नामित निर्यात का उपयोग करते समय, स्मार्ट विकास उपकरण का उपयोग करने वाले प्रोग्रामर को स्वचालित आयात के रूप में ऐसी सुविधाजनक सुविधाएँ मिलती हैं ।
नामित निर्यात आपको उन मॉड्यूल से समान रूप से निर्यात करने में सक्षम बनाता है जो आप चाहते हैं, सही मात्रा में। डिफ़ॉल्ट निर्यात डेवलपर को केवल एक मूल्य का निर्यात करने के लिए सीमित करता है। वर्कअराउंड के रूप में, आप किसी ऑब्जेक्ट के निर्यात को कई गुणों के साथ लागू कर सकते हैं। हालांकि, यह दृष्टिकोण वेबपैक जैसी किसी चीज द्वारा निर्मित JS अनुप्रयोगों के आकार को कम करने के लिए उपयोग किए जाने वाले ट्री-शेकिंग एल्गोरिदम का मूल्य खो देता है। विशेष रूप से नामित-नामित मॉड्यूल का उपयोग कार्य को सरल करता है।

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

परिणाम

आपने अभी तक ES6 की विशेषताओं के बारे में सीखा है, जो इस सामग्री के लेखक के अनुसार असफल हैं। शायद आप इस राय से जुड़ते हैं, शायद नहीं। कोई भी प्रोग्रामिंग भाषा एक जटिल प्रणाली है, जिसकी क्षमताओं को विभिन्न दृष्टिकोणों से देखा जा सकता है। हालाँकि, हम आशा करते हैं कि यह लेख उन सभी के लिए उपयोगी होगा जो स्पष्ट और उच्च-गुणवत्ता वाले कोड लिखना चाहते हैं।

प्रिय पाठकों! क्या आधुनिक जावास्क्रिप्ट में कुछ ऐसा है जिससे आप बचने की कोशिश करते हैं?