7 rekomendasi untuk meningkatkan keandalan kode JavaScript

Penulis artikel, yang terjemahannya kami terbitkan hari ini, memutuskan untuk berbagi dengan tujuh rekomendasi pembaca tentang JavaScript. Rekomendasi ini, seperti yang penulis harapkan, akan membantu menulis program yang lebih andal.



1. Gunakan fungsi pabrik


Jika ada yang tidak tahu, fungsi pabrik adalah fungsi biasa (bukan kelas atau konstruktor) yang mengembalikan objek. Konsep sederhana ini memungkinkan kami memanfaatkan fitur-fitur canggih JavaScript untuk membuat aplikasi yang kuat dan andal.

Penting untuk mengetahui bahwa fungsi pabrik dipanggil tanpa menggunakan kata kunci new. Jika Anda memanggilnya dengan kata kunci ini, dia akan berhenti bersikap sebagaimana mestinya.

▍ Mengapa menggunakan fungsi pabrik?


Fungsi pabrik dapat digunakan untuk menyederhanakan instantiasi objek tanpa harus mengikat ke kelas atau kata kunci new.

Inti dari fungsi pabrik adalah bahwa mereka dianggap sebagai fungsi yang paling biasa. Ini berarti bahwa mereka dapat digunakan untuk membangun objek, fungsi lain, dan bahkan janji. Artinya, fungsi-fungsi tersebut dapat digabungkan dan digabungkan untuk menciptakan fungsi pabrik yang lebih kuat, yang, pada gilirannya, juga dapat digabungkan dengan fungsi atau objek lain untuk membuat fungsi pabrik yang lebih maju. Fungsi pabrik membuka kemungkinan tak terbatas untuk programmer.

Mengingat hal di atas dan menggabungkan penggunaan fungsi pabrik dengan pendekatan yang disarankan untuk menulis kode, fungsi ini dapat menjadi alat yang kuat dan nyaman.

Berikut adalah contoh sederhana dari fungsi pabrik:

