Baru-baru ini, Chaining Opsional dan nilai atribut default ( Nullish Coalescing ) telah pindah ke langkah keempat terakhir dari proses TC39.
Dalam praktiknya, ini berarti bahwa inovasi ini dan lainnya akan menjadi bagian dari standar JavaScript pada tahun 2020 ini. Kami akan mempertimbangkannya di artikel ini.
Anda dapat melacak dukungan browser di sini ("fitur 2020") - kira-kira. perev.
Menggunakan sticky atau ekspresi reguler global, ketika Anda perlu menangkap beberapa grup pada baris yang sama, mungkin tidak sepele.
String.prototype.match tidak mengembalikan grup yang ditangkap di hadapan bendera global, dan tanpa itu Anda hanya bisa mendapatkan kecocokan penuh pertama untuk templat dan grupnya.
Contoh:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; const results = str.match(regexp); console.log(results);
Hasil dengan bendera "g"
Hasilnya tanpa bendera "g"Menggunakan String.prototype.matchAll memastikan bahwa semua kecocokan dan grup mereka dikembalikan.
Contoh:
let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; let array = [...str.matchAll(regexp)]; console.log(array);
Hasil:
Sebelum BigInt, nilai terbesar yang diwakili oleh Angka adalah 2⁵³-1 (MAX_SAFE_INTEGER). JavaScript sekarang akan memiliki primitif yang dapat melampaui batas.
Anda dapat membuat BigInt dengan menambahkan 'n' ke angka atau dengan menggunakan fungsi BigInt ().
Contoh:
let bigInt = 4n console.log(bigInt * bigInt)
- BigInt tidak setara dengan Number , tetapi dapat dilemparkan ke yang terakhir.
- Saat melakukan operasi seperti divisi, hasilnya akan dibulatkan ke keseluruhan terdekat.
- Tidak dapat digunakan dengan Angka tanpa tipe casting.
Mencoba menambahkan BigInt dengan nomor ...
let bigInt = 4n + 2 console.log(bigInt)
... menghasilkan pengecualian:
Mengakses objek global di dunia JavaScript selalu memusingkan. Anda harus terbiasa dengan sintaks khusus untuk lingkungan, yang menciptakan kesulitan yang tidak perlu saat menulis kode portabel dan membuatnya perlu menggunakan sesuatu seperti getGlobal.
Contoh:
var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('no global object found'); }; var globals = getGlobal();
Dengan munculnya globalThis, Anda dapat berhenti memikirkan lingkungan dan menyatukan objek global.
Contoh:
globalThis.someFunction = () => 'hello' console.log(globalThis.someFunction())
Misalkan Anda memiliki beberapa janji, dan Anda ingin melakukan sesuatu setelah mereka selesai (tidak masalah apakah itu berhasil atau tidak). Promise.allSettled adalah untuk tujuan ini.
Contoh:
const fulfilledPromise = Promise.resolve("success"); const rejectedPromise = Promise.reject("error") const promises = [fulfilledPromise, rejectedPromise]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result)));
Hasil:
Ingin memuat modul saat runtime, tergantung pada kondisi tertentu? Sekarang ini bisa dilakukan tanpa perpustakaan pihak ketiga.
Cukup memanggil fungsi impor , yang akan mengembalikan janji.
Contoh:
import("some_module") .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Tidak seperti impor statis, di mana Anda perlu menentukan nama modul secara eksplisit, selama impor dinamis Anda dapat, misalnya, meneruskan templat ke fungsi.
Contoh menggunakan templat:
import(`${some_module}.js`) .then(module => { module.doSomething(); }) .catch(err => { console.error(err.message); });
Ketika Anda perlu mendapatkan atribut atau nilai default, jika itu null atau tidak terdefinisi , kami biasanya menggunakan operator '||'.
Sebelum Nullish bergabung:
const response = someResponse.properties.mayBeUndefined || 'Response';
Bayangkan, bagaimanapun, bahwa atribut memiliki nilai "salah".
Masalah menggunakan '||':
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined || 'Response'; console.log(response)
Hasil:
Ini adalah perilaku yang tidak diinginkan. Dalam hal ini, kami membutuhkan nilai atribut, bukan nilai default.
Dengan penggabungan Nullish masalah ini tidak akan terjadi. Nilai default akan dikembalikan hanya untuk atribut null atau tidak terdefinisi .
Menggunakan Nullish penggabungan:
const someResponse = {properties: { mayBeUndefined: ''}} const response = someResponse.properties.mayBeUndefined ?? 'Response'; console.log(response)
Hasil:
Untuk mengakses sub-atribut, kita perlu memastikan bahwa atribut di atas ada. Sejauh ini, keberadaan masing-masing atribut berlebihan perlu diperiksa secara manual.
Sebelum Chaining Opsional:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty ? someObj.NotOtherProperty.name: undefined; console.log(property);
Dengan munculnya Chaining Opsional , Anda dapat menggunakan Operator '?' untuk akses opsional ke sub-atribut. Kode di bawah ini setara dengan kode di atas.
Menggunakan Chaining Opsional:
const someObj = { property: 'prop', otherProperty: { name: 'prop2' } }; const property = someObj.NotOtherProperty?.name; console.log(property);
Opsional Chaining membuat kode lebih bersih, terutama jika ada banyak atribut dalam string.
Kesimpulan
Anda dapat mencoba menjalankan contoh dari artikel di konsol: beberapa di antaranya sudah diterapkan di versi browser terbaru, yang lain kemungkinan akan segera diimplementasikan. Dengan satu atau lain cara, sudah mungkin untuk mulai menghubungkan kemungkinan dari artikel sebagai bagian dari bahasa 2020.