5 Fitur JavaScript Yang Mungkin Belum Pernah Kamu Gunakan

Survey 2022 The State of JavaScript keluar beberapa minggu kemarin. Survey tersebut sudah bisa dibuktikan menjadi test lakmus yang menarik tentang arah JavaScript, dan tempat berkembang biak untuk pengembang untuk melampiaskan rasa frustrasi mereka pada Angular.

Satu sisi yang bagus sekali menyorot fitur JavaScript (ish) baru yang tidak pernah dipakai atau tidak pernah didengarkan oleh beberapa pengembang. Bila Anda membaca ini, kemungkinan, Anda mungkin saja tidak mengetahui beberapa fitur ini.

Jadi , bukannya terintimidasi oleh alat dan terminologi baru (sudah pasti !), Saya akan memberi versi TLDR (terlalu panjang; tidak dibaca) dari 5 fitur yang kurang dikenali di JavaScript.

1) Promise.allSettled() (37,7% tak pernah mendengarnya)

Promise.allSettled() ialah sistem statis yang menerima janji yang bisa diulang (mis. Array). Contoh berikut ini:

const promise1 = Promise.resolve(1)
const promise2 = Promise.reject(new Error("This was rejected!"))
const promise3 = Promise.resolve(5)
const allPromises = [promise1, promise2, promise3]

Promise.allSettled(allPromises).then(
  results =>
    // perform additional logic here
    results.forEach(result => {
      console.log(result)
    })
)

// Output:
// {status: 'fulfilled', value: 1}
// {status: 'rejected', reason: Error: This was rejected!}
// {status: 'fulfilled', value: 5}

Kasus penggunaan utama Promise.allSettled() untuk menangani beberapa pekerjaan asinkron mandiri. Ini memungkinkan Anda untuk mengetahui hasil dari setiap pekerjaan, dan tindak lanjuti dengan logika tambahan apa pun.

Ini serupa dengan Promise.all(), perbedaan utamanya ialah Promise.all() segera menolak saat salah satu dari promise menolak. Bila kita mengganti code di atas dengan Promise.all() sebagai gantinya, kita akan memperoleh output seperti berikut:

const promise1 = Promise.resolve(1)
const promise2 = Promise.reject(new Error("This was rejected!"))
// ···

Promise.all(allPromises).then(
  results =>
    results.forEach(result => {
      console.log(result)
    }),
  error => {
    // promise2 rejects
    // thus, promise.all() will immediately reject -> handle error here
    console.log(`At least one promise failed! \n ${error}`)
  }
)

// Output:
// At least one promise failed! 
// Error: This was rejected!

Gunakan Promise.allSettled() saat:

Anda perlu mengetahui hasil akhir dari semua janji

pekerjaan independen satu sama lain (tidak ada logika dependen)

Gunakan Promise.all() saat:

Anda ingin segera menolak salah satu janji yang ditolak

pekerjaan saling bergantung satu sama lain

2) Numerical Separator (49,7% tak pernah mendengarnya)

Pemisah Numerik memungkinkan kita memakai garis bawah (_, U+005F) untuk menulis angka besar secara lebih ramah manusia. Lampirkan garis bawah untuk membantu memisahkan angka yang panjang, khususnya saat menghadapi banyak angka yang berulang.

Disorot berikut ini ialah beberapa penggunaan pemisah numerik yang benar.

1_000_000_000_000
1_050.95
0b1010_0001_1000_0101 // A binary integer literal with its bits grouped per nibble:
0xA0_B0_C0 // A hexadecimal integer literal with its digits grouped by byte
1_000_000_000_000_000_000_000n // A BigInt literal with its digits grouped per thousand

Dalam contoh ini, kami menggunakan pemisah numerik sebagai pemisah seribu:

const randomNum = 1000 + 1_000
console.log(randomNum) // 2000

const anotherRandomNum = 3_001
console.log(randomNum + anotherRandomNum) // 5001

3) Rational Assignment (45,8% tak pernah mendengarnya)

Catatan: asumsikan pengetahuan mengenai evaluasi rasional DAN arus pendek

Penugasan Rasional (&&=) diwakili oleh sintaks ini:

x &&= y

Ini akan menetapkan nilai y ke x hanya jika x benar.

