Fitur JavaScript Baru yang Diharapkan Harus Anda Ketahui

Sejak rilis standar ECMAScript 2015 (juga disebut ES6), JavaScript telah berubah dan meningkat secara serius. Ini adalah berita yang sangat bagus untuk semua pengembang JS. Apalagi sekarang versi ECMAScript baru dirilis setiap tahun. Mungkin Anda tidak terlalu memperhatikan apa yang muncul dalam versi standar terbaru, yang dirilis pada Juni 2019. Penulis artikel ini, terjemahan yang kami terbitkan hari ini, ingin menceritakan secara singkat tentang inovasi JavaScript, dan tentang apa yang dapat diharapkan dalam versi standar ECMAScript berikutnya.



Peluang yang usulannya berada di tahap ketiga persetujuan (Tahap 3) akan disebutkan di sini. Ini berarti bahwa mereka cenderung muncul dalam versi standar ECMAScript berikutnya, tetapi ini tidak dapat dikonfirmasi dengan kepastian absolut. Berikut adalah repositori tempat Anda dapat menemukan informasi tentang proposal yang berada pada tahap persetujuan yang berbeda.

Fitur ECMAScript 2019 (ES10)

Standar ES10 memiliki banyak fitur baru. Di sini kita akan mempertimbangkan hanya beberapa dari mereka. Yaitu, beberapa metode array baru.

▍ Metode Array.prototype.flat

Metode ini memungkinkan Anda untuk membuat array, yang mencakup array lainnya, lebih "datar", "mengompresi" mereka ke level kedalaman tertentu.

const array = [1, 2, [3, 4]]; array.flat(); // [1, 2, 3, 4]; 

Ini adalah fitur yang sangat berguna, terutama dalam kasus di mana Anda perlu bekerja dengan array bersarang. Jika kedalaman susunan array dalam struktur data melebihi 1, maka satu panggilan ke metode flat tidak dapat membuat array sepenuhnya "flat". Metode ini menerima depth parameter opsional, yang memungkinkan Anda menentukan berapa banyak level bersarang dimensi array yang diproses harus dikurangi.

 //   const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]]; crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]; // ,  flat,     

Semakin dalam array, semakin banyak sumber daya komputasi akan dibutuhkan untuk memprosesnya. Harap dicatat bahwa IE dan Edge tidak mendukung fitur ini.

▍ Metode Array.prototype.flatMap

Metode ini pertama-tama memproses elemen-elemen array menggunakan fungsi yang diteruskan ke sana, dan kemudian mengubah array menjadi struktur datar.

 const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"] 

Perbedaan antara flat dan flatMap adalah Anda dapat meneruskan fungsi Anda sendiri ke metode flatMap yang mengubah elemen-elemen array asli. Selain itu, flatMap , tidak seperti flat , "memunculkan" elemen array hanya 1 level. Metode ini mengembalikan array baru. Ini dapat berguna dalam kasus-kasus tersebut ketika, sebelum Anda membuat array "flat" tertentu, Anda perlu memproses elemen-elemennya.

Fitur JS Baru pada Persetujuan Tahap 3

Pada tahap ketiga koordinasi ada banyak proposal baru yang menarik untuk memperluas dan meningkatkan bahasa. Mari kita pertimbangkan beberapa di antaranya.

▍ Pemisah angka digit

Itu terjadi pada Anda: menulis angka panjang dalam variabel dan meragukan ejaan yang benar? Kalimat tersebut memungkinkan kita untuk memisahkan bit angka dengan garis bawah. Ini membuatnya mudah untuk bekerja dengan angka.

 1_000_000_000      // ,   101_475_938.38     //     -     let fee = 123_00;    // $123 (, , 12300 ) let fee = 12_300;    // $12,300 (  !) let amount = 12345_00; // 12,345 (,  , 1234500 ) let amount = 123_45.00; // 12345 (, -  ) let amount = 1_234_500; // 1,234,500 let budget = 1_000_000_000_000; //   `budget`?  - 1 ! // // : console.log(budget === 10 ** 12); // true 

Setiap pengembang, setelah menerima fitur ini, akan memutuskan sendiri apakah akan menggunakan pemisah pembuangan atau tidak. Tapi satu hal yang pasti: fitur ini dapat mengurangi ketidaknyamanan yang terkait dengan penghitungan angka dalam jumlah besar.

▍Menggunakan menunggu di tingkat atas kode

Menggunakan kata kunci yang await di tingkat atas kode memungkinkan modul untuk bertindak sebagai fungsi asinkron besar. Karena fitur ini, modul ECMAScript dapat mengharapkan beberapa sumber muncul. Ini mengarah pada fakta bahwa modul lain yang mengimpornya akan menunggu sampai tubuh modul yang diimpor siap untuk bekerja.

