👨🏿‍🤝‍👨🏾 🤸🏼 🦊 ES2020 नवाचार जो मुझे वास्तव में पसंद हैं 🤦🏾 🥂 👩🏿‍⚕️

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

वैकल्पिक चेन

वैकल्पिक चेनिंग, मेरे लिए व्यक्तिगत रूप से, ES2020 मानक की सबसे रोमांचक विशेषताओं में से एक है। मैंने कई कार्यक्रम लिखे हैं जिनमें यह सुविधा अत्यंत उपयोगी होगी।

वैकल्पिक श्रृंखलाएं आपको उनमें से प्रत्येक के अस्तित्व को सत्यापित करने की आवश्यकता के बिना वस्तुओं की गहराई से एम्बेडेड गुणों तक सुरक्षित पहुंच को व्यवस्थित करने की अनुमति देती हैं। एक नज़र डालें कि यह सुविधा कैसे काम करती है।

सबसे पहले, उस कोड को देखें, जिसे वैकल्पिक श्रृंखलाओं के आगमन से पहले लिखा जाना था।

▍ वैकल्पिक जंजीरों की उपस्थिति से पहले कोड

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
    prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}
if(user && user.address){
 console.log(user.address.zip);
 //600028
}
if(user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4){
 console.log(user.address.prop1.prop2.prop3.prop4.value);
 //sample
}
//    
console.log(user.address.prop102.po);
//Error

जैसा कि आप देख सकते हैं, त्रुटियों की घटना से बचने के लिए, ऐसा लगता है Cannot read property 'po' of undefined, घोंसले के प्रत्येक स्तर पर, उनके अस्तित्व के लिए गुणों की जांच करना आवश्यक है। संस्थाओं के घोंसले की गहराई में वृद्धि के साथ, जाँच की गई संपत्तियों की संख्या भी बढ़ जाती है। इसका मतलब यह है कि प्रोग्रामर को खुद कोड लिखना होता है जो इसे उन गुणों से बचाता है जो एक्सेस किए जाने पर nullया के मूल्यों में चल सकते हैं undefined।

▍ वैकल्पिक जंजीरों की उपस्थिति के बाद कोड

जिस कोड की हमने समीक्षा की, उसे लिखना वैकल्पिक श्रृंखलाओं के आगमन से बहुत आसान हो गया। वस्तुओं के गहराई से एम्बेडेड गुणों के साथ सुरक्षित काम को व्यवस्थित करने के लिए, ऑपरेटर का उपयोग करने के लिए पर्याप्त है ?.। यह हमें स्वतंत्र रूप से nullऔर पर मूल्यों की जांच करने की आवश्यकता से बचाता है undefined।

यहाँ यह कैसा दिखता है:

const user = {
   firstName:"Joseph",
   lastName:"Kuruvilla",
   age:38,
   address:{
      number:"239",
      street:"Ludwig Lane",
      city:"Chennai",
      zip:"600028",
   prop1:{
    prop2:{
     prop3:{
      prop4:{
       value:'sample'
      }
     }
    }
   }
   }
}
console.log(user?.address?.zip);
//600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
//sample
//    
console.log(user?.address?.prop102?.po);
//undefined

अच्छा, क्या यह ठीक नहीं है? इस नवाचार के लिए धन्यवाद, ES2020 ने कोड की बड़ी संख्या से छुटकारा पाना संभव बना दिया।

केवल अशक्त और अपरिभाषित मूल्यों को मान्य करना

केवल nullऔर undefined(Nullish Coalescing) मूल्यों की जाँच करना उन विशेषताओं में से एक है, जिन्होंने प्रस्ताव के स्तर पर संभावनाएं होने पर भी मुझे वास्तव में प्रसन्न किया। मुझे अक्सर उपयुक्त जांच करने के लिए विशेष कार्य लिखने की आवश्यकता होती है।

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

आइए कुछ उदाहरण देखें।

N केवल अशक्त और अपरिभाषित पर मूल्यों की जांच करने की क्षमता तक कोड

हाल ही में, मैं एक ऐसी परियोजना पर काम कर रहा था जिसमें मुझे प्रकाश और अंधेरे विषयों के बीच स्विच करने की कार्यक्षमता को लागू करने की आवश्यकता थी। उसी समय, मुझे नियंत्रण की स्थिति की जांच करनी थी, यह पता लगाना था कि क्या यह मूल्य के अनुरूप है trueया नहीं false। यदि उपयोगकर्ता ने डिफ़ॉल्ट रूप से कोई मान सेट नहीं किया है, तो यह बराबर होना चाहिए true। यहाँ केवल nullऔर केवल मूल्यों की जाँच करने की संभावना से पहले मैंने इस समस्या को कैसे हल किया undefined:

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
  if (darkModePreference || darkModePreference === false) {
    return darkModePreference
  }
  return true
}
getUserDarkModePreference(darkModePreference1) 
// true
getUserDarkModePreference(darkModePreference2) 
// false
getUserDarkModePreference(darkModePreference3) 
// true
getUserDarkModePreference(darkModePreference4) 
// true

Un केवल अशक्त और अपरिभाषित पर मूल्यों की जाँच की संभावना के बाद कोड

एक बार यह सुविधा भाषा में जाँच nullऔर undefinedपर्याप्त ऑपरेटर के लिए दिखाई दी ??। इस मामले में, आप एक सशर्त ऑपरेटर के बिना कर सकते हैं if:

