Get best of the week

Inovasi ES2020 yang sangat saya sukai

JavaScript telah berkembang sangat cepat dalam beberapa tahun terakhir. Ini terutama berlaku untuk periode setelah rilis standar ES6 pada tahun 2015. Sejak itu, banyak fitur hebat telah muncul dalam bahasa ini. Banyak hal baru telah diusulkan untuk dimasukkan dalam standar ES2020. Daftar akhir fitur telah dibentuk, tampilan yang dapat diharapkan dalam standar setelah disetujui. Ini adalah berita bagus untuk semua penggemar JS. Penulis artikel, yang terjemahannya kami terbitkan hari ini, mengatakan bahwa di antara peluang-peluang ini ada yang sangat ia sukai. Sebelum mereka muncul, jauh lebih sulit baginya untuk menulis kode dalam situasi di mana mereka berlaku. Menurutnya, jika mereka muncul dalam bahasa sebelumnya, mereka akan menyelamatkannya banyak waktu dan usaha.





Rantai opsional


Chaining Opsional, bagi saya pribadi, adalah salah satu fitur paling menarik dari standar ES2020. Saya telah menulis banyak program di mana fitur ini akan sangat berguna. 

Rantai opsional memungkinkan Anda untuk mengatur akses aman ke properti yang tertanam dalam dari objek tanpa perlu memverifikasi keberadaan masing-masing. Lihatlah bagaimana fitur ini bekerja.

Pertama, lihat kode yang harus ditulis sebelum munculnya rantai opsional.

▍ Kode sampai rantai opsional muncul


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

Seperti yang Anda lihat, untuk menghindari terjadinya kesalahan, tampaknya Cannot read property 'po' of undefined, perlu, pada setiap tingkat bersarang, untuk memeriksa properti untuk keberadaannya. Dengan peningkatan kedalaman bersarang entitas, jumlah properti yang diperiksa juga meningkat. Ini berarti bahwa programmer itu sendiri harus menulis kode yang melindunginya dari properti yang, ketika diakses, dapat berjalan ke nilai-nilai nullatau undefined.

▍ Kode setelah munculnya rantai opsional


Menulis kode seperti yang baru saja kami ulas membuatnya lebih mudah dengan munculnya rantai opsional. Untuk mengatur pekerjaan yang aman dengan properti yang tertanam dalam dari objek, cukup menggunakan operator ?.. Ini menyelamatkan kita dari kebutuhan untuk secara independen memeriksa nilai nulldan undefined.

Begini tampilannya:

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

Baiklah, tidak apa-apa? Berkat inovasi ini, ES2020 memungkinkan untuk menyingkirkan sejumlah besar baris kode.

Hanya memvalidasi nilai-nilai nol dan tidak terdefinisi


Memeriksa nilai hanya pada nulldan undefined(Nullish Coalescing) adalah salah satu fitur yang sangat menyenangkan saya bahkan ketika kemungkinan berada pada tahap proposal. Saya sering menemukan kebutuhan untuk menulis fungsi khusus untuk melakukan pemeriksaan yang sesuai.

JavaScript dikenal memiliki arti "salah" dan "benar". Sekarang kita dapat mengatakan bahwa nilai "nol" ditambahkan padanya. Nilai-nilai ini termasuk nulldan undefined. Dengan istilah JavaScript dari "false" adalah string kosong, angka 0, nilai-nilai undefined, null, false, NaN. Misalnya, ungkapan tertentu untuk memeriksa nilai "kepalsuan" akan bekerja pada string kosong, dan pada nilaiundefined, dan banyak lagi tentang apa. Dan ungkapan untuk memeriksa nilai apakah itu "nol" akan kembali truehanya untuk nulldan undefined. Mungkin kesempatan ini tampaknya tidak begitu indah bagi Anda secara pribadi, tetapi, pada kenyataannya, ini sangat, sangat penting.

Mari kita lihat beberapa contoh.

▍ Kode hingga kemampuan untuk memeriksa nilai hanya pada null dan undefined


Baru-baru ini, saya sedang mengerjakan sebuah proyek di mana saya perlu menerapkan fungsi peralihan antara tema terang dan gelap. Pada saat yang sama, saya harus memeriksa status kontrol, mencari tahu apakah itu sesuai dengan nilai trueatau false. Jika pengguna tidak menetapkan nilai apa pun, secara default, itu harus sama true. Inilah cara saya memecahkan masalah ini sebelum kemungkinan memeriksa nilai hanya pada nulldan 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

▍ Kode setelah kemungkinan memeriksa nilai hanya pada null dan undefined


Setelah fitur ini muncul dalam bahasa untuk memeriksa nulldan undefinedoperator yang memadai ??. Dalam hal ini, Anda dapat melakukannya tanpa operator bersyarat 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