function createFrog(name) {
  const children = []
  
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')

Jika Anda menggunakan fungsi pabrik untuk beberapa waktu, Anda mungkin memahami bahwa, dibandingkan dengan pesaingnya dalam bentuk fungsi konstruktor, fungsi pabrik dapat meningkatkan tingkat penggunaan kembali kode. Akibatnya, programmer harus menulis lebih sedikit kode. Fungsi pabrik memfasilitasi refactoring, karena mereka dapat mengembalikan objek sewenang-wenang, dan menyederhanakan pekerjaan pada basis kode.

2. Saat menulis fungsi konstruktor, tambahkan metode ke prototipe mereka


Jika Anda baru saja mulai mempelajari JavaScript, maka bekerja dengan objek prototipe mungkin bagi Anda sesuatu yang baru. Jadi, pada awalnya, itu bersama saya.

Perlu diingat bahwa teknik ini tidak cocok untuk kelas. Kelas, tanpa usaha tambahan dari programmer, secara mandiri menyimpan metode dalam prototipe mereka.

Berikut ini contoh fungsi konstruktor:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

Mengapa menggunakan konstruk Frog.prototype.leapalih-alih hanya menulis metode leapke objek yang dibuat oleh konstruktor? Misalnya, seperti ini:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
  
  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

Faktanya adalah bahwa jika suatu metode dilampirkan langsung ke properti konstruktor prototype, ini berarti bahwa instance ini akan dibagikan oleh semua instance objek yang dibuat oleh konstruktor.

Dengan kata lain, jika Anda mengandalkan contoh sebelumnya, yang digunakan this.leap, ternyata saat membuat beberapa instance objek Frog, masing-masing dari mereka akan memiliki metode sendiri leap. Yaitu - beberapa salinan dari metode ini akan dibuat. Dalam hal ini, ini menunjukkan penggunaan sumber daya sistem yang tidak rasional, karena dalam semua objek ini akan ada salinan dari metode yang sama yang berperilaku sama di mana-mana. Tidak perlu membuat salinan metode seperti itu di setiap instance objek.

Akibatnya, ini akan menyebabkan penurunan kinerja program. Tetapi ini tidak sulit untuk dihindari. Perlu dicatat bahwa properti this.namedan this.genderharus dinyatakan dalam formulir ini, karena mereka harus menjadi milik objek tertentu. Jika kita menggambar analogi dengan katak sungguhan, representasi virtual yang digambarkan menggunakan konstruktor Frog, ternyata katak dapat memiliki nama sendiri, katak memiliki jenis kelamin yang berbeda. Akibatnya, untuk menyimpan informasi unik tentang katak di setiap objek, masuk akal untuk mendeklarasikan properti objek sehingga mereka akan digunakan tepat pada tingkat instance objek.

Berikut adalah contoh penggunaan teknik ini dalam paket permintaan populer .

3. Tambahkan properti .type ke objek yang akan dibedakan.


Properti .typeyang, dengan persetujuan tidak resmi, sering ditambahkan ke objek, telah menemukan penggunaan yang sangat luas akhir-akhir ini. Jika Anda menulis Bereaksi aplikasi, maka Anda mungkin telah menemukan properti ini sepanjang waktu. Terutama - jika Anda menggunakan Redux .

Menggunakan pendekatan ini menunjukkan dirinya dengan sangat baik dalam proses pengembangan, karena itu, antara lain, memungkinkan Anda untuk membuat kode self-documenting:

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. Gunakan TypeScript


TypeScript telah tersebar luas di komunitas JavaScript karena fakta bahwa bahasa ini memberi programmer alat yang ampuh untuk bekerja dengan aman dengan tipe, dan juga memungkinkan Anda untuk mendeteksi kesalahan bahkan sebelum mereka muncul dalam kode yang sedang berjalan.

Menggunakan TypeScript memungkinkan Anda menemukan kesalahan potensial pada tahap kompilasi kode, bahkan sebelum kode diluncurkan. Jika ada yang salah dalam kode, pemberitahuan kompilasi akan ditampilkan ketika dikompilasi.

Tetapi keamanan jenis dan deteksi dini kesalahan jauh dari daftar lengkap alasan untuk menggunakan TypeScript dalam situasi apa pun. Salah satu hal hebat tentang TypeScript adalah memungkinkan Anda untuk mengambil keuntungan dari fitur-fitur JavaScript baru bahkan sebelum mereka muncul di browser utama. Faktanya adalah bahwa kode TypeScript dikompilasi ke dalam kode JavaScript yang didukung oleh browser modern dan bukan yang terbaru.

5. Tulis tes


Jika Anda mengerjakan sebuah proyek dan serius dengan pekerjaan ini, maka Anda praktis perlu menulis tes. Ini akan membuat kode lebih mudah diprediksi, akan membuatnya lebih rentan kesalahan. Ini akan memberikan tingkat kepercayaan yang lebih tinggi pada kualitas kode ketika melakukan perubahan. Dengan kata lain, jika Anda ingin kode Anda bertahan dalam ujian waktu, tidak ada cara yang lebih baik untuk mempersiapkan kode Anda untuk tes ini daripada menulis tes. Semakin banyak tes yang Anda miliki dalam proyek Anda, semakin percaya diri Anda pada kode ketika Anda menggunakannya dalam produksi.

Jika perlu untuk memilih hanya satu, yang paling penting, fitur positif dari tes, apa yang akan terjadi? Saya percaya ini adalah fakta bahwa tes membantu untuk menemukan kesalahan sebelum mereka masuk ke program kerja. Programmer seperti apa yang tidak ingin memiliki kesempatan seperti itu? Saya tentu tidak akan menolak hal seperti itu. Itu sebabnya saya menulis unit test untuk proyek saya.

Jika Anda baru akan mulai membuat tes untuk proyek Anda, ketahuilah bahwa hari ini ada banyak alat dan kerangka kerja untuk mengatur pengujian kode. Ini ada beberapa hal bagus tentang itu.

6. Tulis fungsi sesederhana mungkin.


Seperti yang kita semua tahu, JavaScript tanpa masalah memungkinkan Anda membuat fungsi besar yang menyelesaikan banyak tugas sekaligus.

Jika Anda baru dalam pemrograman, maka ini mungkin tampak positif bagi Anda. Saya akan mengatakan tentang diri saya bahwa di masa lalu saya merasa hebat ketika saya menulis potongan kode yang kuat yang melakukan apa yang saya butuhkan. Itu penting bagi saya. Saya merasa lebih percaya diri ketika melihat bahwa kode saya berfungsi tanpa masalah, belum lagi fakta bahwa kepercayaan diri saya diperkuat oleh fakta bahwa saya mampu menulis blok besar kode yang berfungsi dengan baik. Betapa naifnya saya waktu itu!

Jika Anda ingin menulis kode yang mudah dipelihara, kode yang sederhana dan tidak terlalu rentan kesalahan, maka taruhan terbaik Anda adalah membuat fungsi Anda sesederhana dan sekecil mungkin. Semakin sederhana fungsinya, semakin mudah mengujinya secara terpisah dari bagian lain sistem.

Ini sangat penting bagi mereka yang ingin menggunakan prinsip-prinsip pemrograman fungsional dalam pekerjaan mereka. Dalam hal ini, kita dapat mengingat satu persyaratan terkenal untuk fungsi: fungsi harus menyelesaikan hanya satu masalah dan perlu menyelesaikan masalah ini dengan sangat baik.

7. Selalu ingat pentingnya penanganan kesalahan saat menggunakan JSON.parse dan JSON.stringify


Dalam pemrograman JavaScript, ketika meneruskan data JSON ke suatu metode JSON.parse, perlu untuk mempertimbangkan fakta bahwa metode ini mengharapkan untuk menerima, sebagai argumen pertama, kode JSON yang dijalankan dengan benar. Jika metode ini menerima materi JSON yang bermasalah, akan menimbulkan kesalahan.

Bahayanya di sini adalah melewatkan JSON.parsekode JSON yang salah menyebabkan aplikasi berhenti. Di tempat kerja, saya baru-baru ini menghadapi situasi di mana salah satu proyek web kami melemparkan kesalahan karena fakta bahwa salah satu paket eksternal tidak masuk JSON.parseke dalam blok try/catch. Ini berakhir dengan kegagalan halaman, dan kami tidak dapat menyingkirkan masalah sampai kode paket eksternal diperbaiki. Semua ini terjadi karena fakta bahwa dalam kode, selama operasinya, kesalahan yang belum diproses muncul:

SyntaxError: Unexpected token } in JSON at position 107

Saat memproses data JSON yang masuk ke aplikasi dari sumber eksternal, orang tidak bisa berharap bahwa itu akan diformat dengan benar. Anda harus selalu siap dengan kenyataan bahwa mereka dapat memenuhi sesuatu yang akan menyebabkan kesalahan.

Ringkasan


Kami berharap rekomendasi yang diberikan di sini untuk meningkatkan keandalan kode JavaScript bermanfaat bagi Anda.

Pembaca yang budiman! Apa yang akan Anda rekomendasikan untuk mereka yang ingin menulis kode JavaScript yang lebih baik dan lebih dapat diandalkan?

Source: https://habr.com/ru/post/undefined/


All Articles