const darkModePreference1 = true
const darkModePreference2 = false
const darkModePreference3 = undefined
const darkModePreference4 = null
const getUserDarkModePreference = (darkModePreference) => {
  return darkModePreference ?? true;
}
getUserDarkModePreference(darkModePreference1) 
// true
getUserDarkModePreference(darkModePreference2) 
// false
getUserDarkModePreference(darkModePreference3) 
// true
getUserDarkModePreference(darkModePreference4) 
// true

यहाँ निम्न होता है: यदि चर darkModePreferenceमें "शून्य" मान है, तो मान लौटाया जाता है true। इससे कोड लिखना आसान हो जाता है, यह कॉम्पैक्ट और समझने में आसान है।

गतिशील आयात

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

उदाहरण के लिए, मान लें कि हमें पीडीएफ प्रारूप में एक निश्चित फ़ाइल लोड करने की कार्यक्षमता को लागू करने की आवश्यकता है।

हमेशा की तरह, इस समस्या को हल करने के लिए पुराने और नए विकल्पों पर विचार करें।

Imports गतिशील आयात के लिए समर्थन से पहले कोड

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

import { exportAsPdf } from './export-as-pdf.js'
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', exportAsPdf);

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

लेकिन अब, ES2020 के लिए धन्यवाद, हमारे पास गतिशील रूप से लोड मॉड्यूल के लिए एक मानक तरीका है, जो हमें बंडलों के बिना करने की अनुमति देता है।

। गतिशील आयात के लिए समर्थन की उपस्थिति के बाद कोड

const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
  import('./export-as-pdf.js')
    .then(module => {
      module.exportAsPdf()
    })
    .catch(err => {
      //      -  
    })
})

जैसा कि आप देख सकते हैं, अब आप केवल उचित मॉड्यूल की आवश्यकता होने पर लोड करके मॉड्यूल के आलसी लोडिंग को व्यवस्थित कर सकते हैं। यह सिस्टम लोड को कम करता है और पेज लोडिंग गति को बढ़ाता है।

निर्माण Promise.allSettled

यदि आपको केवल कुछ कार्रवाई करने की आवश्यकता है यदि सभी वादों को सफलतापूर्वक हल किया गया है, तो आप विधि का उपयोग कर सकते हैं Promise.all()। सच है, इस पद्धति में एक खामी है। यदि कोई कम से कम एक वादा अस्वीकार कर दिया जाता है, तो विधि एक त्रुटि फेंक देगी। इसका मतलब है कि आवश्यक कार्रवाई तब तक नहीं की जाएगी जब तक कि सभी वादे सफलतापूर्वक हल नहीं हो जाते।

आपको इसकी आवश्यकता नहीं हो सकती है। शायद निम्नलिखित परिदृश्य आपको पसंद आएगा: “परिणाम मेरे लिए महत्वपूर्ण नहीं है। मुझे सभी वादों के पूरा होने के बाद कोड को निष्पादित करने की आवश्यकता है। ” इस मामले में, विधि आपके लिए उपयोगी है Promise.allSettled()। अन्य वादों के पूरा होने के बाद ही संबंधित वादा सफलतापूर्वक हल किया जाता है। इससे कोई फर्क नहीं पड़ता कि उन्होंने सफलतापूर्वक या असफल रूप से काम किया है।

। Promise.all निर्माण का उपयोग कर कोड

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))
//got rejected! reason: null

जाहिरा तौर पर, यह Promise.allउसके द्वारा हस्तांतरित वादों में से एक की अस्वीकृति के बाद एक त्रुटि देता है।

। कोड जो Promise.allSettled निर्माण का उपयोग करता है

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

और यहां, हालांकि कुछ वादे खारिज कर दिए जाते हैं, लेकिन यह Promise.allSettledसभी वादों को जारी किए गए परिणामों को वापस कर देता है।

अन्य उल्लेखनीय विशेषताएं

▍ BigInt डेटा प्रकार

नया डेटा प्रकार BigIntआपको उन नंबरों के साथ काम करने की अनुमति देता है जिनकी लंबाई उन संख्याओं की लंबाई से अधिक है जिनके साथ आप जावास्क्रिप्ट में काम कर सकते हैं इससे पहले कि वह ( pow(2,53)-1) दिखाई दे । सच है, यह डेटा प्रकार पहले की भाषा में क्या था के साथ पीछे संगत नहीं है। IEEE 754 मानक, जो जावास्क्रिप्ट में संख्याओं के साथ काम करने का आधार है, उन संख्याओं का समर्थन नहीं करता है जिनके साथ काम करना संभव हैBigInt

Method String.prototyp.matchAll विधि

विधि String.prototype.matchAll()नियमित अभिव्यक्ति से संबंधित है। यह एक पुनरावृत्ति देता है, जिससे आप समूहों सहित नियमित अभिव्यक्ति का उपयोग करके स्ट्रिंग में पाए जाने वाले सभी मैचों के साथ काम कर सकते हैं ।

T वैश्विक संपत्ति GlobalThis

वैश्विक संपत्ति globalThisपर्यावरण के अनुरूप वैश्विक वस्तु का संदर्भ रखती है जिसमें कोड निष्पादित होता है। ब्राउज़र में, वैश्विक ऑब्जेक्ट का प्रतिनिधित्व ऑब्जेक्ट द्वारा किया जाता है window। Node.js में, यह एक ऑब्जेक्ट है global। वेब कार्यकर्ताओं में, यह एक वस्तु है self।

ES2020 के बारे में आपको कौन से नवाचार पसंद हैं?

ES2020 नवाचार जो मुझे वास्तव में पसंद हैं