Alasan untuk fitur ini adalah ketika modul diimpor yang memiliki fungsi yang dideklarasikan dengan async , output dari fungsi ini akan tidak undefined .

Contoh berikut menunjukkan dua file. Mungkin akan undefined dalam output jika fungsi dipanggil sebelum tugas yang diwakili oleh janji selesai.

 // awaiting.mjs import { process } from "./some-module.mjs"; const dynamic = import(computedModuleSpecifier); const data = fetch(url); export const output = process((await dynamic).default, await data); // usage.mjs import { output } from "./awaiting.mjs"; export function outputPlusValue(value) { return output + value } console.log(outputPlusValue(100)); setTimeout(() => console.log(outputPlusValue(100), 1000); 

Semuanya akan berhenti di awaiting.js sampai awaiting.js terselesaikan di awaiting.js.

▍Operator ?? dan memeriksa nilai hanya pada null dan undefined

Mungkin, di antara semua penawaran Tahap 3, ini adalah yang paling berguna. Kita sering harus menulis sesuatu seperti ini:

 const obj = {  name: 'James' }; const name = obj.name || 'Jane'; // James 

Jika obj.name diwakili oleh beberapa nilai palsu, maka string Jane menjadi name . Akibatnya, name tidak akan menjadi sesuatu yang undefined . Tetapi masalahnya adalah string kosong dalam kasus ini akan dianggap sebagai nilai yang salah. Jika ini diperhitungkan, kode ini harus ditulis ulang sebagai berikut:

 const name = (obj.name && obj.name !== '') || 'Jane'; 

Tidak nyaman menulis seperti itu sepanjang waktu. Operator ?? (dua tanda tanya) hanya memungkinkan memeriksa nilai null dan undefined :

 const response = {  settings: {    nullValue: null,    height: 400,    animationDuration: 0,    headerText: '',    showSplashScreen: false  } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // : 'some other default' const nullValue = response.settings.nullValue ?? 'some other default'; // : 'some other default' const headerText = response.settings.headerText ?? 'Hello, world!'; // : '' const animationDuration = response.settings.animationDuration ?? 300; // : 0 const showSplashScreen = response.settings.showSplashScreen ?? true; // : false 

▍Operator ?. dan rantai opsional

Saran ini dekat dengan yang baru saja ditinjau, menggabungkan cek null dan undefined . Diketahui bahwa pengguna TypeScript tertarik pada fitur ini.
Pertimbangkan sebuah contoh:

 const city = country && country.city; // undefined  city   

Untuk sampai ke properti city dari objek country , Anda perlu memeriksa keberadaan objek country dan keberadaan properti city di dalamnya.

Dengan menggunakan operator ?. (tanda tanya dan titik) kode ini dapat dikonversi seperti ini:

 const city = country?.city; // undefined  city   

Fitur ini tampaknya berguna dalam situasi seperti ini:

 import { fetch } from '../yourFetch.js'; (async () => {  const res = await fetch();  // res && res.data && res.data.cities || undefined  const cities = res?.data?.cities; })(); 

▍ Metode Janji

Metode Promise.any menerima objek Promise.any berisi objek janji, dan mengembalikan janji yang berhasil diselesaikan ketika setidaknya satu dari objek janji yang diteruskan ke itu berhasil diselesaikan. Jika semua objek janji ditolak, ia akan mengembalikan array yang berisi informasi tentang alasan penolakannya.

Beginilah cara menggunakan Promise.any dengan konstruk async / menunggu seperti:

 try {  const first = await Promise.any(promises);  //      . } catch (error) {  //    . } 

Inilah hal yang sama diimplementasikan menggunakan janji-janji:

 Promise.any(promises).then(  (first) => {    //      .  },  (error) => {    //    .  } ); 

JavaScript sudah memiliki .race , .race , .race , tetapi metode serupa. any , tidak. Sebagai hasilnya, kami memiliki peluang baru yang melengkapi yang sudah ada dan mungkin bermanfaat dalam situasi tertentu. Terlepas dari kenyataan bahwa proposal ini sudah pada tahap ketiga persetujuan, itu mungkin tidak dimasukkan dalam edisi berikutnya dari standar ECMAScript karena perlu pengujian tambahan.

Ringkasan

Ada banyak saran menarik untuk mengembangkan JavaScript yang berada di tahap ketiga persetujuan. Akan menarik untuk melihatnya dalam standar ES11 dan ES12. Tentu saja, tidak mungkin ada orang yang akan menggunakan semuanya, tetapi beberapa dari mereka pasti akan menemukan aplikasi yang luas dan akan berkontribusi pada pertumbuhan kualitas kode JS.

Pembaca yang budiman! Apakah Anda sudah menggunakan fitur JavaScript yang hampir siap untuk disertakan dalam versi standar berikutnya?