10 Fitur JavaScript Baru di ES2020 Yang Harus Anda Ketahui

Kabar baik - fitur ES2020 baru sekarang telah diselesaikan! Ini berarti kami sekarang memiliki gagasan lengkap tentang perubahan yang terjadi di ES2020, spesifikasi JavaScript yang baru dan lebih baik. Jadi mari kita lihat apa saja perubahan itu.

# 1: BigInt

BigInt, salah satu fitur yang paling dinantikan di JavaScript, akhirnya hadir. Ini sebenarnya memungkinkan pengembang untuk memiliki representasi integer yang jauh lebih besar dalam kode JS mereka untuk pemrosesan data untuk penanganan data.

Saat ini jumlah maksimum yang dapat Anda simpan sebagai bilangan bulat di JavaScript adalah pow(2, 53) - 1. Tapi BigInt sebenarnya memungkinkan Anda untuk melampaui itu.  

Namun, Anda perlu nmenambahkan di akhir nomor, seperti yang Anda lihat di atas. Ini nmenunjukkan bahwa ini adalah BigInt dan harus diperlakukan berbeda oleh mesin JavaScript (oleh mesin v8 atau mesin apa pun yang digunakannya).

Peningkatan ini tidak kompatibel ke belakang karena sistem angka tradisional adalah IEEE754 (yang tidak dapat mendukung angka sebesar ini).

# 2: Impor dinamis

Impor dinamis di JavaScript memberi Anda opsi untuk mengimpor file JS secara dinamis sebagai modul di aplikasi Anda secara native. Ini seperti yang Anda lakukan dengan Webpack dan Babel saat ini.

Fitur ini akan membantu Anda mengirimkan kode sesuai permintaan, lebih dikenal sebagai pemisahan kode, tanpa overhead webpack atau bundler modul lainnya. Anda juga dapat memuat kode secara bersyarat dalam blok if-else jika Anda mau.

Hal baiknya adalah Anda benar-benar mengimpor modul, sehingga tidak pernah mencemari namespace global.

# 3: Penggabungan Nullish

Penggabungan nullish menambahkan kemampuan untuk benar-benar memeriksa nullishnilai alih-alih falseynilai. Apa perbedaan antara nullishdan falseynilai, Anda mungkin bertanya?

Dalam JavaScript, banyak nilai-nilai falsey, seperti string kosong, angka 0, undefined, null, false, NaN, dan sebagainya.

Namun, sering kali Anda mungkin ingin memeriksa apakah suatu variabel nullish - apakah itu salah undefinedatau null, seperti saat tidak masalah untuk variabel memiliki string kosong, atau bahkan nilai palsu.

Jika demikian, Anda akan menggunakan operator penggabungan nullish baru, ??

Anda dapat dengan jelas melihat bagaimana operator OR selalu mengembalikan nilai kebenaran, sedangkan operator nullish mengembalikan nilai non-nulllish.

# 4: Rantai Opsional

Sintaks perangkaian opsional memungkinkan Anda mengakses properti objek yang sangat bertingkat tanpa khawatir apakah properti tersebut ada atau tidak. Jika itu ada, bagus! Jika tidak, undefinedakan dikembalikan.

Ini tidak hanya bekerja pada properti objek, tetapi juga pada pemanggilan fungsi dan array. Sangat nyaman! Berikut contohnya:

# 5: Promise.allSettled

The Promise.allSettledMetode menerima array Janji dan hanya menyelesaikan ketika semua dari mereka menetap - baik diselesaikan atau ditolak.

Ini tidak tersedia secara native sebelumnya, meskipun beberapa implementasi mirip seperti racedan alltersedia. Ini membawa "Jalankan semua janji - Saya tidak peduli dengan hasilnya" secara asli ke JavaScript.

# 6: String # matchAll

matchAlladalah metode baru yang ditambahkan ke Stringprototipe yang terkait dengan Ekspresi Reguler. Ini mengembalikan sebuah iterator yang mengembalikan semua grup yang cocok satu demi satu. Mari kita lihat contoh singkatnya:

# 7: globalThis

Jika Anda menulis beberapa kode JS lintas platform yang dapat berjalan di Node, di lingkungan browser, dan juga di dalam pekerja web, Anda akan kesulitan mendapatkan objek global.

Ini karena ini windowuntuk browser, globaluntuk Node, dan selfuntuk pekerja web. Jika ada lebih banyak runtime, objek global juga akan berbeda untuk mereka.

Jadi, Anda harus memiliki implementasi Anda sendiri untuk mendeteksi runtime dan kemudian menggunakan global yang benar - yaitu, hingga sekarang.

ES2020 menghadirkan kepada kami globalThisyang selalu mengacu pada objek global, di mana pun Anda menjalankan kode:

# 8: Ekspor Ruangnama Modul

Dalam modul JavaScript, sintaks berikut sudah dapat digunakan:

import * as utils from './utils.mjs'

Namun, tidak exportada sintaksis simetris , sampai sekarang:

export * as utils from './utils.mjs'

Ini sama dengan yang berikut:

import * as utils from './utils.mjs' export { utils }

# 9: Urutan for-in didefinisikan dengan baik

Spesifikasi ECMA tidak menentukan urutan mana yang for (x in y)  harus dijalankan. Meskipun browser menerapkan urutan yang konsisten sebelumnya sendiri sebelum sekarang, ini telah distandarisasi secara resmi di ES2020.

# 10: import.meta

The import.metaobjek diciptakan oleh implementasi ECMAScript, dengan nullprototipe.

Pertimbangkan modul, module.js:

Anda dapat mengakses informasi meta tentang modul menggunakan import.metaobjek:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Ini mengembalikan objek dengan urlproperti yang menunjukkan URL dasar modul. Ini akan menjadi URL dari mana skrip diperoleh (untuk skrip eksternal), atau URL dasar dokumen dari dokumen yang memuat (untuk skrip sebaris).

Kesimpulan

Saya suka konsistensi dan kecepatan komunitas JavaScript telah berkembang dan terus berkembang. Sungguh menakjubkan dan benar-benar luar biasa melihat bagaimana JavaScript berasal dari bahasa yang dicemooh, 10 tahun berlalu, menjadi salah satu bahasa terkuat, paling fleksibel, dan serbaguna sepanjang masa saat ini.

Apakah Anda ingin mempelajari JavaScript dan bahasa pemrograman lainnya dengan cara yang benar-benar baru? Masuk ke platform baru untuk pengembang yang sedang saya kerjakan untuk mencobanya hari ini!

Apa fitur favorit Anda dari ES2020? Ceritakan tentang itu dengan men-tweet dan terhubung dengan saya di Twitter dan Instagram!

Ini adalah posting blog yang dibuat dari video saya yang bertopik sama. Ini akan sangat berarti bagi saya jika Anda bisa menunjukkan cinta!