Sisi rasional AND dari sintaks akan mengalami hubungan pendek, maknanya bisa ditulis ulang dalam sintaks yang lebih panjang sebagai:

x && (x = y);

Mempraktikkannya berikut di bawah ini:

const scores = {
      react: 95,
      vue: 90,
      angular: 0,
    };
      
console.log(scores.react); // 95
      
// Changing the value using logical AND assignment operator
scores.react &&= 100;
      
// Value changed because scores.react is truthy
console.log(scores.react); // 100
      
console.log(scores.angular); // 0
      
scores.angular &&= 50;
     
// Value remains unchanged because scores.angular is falsy
console.log(scores.angular); // 0

4) Temporal (73,2% tak pernah mendengarnya)

Temporal adalah (belum) API tanggal/waktu lain untuk JavaScript. Tetapi, ini menarik, karena sekarang ini (di saat penulisan) pada proposal tahapan 3, yang berarti kemungkinan akan menjadi bagian dari standard JavaScript resmi dalam waktu dekat.

Menggunakan Tanggal dalam JavaScript selalu merepotkan, itulah penyebab banyak perpustakaan tanggal/waktu sekarang ini berkembang cepat di ekosistem (Luxon, Date-fns, Datejs, untuk beberapa nama).

Temporal mempunyai tujuan untuk memperbaiki ini, menggunakan Object global yang bertindak sebagai ruang nama (serupa dengan Matematika), dan menghadirkan API tanggal/waktu yang modern dan gampang digunakan ke JavaScript di luar kotak. Ini berarti kita tak lagi membutuhkan pustaka tanggal/waktu eksternal.

Saya tidak menguraikan karena document API lumayan panjang, tapi tidak boleh ragu untuk memeriksanya di sini.

5) Error.prototype.cause (72,7% tak pernah mendengarnya)

Ini bermanfaat untuk pengembang Node.js — fitur ini memungkinkan kami untuk melampirkan penyebab spesifik kekeliruan kami, yang mengarah pada proses debug yang lebih gampang.

Umumnya, debugging itu merepotkan karena kita tidak paham harus mulai dari mana! Memiliki "penyebab kekeliruan" membantu memberikan semakin banyak konteks seputar asal mula kekeliruan. Dengan merantai kekeliruan, kita bisa menangkap dan melemparkan kembali kesalahan, menghasilkan log kekeliruan yang lebih spesifik sambil tetap mempunyai akses ke kekeliruan aslinya.

// method #1
function readFiles(filePath) {
  try {
    const text = readText(filePath)
    const json = JSON.parse(text)
    return processJson(json)
  } catch (error) {
    throw new Error(`Error while processing ${filePath}`)
  }
}

// method #2
function readFilesWithErrorCause(filePath) {
  try {
    // ···
  } catch (error) {
    throw new Error(`Error while processing ${filePath}`, { cause: error })
  }
}

Dalam metode #1, pesan kesalahan kita akan terlihat seperti ini:

Error: Error while processing [FILEPATH]

Dalam metode #2, pesan kesalahan kami yang disempurnakan akan muncul seperti ini:

Error: Error while processing [FILEPATH]
   [cause]: Error: Cannot open file [FILEPATH]: No such file or directory

Melampirkan penyebab dibalik kekeliruan memberikan konteks tambahan seputar kekeliruan, dan meningkatkan keterbacaan log kekeliruan. Ini benar-benar membantu saat Anda memiliki banyak kekeliruan dan menjadi sulit untuk mengidentifikasi di mana satu kekeliruan dimulai dan yang lain berakhir.

Ini ialah contoh yang paling sederhana. Anda bisa memakainya untuk penanganan kekeliruan yang lebih kompleks dengan menambahkan beberapa tingkat kekeliruan, yang mengakibatkan log kekeliruan Anda terlihat seperti ini:

Error: An error has occured while trying to execute apiFetch
   [cause]: Error: An error has occured while trying to fetch getCustomerById
      [cause]: Error: 401 - Unauthorized - Token Expired

Jangan ragu untuk melakukan eksperimen!

Saya harap ini sudah membantu Anda memperoleh beberapa alat baru di gudang JS Anda. Bila Anda sudah mengetahui 5 hal ini, maka selamat! Anda resmi menjadi Git Master.