JavaScript berasal dari web awal. Pada awalnya, skrip sederhana ditulis di atasnya yang "meramaikan" halaman situs. Sekarang JS telah menjadi bahasa pemrograman lengkap yang bahkan dapat digunakan untuk mengembangkan proyek-proyek sisi server.
Aplikasi web modern sangat bergantung pada JavaScript. Ini terutama berlaku untuk aplikasi satu halaman (Aplikasi Satu Halaman, SPA). Dengan munculnya perpustakaan dan kerangka kerja seperti React, Angular, dan Vue, JavaScript telah menjadi salah satu blok bangunan utama aplikasi web.
Menskalakan aplikasi seperti itu, apakah itu tentang bagian klien atau server mereka, bisa menjadi tugas yang sangat sulit. Jika aplikasi tersebut didasarkan pada arsitektur yang dipikirkan dengan buruk, maka pengembangnya cepat atau lambat akan menghadapi keterbatasan tertentu. Mereka tenggelam dalam lautan kejutan yang tidak menyenangkan.
Penulis artikel, yang terjemahannya kami terbitkan hari ini, ingin berbagi kiat tentang penulisan kode JavaScript murni. Dia mengatakan artikel itu untuk programmer JS dari tingkat keahlian apa pun. Tetapi itu akan sangat berguna bagi mereka yang terbiasa dengan JavaScript setidaknya pada tingkat menengah.
1. Isolasi kode
Untuk menjaga basis kode proyek tetap bersih sehingga kode dapat dengan mudah dibaca, disarankan agar fragmen kode dipisahkan menjadi blok-blok terpisah berdasarkan tujuannya. Blok-blok ini biasanya berfungsi. Saya menganggap rekomendasi ini yang paling penting yang bisa saya berikan. Jika Anda menulis fungsi, Anda harus segera fokus pada fakta bahwa fungsi ini akan ditujukan untuk memecahkan satu masalah. Fungsi ini seharusnya tidak dirancang untuk menyelesaikan beberapa masalah.
Selain itu, Anda harus berusaha untuk memastikan bahwa panggilan fungsi tidak mengarah ke efek samping. Dalam kebanyakan kasus, ini berarti bahwa fungsi tidak boleh mengubah sesuatu yang dideklarasikan di luarnya. Data diterima melalui parameter. Dia seharusnya tidak bekerja dengan hal lain. Anda harus
return salah satu fungsi menggunakan kata kunci
return .
2. Pemecahan kode menjadi modul
Fungsi yang digunakan dengan cara yang sama atau melakukan tindakan serupa dapat dikelompokkan dalam satu modul (atau, jika Anda inginkan, di kelas yang terpisah). Misalkan Anda perlu melakukan berbagai perhitungan dalam proyek Anda. Dalam situasi seperti itu, masuk akal untuk mengekspresikan tahapan yang berbeda dari perhitungan tersebut dalam bentuk fungsi yang terpisah (blok terisolasi), yang panggilannya dapat digabungkan menjadi rantai. Namun, semua fungsi ini dapat dideklarasikan dalam satu file (yaitu, dalam sebuah modul). Berikut ini adalah contoh dari modul
calculation.js yang berisi fungsi serupa:
function add(a, b) { return a + b } function subtract(a, b) { return a - b } module.exports = { add, subtract }
Dan di sini adalah bagaimana Anda dapat menggunakan modul ini di file lain (sebut saja
index.js ):
const { add, subtract } = require('./calculations') console.log(subtract(5, add(3, 2))
Pengembang aplikasi Frontend dapat diberikan rekomendasi berikut. Untuk mengekspor entitas paling penting yang dinyatakan dalam modul, gunakan opsi ekspor default. Untuk entitas sekunder, Anda dapat menggunakan ekspor bernama.
3. Gunakan beberapa parameter fungsi alih-alih satu objek dengan parameter
Saat mendeklarasikan suatu fungsi, Anda harus berusaha menggunakan beberapa parameter, daripada objek tunggal dengan parameter. Berikut adalah beberapa contoh:
Kehadiran fungsi dengan beberapa parameter memungkinkan Anda untuk segera mengetahui apa yang perlu diteruskan ke sana dengan melihat baris pertama dari deklarasi tersebut. Inilah alasan mengapa saya memberikan rekomendasi ini.
Terlepas dari kenyataan bahwa ketika mengembangkan fungsi, Anda harus berusaha untuk memastikan bahwa masing-masing hanya memecahkan satu masalah, ukuran kode fungsi bisa sangat besar. Jika suatu fungsi menerima satu objek dengan parameter, maka untuk mengetahui apa yang diharapkannya, Anda mungkin perlu melihat semua kodenya, menghabiskan banyak waktu di sana. Kadang-kadang mungkin terlihat bahwa ketika bekerja dengan fungsi, lebih mudah untuk menggunakan objek tunggal dengan parameter. Tetapi jika Anda menulis fungsi, mengingat kemungkinan penskalaan aplikasi di masa mendatang, lebih baik menggunakan beberapa parameter.
Perlu dicatat bahwa ada batas tertentu setelah penggunaan parameter individual kehilangan artinya. Dalam kasus saya, ini adalah empat hingga lima parameter. Jika suatu fungsi membutuhkan begitu banyak input, maka seorang programmer harus mempertimbangkan untuk menggunakan objek dengan parameter.
Alasan utama untuk rekomendasi ini adalah bahwa parameter individual yang diharapkan oleh fungsi harus diteruskan kepadanya dalam urutan tertentu. Jika beberapa parameter bersifat opsional, maka Anda harus meneruskan fungsi seperti
undefined atau
null . Saat menggunakan objek dengan parameter, urutan parameter dalam objek tidak masalah. Dengan pendekatan ini, Anda dapat melakukan tanpa mengatur parameter opsional untuk
undefined .
4. Restrukturisasi
Restrukturisasi adalah mekanisme yang berguna yang muncul di ES6. Ini memungkinkan Anda untuk mengekstrak bidang yang ditentukan dari objek dan segera menulisnya ke variabel. Ini dapat digunakan saat bekerja dengan objek dan modul:
Secara khusus, ketika bekerja dengan modul, masuk akal untuk mengimpor ke file bukan seluruh modul, tetapi hanya fungsi yang diperlukan, memberi mereka nama yang dapat dimengerti. Jika tidak, Anda harus mengakses fungsi menggunakan variabel yang melambangkan modul.
Pendekatan serupa berlaku untuk kasus-kasus ketika satu objek digunakan sebagai parameter fungsi. Ini memungkinkan melihat baris pertama dari fungsi untuk mengetahui dengan segera apa yang diharapkan untuk diterima sebagai objek dengan parameter:
function logCountry({name, code, language, currency, population, continent}) { let msg = `The official language of ${name} ` if(code) msg += `(${code}) ` msg += `is ${language}. ${population} inhabitants pay in ${currency}.` if(contintent) msg += ` The country is located in ${continent}` } logCountry({ name: 'Germany', code: 'DE', language 'german', currency: 'Euro', population: '82 Million', }) logCountry({ name: 'China', language 'mandarin', currency: 'Renminbi', population: '1.4 Billion', continent: 'Asia', })
Seperti yang Anda lihat, meskipun fungsi menerima satu objek dengan parameter, perusakannya memungkinkan Anda untuk mengetahui apa yang sebenarnya perlu ditempatkan di dalamnya ketika fungsi dipanggil. Kiat berikutnya adalah tentang cara memberi tahu pengguna secara lebih akurat apa fungsi yang diharapkan.
Omong-omong, restrukturisasi juga dapat digunakan ketika bekerja dengan komponen fungsional React.
5. Tetapkan nilai default untuk parameter fungsi
Nilai standar dari parameter fungsi, nilai standar parameter, masuk akal untuk digunakan saat merusak objek dengan parameter, dan dalam kasus tersebut ketika fungsi menerima daftar parameter. Pertama, ini memberi programmer contoh fungsi apa yang bisa dilewati. Kedua, ini memungkinkan Anda untuk mencari tahu parameter mana yang wajib dan mana yang opsional. Kami melengkapi deklarasi fungsi dari contoh sebelumnya dengan nilai parameter standar:
function logCountry({ name = 'United States', code, language = 'English', currency = 'USD', population = '327 Million', continent, }) { let msg = `The official language of ${name} ` if(code) msg += `(${code}) ` msg += `is ${language}. ${population} inhabitants pay in ${currency}.` if(contintent) msg += ` The country is located in ${continent}` } logCountry({ name: 'Germany', code: 'DE', language 'german', currency: 'Euro', population: '82 Million', }) logCountry({ name: 'China', language 'mandarin', currency: 'Renminbi', population: '1.4 Billion', continent: 'Asia', })
Jelas bahwa dalam beberapa kasus, jika parameter fungsi tidak diteruskan ke sana saat memanggil fungsi, perlu untuk memberikan kesalahan, daripada menggunakan nilai standar dari parameter ini. Namun seringkali, teknik yang dijelaskan di sini sangat membantu.
6. Jangan meneruskan data yang tidak perlu ke fungsi
Rekomendasi sebelumnya membawa kita ke satu kesimpulan menarik. Terdiri dari fakta bahwa fungsi tidak perlu mentransfer data yang tidak mereka perlukan. Jika Anda mengikuti aturan ini, maka pengembangan fungsi mungkin memerlukan waktu tambahan. Tetapi dalam jangka panjang, pendekatan ini akan mengarah pada pembentukan basis kode yang dibedakan oleh keterbacaan yang baik. Selain itu, sangat berguna untuk mengetahui jenis data apa yang digunakan di setiap tempat program.
7. Membatasi jumlah baris dalam file dan level maksimum kode bersarang
Saya telah melihat file besar dengan kode program. Sangat besar Beberapa memiliki lebih dari 3.000 baris. Dalam file seperti itu sangat sulit untuk dinavigasi.
Sebagai hasilnya, disarankan untuk membatasi ukuran file yang diukur dalam baris kode. Saya biasanya berusaha untuk memastikan bahwa ukuran file saya tidak melebihi 100 baris. Terkadang, ketika sulit untuk memecah logika tertentu menjadi fragmen kecil, ukuran file saya mencapai 200-300 baris. Dan sangat jarang, ukurannya mencapai 400 garis. File yang melebihi batas ini sulit dibaca dan dipelihara.
Saat mengerjakan proyek Anda, buat modul dan folder baru dengan berani. Struktur proyek harus menyerupai hutan yang terdiri dari pohon (kelompok modul dan file modul) dan cabang (bagian modul). Berusaha keras untuk memastikan bahwa proyek Anda tidak terlihat seperti pegunungan.
Jika kita berbicara tentang penampilan file-file itu sendiri dengan kode, maka mereka harus mirip dengan dataran dengan bukit rendah. Ini tentang menghindari tingkat besar kode bersarang. Perlu berusaha keras untuk memastikan bahwa kode tidak melebihi empat level.
Mungkin mengamati rekomendasi ini akan membantu untuk menerapkan aturan linter ESLint yang sesuai.
8. Gunakan alat untuk memformat kode secara otomatis
Saat mengerjakan proyek JavaScript dalam sebuah tim, Anda perlu mengembangkan panduan yang jelas untuk gaya dan pemformatan kode. Anda dapat mengotomatiskan pemformatan kode dengan ESLint. Linter ini menawarkan pengembang seperangkat aturan yang dapat disesuaikan. Ada
eslint --fix yang dapat memperbaiki beberapa kesalahan.
Namun, saya sarankan menggunakan Prettier daripada ESLint untuk mengotomatiskan pemformatan kode. Dengan pendekatan ini, pengembang mungkin tidak perlu khawatir tentang pemformatan kode. Dia hanya perlu menulis program yang berkualitas. Semua kode yang diformat secara otomatis menggunakan satu set aturan akan terlihat konsisten.
9. Gunakan nama variabel yang dirancang dengan baik
Nama variabel idealnya mencerminkan isinya. Berikut adalah beberapa panduan untuk memilih nama variabel yang informatif.
▍ Fungsi
Biasanya fungsi melakukan semacam aksi. Orang-orang, ketika berbicara tentang tindakan, menggunakan kata kerja. Misalnya - konversi (konversi) atau tampilan (tampilkan). Nama fungsi direkomendasikan untuk dibentuk sehingga mereka mulai dengan kata kerja. Misalnya,
convertCurrency atau
displayUser .
▍Rata
Array biasanya berisi set beberapa nilai. Akibatnya, masuk akal untuk menambahkan huruf
s ke nama variabel yang menyimpan array. Sebagai contoh:
const students = ['Eddie', 'Julia', 'Nathan', 'Theresa']
▍ Nilai logis
Nama variabel Boolean masuk akal untuk memulai dengan atau
has . Ini membawa mereka lebih dekat ke konstruksi yang tersedia dalam bahasa biasa. Misalnya, inilah pertanyaannya: “Apakah orang itu seorang guru?”. Jawabannya bisa "Ya" atau "Tidak". Anda dapat melakukan hal yang sama dengan memilih nama untuk variabel logis:
const isTeacher = true
▍ Parameter fungsi dilewatkan ke metode array standar
Berikut adalah beberapa metode standar JavaScript array:
forEach ,
map ,
reduce ,
filter . Mereka memungkinkan Anda untuk melakukan tindakan tertentu dengan array. Mereka melewati fungsi yang menggambarkan operasi pada array. Saya melihat berapa banyak pemrogram hanya melewatkan parameter dengan nama seperti
el atau
element ke fungsi tersebut. Meskipun pendekatan ini membebaskan programmer dari memikirkan penamaan parameter seperti itu, lebih baik untuk memanggil mereka berdasarkan data yang muncul di dalamnya. Sebagai contoh:
const cities = ['Berlin', 'San Francisco', 'Tel Aviv', 'Seoul'] cities.forEach(function(city) { ... })
▍ Pengidentifikasi
Sering terjadi bahwa seorang programmer perlu bekerja dengan pengidentifikasi set atau objek data tertentu. Jika pengidentifikasi tersebut bersarang, tidak ada yang perlu dilakukan dengan mereka. Misalnya, ketika bekerja dengan MongoDB, saya biasanya mengonversi
_id ke
id sebelum mengembalikan objek ke aplikasi front-end. Saat mengekstraksi pengidentifikasi dari objek, disarankan untuk membentuk namanya dengan mengatur tipe objek sebelum
id . Sebagai contoh:
const studentId = student.id
Pengecualian untuk aturan ini bekerja dengan referensi MongoDB dalam model. Dalam kasus seperti itu, direkomendasikan untuk memberi nama bidang sesuai dengan model yang dirujuk di dalamnya. Ini, saat mengisi dokumen yang memiliki tautan di bidangnya, akan memungkinkan untuk menjaga kode tetap bersih dan seragam:
const StudentSchema = new Schema({ teacher: { type: Schema.Types.ObjectId, ref: 'Teacher', required: true, }, name: String, ... })
10. Gunakan konstruk async / wait jika memungkinkan.
Menggunakan panggilan balik menurunkan keterbacaan kode. Ini terutama berlaku untuk panggilan balik bersarang. Janji sedikit meluruskan hal-hal, tapi saya percaya bahwa kode yang menggunakan async / menunggu menunggu sebaiknya dibaca. Bahkan pemula dan pengembang yang beralih ke JavaScript dari bahasa lain dapat dengan mudah memahami kode ini. Yang paling penting di sini adalah menguasai konsep-konsep yang mendasari async / menunggu. Jangan gunakan desain ini di mana-mana karena hal yang baru.
11. Prosedur untuk mengimpor modul
Rekomendasi 1 dan 2 menunjukkan pentingnya memilih tempat yang tepat untuk menyimpan kode untuk memastikannya didukung. Gagasan serupa berlaku untuk urutan impor modul. Yaitu, kita berbicara tentang fakta bahwa urutan logis modul impor membuat kode lebih jelas. Saat mengimpor modul, saya mengikuti skema sederhana berikut:
Contoh ini didasarkan pada Bereaksi. Gagasan yang sama tidak akan sulit untuk ditransfer ke lingkungan pengembangan lainnya.
12. Hindari menggunakan console.log
Perintah
console.log adalah alat sederhana, cepat dan nyaman untuk debugging program. Ada, tentu saja, alat yang lebih maju dari jenis ini, tapi saya pikir hampir semua programmer masih menggunakan
console.log . Jika, menggunakan
console.log untuk debugging, Anda tidak menghapus panggilan perintah ini yang menjadi tidak perlu pada waktunya, konsol akan segera menjadi benar-benar berantakan. Perlu dicatat bahwa masuk akal untuk meninggalkan beberapa tim logging bahkan dalam kode proyek yang sepenuhnya siap untuk bekerja. Misalnya, perintah yang menampilkan pesan kesalahan dan peringatan.
Sebagai hasilnya, kita dapat mengatakan bahwa sangat mungkin untuk menggunakan
console.log untuk tujuan debugging, dan dalam kasus di mana perintah logging direncanakan untuk digunakan dalam proyek yang sedang berjalan, masuk akal untuk menggunakan perpustakaan khusus. Diantaranya adalah
loglevel dan
winston . Selain itu, ESLint dapat digunakan untuk melawan perintah logging yang tidak perlu. Ini memungkinkan pencarian global dan penghapusan perintah tersebut.
Ringkasan
Penulis materi ini mengatakan bahwa semua yang ia bicarakan di sini banyak membantunya dalam menjaga kebersihan dan skalabilitas basis kode proyek-proyeknya. Kami harap tips ini bermanfaat bagi Anda.
Pembaca yang budiman! Apa yang bisa Anda tambahkan ke 12 tips di sini untuk menulis kode JS yang bersih dan dapat diukur?