Berikut ini terjadi: jika variabel darkModePreferenceberisi nilai "nol", maka nilai tersebut dikembalikan true. Ini membuatnya lebih mudah untuk menulis kode, ringkas dan mudah dimengerti.

Impor dinamis


Impor Dinamis berkontribusi pada kinerja aplikasi yang lebih efisien. Teknologi ini memungkinkan Anda untuk mengimpor file JS secara dinamis, dalam bentuk modul, tanpa melibatkan alat tambahan. Apalagi, jika modul tidak diperlukan, maka itu tidak diimpor. Sebelum ES2020, modul diimpor terlepas dari apakah mereka digunakan oleh aplikasi atau tidak.

Sebagai contoh, misalkan kita perlu mengimplementasikan fungsionalitas memuat file tertentu dalam format PDF.

Pertimbangkan, seperti biasa, opsi lama dan baru untuk menyelesaikan masalah ini.

▍ Kode sebelum dukungan untuk impor dinamis


Berdasarkan situasi nyata, kita dapat berharap bahwa kemampuan untuk mengunduh materi dalam format PDF tidak akan digunakan oleh semua pengunjung halaman. Tetapi modul yang sesuai, bagaimanapun, perlu diimpor ke dalam kode. Ini berarti bahwa modul, apakah perlu atau tidak, akan dimuat ketika halaman dimuat.

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

Ini menciptakan beban tambahan pada sistem, yang dapat difasilitasi dengan menggunakan pemuatan modul yang malas. Ini dapat dilakukan dengan bantuan teknologi berbagi kode, yang tersedia di webpack atau di modul loader lainnya (dan penggunaannya sendiri berarti menghabiskan sejumlah sumber daya sistem tertentu).

Tetapi sekarang, berkat ES2020, kami memiliki cara standar untuk memuat modul secara dinamis, yang memungkinkan kami melakukannya tanpa bundler.

▍ Kode setelah munculnya dukungan untuk impor dinamis


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

Seperti yang Anda lihat, sekarang Anda dapat mengatur pemuatan modul yang malas dengan memuat hanya saat modul yang sesuai diperlukan. Ini mengurangi beban sistem dan meningkatkan kecepatan pemuatan halaman.

Bina Janji


Jika Anda perlu melakukan beberapa tindakan hanya jika semua janji telah berhasil diselesaikan, Anda dapat menggunakan metode ini Promise.all(). Benar, metode ini memiliki satu kelemahan. Metode ini akan melempar kesalahan jika setidaknya satu janji yang diterimanya ditolak. Ini berarti bahwa tindakan yang diperlukan tidak akan dilakukan sampai semua janji berhasil diselesaikan.

Anda mungkin tidak membutuhkan ini. Mungkin skenario berikut ini cocok untuk Anda: “Hasilnya tidak penting bagi saya. Saya membutuhkan kode yang akan dieksekusi setelah semua janji dipenuhi. " Dalam hal ini, metode ini bermanfaat bagi Anda Promise.allSettled(). Janji yang sesuai berhasil diselesaikan hanya setelah selesainya janji-janji lainnya. Tidak masalah jika mereka telah berhasil atau tidak berhasil.

▍ Kode menggunakan konstruksi 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

Rupanya, itu Promise.allmemberikan kesalahan setelah penolakan terhadap salah satu janji yang ditransfer ke sana.

▍ Kode yang menggunakan konstruksi 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 ...}
//]

Dan di sini, meskipun beberapa janji ditolak, itu Promise.allSettledmengembalikan hasil yang dikeluarkan oleh semua janji yang ditransfer ke sana.

Fitur penting lainnya


▍ tipe data BigInt


Tipe data baru BigIntmemungkinkan Anda untuk bekerja dengan angka yang panjangnya melebihi panjang angka yang bisa Anda gunakan dalam JavaScript sebelum muncul ( pow(2,53)-1). Benar, tipe data ini tidak kompatibel dengan apa yang ada dalam bahasa sebelumnya. Standar IEEE 754, yang merupakan dasar untuk bekerja dengan angka dalam JavaScript, tidak mendukung angka yang mungkin untuk bekerja denganBigInt

▍ Metode String.prototype.matchAll


Metode String.prototype.matchAll()ini terkait dengan ekspresi reguler. Ini mengembalikan iterator, memungkinkan Anda untuk bekerja dengan semua kecocokan yang ditemukan dalam string menggunakan ekspresi reguler , termasuk grup .

▍ Properti global global


Properti global globalThismemegang referensi ke objek global yang sesuai dengan lingkungan di mana kode dieksekusi. Di browser, objek global diwakili oleh objek window. Di Node.js, ini adalah objek global. Pada pekerja web, ini adalah objek self.

Inovasi apa yang paling Anda sukai dari ES2020?

More articles:


All Articles