Semua orang ingin menjadi ahli. Tapi apa artinya itu? Selama bertahun-tahun, saya telah menemukan dua tipe orang yang disebut "ahli". Seorang ahli tipe pertama adalah orang yang tidak hanya mengetahui setiap roda penggerak dalam bahasa, tetapi juga menggunakan semua roda penggerak ini, terlepas dari apakah itu bermanfaat. Seorang ahli tipe kedua juga mengetahui setiap kehalusan sintaksis, tetapi lebih selektif dalam memilih alat untuk memecahkan masalah, dengan mempertimbangkan sejumlah faktor, baik yang terkait maupun yang tidak terkait dengan kode.
Mari kita tebak ahli seperti apa yang ingin Anda lihat di tim Anda. Kedua, bukan? Ini adalah jenis pengembang yang berusaha menghasilkan kode yang dapat dibaca manusia, string JavaScript yang dapat dipahami orang lain, dan yang mudah dipelihara. Tetapi karakteristik "dapat dibaca" jarang menentukan - pada kenyataannya, biasanya di mata yang melihatnya. Jadi, kemana hal ini membawa kita? Apa yang harus kita perjuangkan jika tujuan kita adalah kode yang dapat dibaca? Apakah ada pilihan yang jelas benar atau salah dalam kasus ini? Tergantung banyak.
Pilihan yang jelas
Untuk mempermudah pekerjaan pengembang, TC39 telah menambahkan banyak fitur baru ke ECMAScript dalam beberapa tahun terakhir, termasuk banyak pola terbukti yang dipinjam dari bahasa lain. Salah satu inovasi yang diperkenalkan di ES2019 adalah metode Array.prototype.flat () . Dibutuhkan argumen kedalaman atau Infinity dan menyelaraskan array. Jika tidak ada argumen, kedalaman default array adalah 1.
Sebelum penambahan ini muncul, sintaks berikut diperlukan untuk menyelaraskan array ke satu tingkat.
let arr = [1, 2, [3, 4]];
[].concat.apply([], arr);
// [1, 2, 3, 4]
Dengan menambahkan flat (), Anda dapat mendeskripsikan fitur yang sama hanya dengan satu fungsi ekspresif.
arr.flat();
// [1, 2, 3, 4]
Apakah baris kedua kode lebih mudah dibaca? Pastinya ya. Faktanya, kedua ahli akan setuju dengan ini.
Tidak semua developer mengetahui keberadaan flat (). Tetapi tidak perlu mengetahui hal ini sebelumnya, karena flat () adalah kata kerja yang dapat dimengerti, yang darinya jelas apa yang terjadi di sini. Ini jauh lebih intuitif daripada concat.apply ().
Ini adalah kasus yang jarang terjadi di mana Anda dapat dengan yakin menjawab sintaks mana yang lebih baik - baru atau lama. Kedua ahli, setelah membiasakan diri dengan kedua sintaksis, akan memilih sintaks kedua. Mereka akan memilih baris kode yang lebih pendek, lebih jelas, dan lebih mudah dirawat.
Tetapi pilihan dan kompromi tidak selalu mudah.
Periksa kutu
Apa yang luar biasa tentang JavaScript adalah keserbagunaannya yang luar biasa. Inilah sebabnya mengapa ini ada di mana-mana di web. Apakah itu baik atau buruk dari sudut pandang Anda adalah pertanyaan lain.
Tetapi keserbagunaan seperti itu membawa serta paradoks pilihan. Kode yang sama dapat ditulis dengan berbagai cara. Bagaimana Anda menentukan mana yang "benar"? Solusi semacam itu bahkan tidak dapat didekati jika Anda tidak mengetahui semua opsi yang tersedia dan tidak memahami apa yang tidak mereka jangkau.
Mari kita coba pemrograman fungsional dengan map () sebagai contoh. Saya akan membahas beberapa pengulangan di sini - semuanya akan mengarah ke hasil yang sama.
Berikut adalah versi paling ringkas dari semua contoh map () kami. Ini memiliki jumlah karakter terkecil, dan semuanya muat dalam satu baris. Kami akan membangun versi ini.
const arr = [1, 2, 3];
let multipliedByTwo = arr.map(el => el * 2);
// multipliedByTwo [2, 4, 6]
Contoh berikut hanya menambahkan dua karakter: tanda kurung. Apakah kita kehilangan sesuatu? Sudahkah kamu membelinya? Apakah cuaca mengharuskan penggunaan tanda kurung dalam fungsi yang memiliki lebih dari satu parameter? Saya pikir - ya, itu benar. Tidak ada yang salah dengan menambahkannya di sini, tetapi konsistensi kode akan meningkat secara signifikan ketika Anda mau tidak mau harus menulis fungsi dengan banyak parameter. Faktanya, pada saat penulisan ini, Prettier ternyata diharuskan memiliki batasan ini; di sana saya tidak dapat membuat fungsi panah tanpa tanda kurung.
let multipliedByTwo = arr.map((el) => el * 2);
Lanjutkan. Kami telah menambahkan tanda kurung kurawal dan pernyataan kembali. Ini sekarang mulai terdengar seperti definisi fungsi tradisional. Saat ini, ini mungkin tampak seperti kata kunci, selama seluruh logika fungsi, menembakkan meriam ke burung pipit. Namun, jika fungsi tersebut berisi lebih dari satu baris, maka sintaks tambahan ini pasti akan dibutuhkan. Apakah kita berasumsi bahwa kita tidak akan memiliki fungsi lain yang lebih panjang dari satu baris? Sepertinya meragukan.
let multipliedByTwo = arr.map((el) => {
return el * 2;
});
Selanjutnya, kami menghapus fungsi panah sama sekali. Kami menggunakan sintaks yang sama seperti sebelumnya, tetapi sekarang kami lebih memilih kata kunci fungsi. Ini menarik karena tidak ada skenario di mana sintaks ini tidak akan berfungsi; untuk sejumlah parameter atau string, kami tidak akan mengalami masalah, jadi di sini kami kuat dalam keseragaman. Kode ini lebih panjang dari definisi pertama kita, tetapi apakah seburuk itu? Bagaimana hal ini merugikan programmer baru atau seseorang yang tidak ahli dalam JavaScript, tetapi dalam beberapa bahasa lain? Apakah orang yang memiliki pengetahuan baik tentang JavaScript akan bingung dengan sintaks ini saat membandingkan?
let multipliedByTwo = arr.map(function(el) {
return el * 2;
});
Akhirnya, kita sampai pada opsi terakhir: hanya melewatkan satu fungsi. Dan timesTwo dapat ditulis menggunakan sintaks apa pun yang kita suka. Sekali lagi, tidak ada skenario di mana melewatkan nama fungsi akan menjadi masalah bagi kami. Tetapi mari kita mundur selangkah dan memikirkan apakah kode seperti itu dapat membingungkan siapa pun. Jika Anda baru saja memulai dengan basis kode ini, apakah jelas bagi Anda bahwa timesTwo adalah fungsi, bukan objek? Jelas, map () akan berfungsi sebagai petunjuk di sini, tetapi detail seperti itu bisa terlewatkan. Bagaimana dengan tempat timesTwo dideklarasikan dan diinisialisasi? Apakah mudah menemukannya? Apakah jelas apa yang dilakukannya dan bagaimana pengaruhnya terhadap hasil? Semua pertimbangan ini penting.
const timesTwo = (el) => el * 2;
let multipliedByTwo = arr.map(timesTwo);
Seperti yang Anda lihat, tidak ada jawaban yang jelas di sini. Tetapi memilih opsi yang tepat saat membangun basis kode Anda hanya mungkin jika Anda memahami semua opsi dan batasannya. Secara khusus, Anda tahu bahwa Anda memerlukan tanda kurung, tanda kurung kurawal, dan kata kunci kembali untuk membuat kode Anda konsisten.
Ada sejumlah masalah yang harus diperhatikan saat menulis kode. Masalah kinerja biasanya yang paling umum. Tetapi ketika membandingkan fragmen kode yang identik secara fungsional, maka pilihan harus dibuat dengan memperhatikan orang-orang yang harus membaca kode ini.
Mungkin lebih baru tidak selalu lebih baik
Jadi, kami melihat contoh yang sangat jelas di mana kedua pakar lebih memilih sintaks yang lebih baru, meskipun tidak dikenal. Kami juga telah melihat contoh yang menanyakan banyak pertanyaan tetapi tidak memberikan banyak jawaban. Sekarang mari selami kode yang saya tulis sebelumnya ... dan dihapus. Kode ini mengubah saya menjadi pakar tipe pertama ketika saya memecahkan masalah dengan konstruksi sintaksis yang sedikit diketahui, sehingga mengabaikan kolega saya dan kenyamanan dalam mempertahankan basis kode kami.
Tugas penghancuran memungkinkan Anda untuk membongkar nilai dari objek (atau larik). Biasanya terlihat seperti ini.
const {node} = exampleObject;
Di sini, pada satu baris, variabel diinisialisasi dan diberi nilai. Tapi mungkin bukan itu masalahnya.
let node
;({node} = exampleObject)
Di baris terakhir kode, nilai diberikan ke variabel menggunakan destructuring, tetapi variabel tersebut dinyatakan satu baris. Ini sering dilakukan, tetapi banyak yang tidak menyadari bahwa ini mungkin.
Mari kita lihat lebih dekat kode ini. Titik koma yang canggung diberlakukan di sini, dan ini adalah kode di mana titik koma tidak digunakan untuk mengakhiri baris. Di sini perintah diapit tanda kurung dan tanda kurung kurawal ditambahkan; sama sekali tidak dapat dipahami apa yang terjadi di sini. Sulit untuk membaca baris ini, karena sebagai seorang ahli saya sama sekali tidak berhak untuk menulis kode seperti itu.
let node
node = exampleObject.node
Kode ini menyelesaikan masalah. Ini berfungsi, jelas apa yang dilakukan di dalamnya, dan rekan-rekan saya akan memahaminya tanpa mencari ke mana pun. Adapun sintaks destruktif, saya tidak boleh menggunakannya hanya karena saya bisa .
Kode bukanlah segalanya
Seperti yang telah kita lihat, keputusan Expert-2 jarang ditanyakan jika kita hanya melanjutkan dari kode; namun, mudah untuk membedakan kode apa yang harus ditulis oleh setiap pakar. Intinya adalah mesin harus membaca kode, dan orang harus menafsirkannya. Oleh karena itu, Anda perlu mempertimbangkan faktor-faktor yang tidak hanya terkait dengan kode!
Bekerja pada tim pengembangan JavaScript akan memiliki pendekatan yang berbeda untuk pemilihan kode daripada bekerja pada tim multibahasa, yang anggotanya tidak terlalu tenggelam dalam kehalusan linguistik.
Mari bandingkan operator ekspansi dan concat () sebagai contoh.
Operator penyebaran telah ditambahkan ke ECMAScript beberapa tahun yang lalu dan sekarang sangat umum. Ini adalah jenis sintaks pembantu yang dapat digunakan untuk melakukan banyak hal. Secara khusus, gabungkan sejumlah larik.
const arr1 = [1, 2, 3];
const arr2 = [9, 11, 13];
const nums = [...arr1, ...arr2];
Dengan semua potensi operator penyuluhan, simbolnya tidak terbukti dengan sendirinya. Jadi jika Anda tidak tahu apa fungsinya, itu tidak akan banyak membantu Anda. Sementara kedua ahli cukup dapat menghitung bahwa tim JavaScript-pro akrab dengan sintaks, ahli-2, mungkin, berpikir mungkin untuk mengatakan hal yang sama tentang tim pemrogram multibahasa. Oleh karena itu, Expert-2 mungkin lebih memilih metode concat () karena ini adalah kata kerja informatif yang mungkin dapat dipahami dari konteks kode.
Potongan kode ini memberikan hasil numerik yang sama seperti contoh di atas dengan operator ekstensi.
const arr1 = [1, 2, 3];
const arr2 = [9, 11, 13];
const nums = arr1.concat(arr2);
Ini hanyalah satu contoh untuk menunjukkan bagaimana faktor manusia memengaruhi pemilihan kode. Basis kode yang dapat diakses oleh orang-orang dari tim yang berbeda dapat diatur oleh standar yang lebih ketat yang tidak selalu mengikuti semua inovasi sintaksis yang keren. Kemudian Anda harus menyimpang dari kode sumber utama dan mempertimbangkan faktor lain terkait toolkit Anda yang dapat mempersulit atau membuat hidup lebih mudah bagi orang yang mengerjakan kode ini. Ada kode yang dapat disusun menjadi sulit untuk diuji . Ada kode yang akan membuat Anda terpojok dan Anda tidak akan dapat meningkatkan skala atau menambahkan fitur baru . Ada kode di mana kinerja menderita, tidak semua browser didukung atau aksesibilitasnya buruk . Pakar-2 memperhitungkan semua faktor ini dalam rekomendasinya.
Expert-2 juga memperhitungkan faktor penamaan. Tapi jujur saja, bahkan para ahli dalam banyak kasus tidak menangani penamaan.
Kesimpulan
Ahli sebenarnya bukanlah seseorang yang menerapkan setiap derit dari spesifikasi, tetapi seseorang yang mengetahui spesifikasi tersebut dengan cukup baik untuk menerapkan sintaksis secara rasional dan membuat keputusan yang dipikirkan dengan matang. Seorang ahli yang berkembang ke tingkat ini dapat mempersiapkan ahli baru.
Apa artinya ini bagi kita yang menganggap diri kita ahli atau setidaknya bercita-cita menjadi ahli? Ini berarti ada banyak pertanyaan untuk ditanyakan pada diri Anda sendiri saat Anda menulis kode. Evaluasi secara memadai para pengembang yang merupakan audiens target Anda. Kode terbaik yang dapat Anda tulis adalah kode yang memecahkan beberapa masalah kompleks, tetapi secara definisi dapat dimengerti oleh mereka yang akan membaca basis kode Anda.
Ya, ini sangat sulit. Dan seringkali tidak ada jawaban tunggal. Tetapi Anda harus memikirkan hal di atas ketika Anda menulis setiap fungsi Anda.
Mesin virtual kami dapat digunakan untuk pengembangan Javascript ahli.
Daftar menggunakan tautan di atas atau dengan mengklik spanduk dan dapatkan diskon 10% untuk bulan pertama menyewa server dengan konfigurasi apa pun!
