Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

20 Jebakan Coding Yang Sangat Umum Bagi Pemula

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Terlepas dari tingkat keahlian kita saat ini, kita semua merupakan pemula pada satu titik tertentu. Itu tempat dimana kita membuat kesalahan pemula klasik. Hari ini, kami telah menanyakan berbagai staf penulis Nettuts+ mengenai daftar jebakan dan solusi mereka - dalam berbagai macam bahasa

Belajar dari kesalahan kami; jangan lakukan hal-hal ini!


Tips JavaScript

1 - Manipulasi DOM Yang Tidak Perlu

DOM itu lambat. Dengan membatasi interaksi kamu dengannya akan meningkatkan kinerja code kamu. Pertimbangkan code (buruk) berikut:

Code ini sebenarnya memodifikasi DOM 100 kali, dan membuat 100 obyek jQuery yang tidak perlu. 100!  Pendekatan yang lebih tepat adalah dengan menggunakan fragmen dokumen, atau membangun sebuah string yang berisi 100 elemen <li/>, dan kemudian meletakkan HTML tersebut pada elemen penampung.  Dengan cara tersebut, kamu hanya sekali memasuki DOM. Berikut adalah contohnya:

Seperti yang tersirat di atas, dengan teknik ini, kita menyentuh DOM hanya sekali, yang merupakan sebuah peningkatan, namun itu juga bergantung pada penggabungan string untuk membangun sebuah string yang besar. Ada sebuah cara berbeda untuk melakukan pendekatan ini, dengan menggunakan arrays.

Ketika membangun string yang lebih besar, penyimpanan tiap string sebagai item di dalam sebuah elemen array dan memanggil join() diakui lebih elegen daripada penggabungan string. Ini merupakan cara tercepat dan termudah untuk membangun HTML berulang dalam JavaScript tanpa menggunakan sebuah template atau framework.

2 - Nama Variable & Function Yang Tidak Konsisten dalam JavaScript

Item berikutnya ini bukan merupakan permasalahan kinerja, namun sangat penting - khususnya jika kamu mengerjakan code yang juga dikerjakan oleh orang lain.  Pastikan pengidentifikasi (nama variable dan function) tetap konsisten. Pertimbangkan variable berikut sebagai contoh:

Tidak akan masuk akal untuk menambahkan variable lainnya, bernama Something. Ini membawa inkonsistensi dalam pola penamaan variable kamu, yang menyebabkan otakmu secara kognitif menandai variable ini sebagai yang berbeda atau spesial.  Inilah mengapa konstan dalam kebanyakan bahasa dijelaskan secara tradisional dalam huruf kapital.

Kamu bisa ini selangkah lebih maju dengan menjaga panjang yang serupa, struktur gramatikal, dan sifat kejelasan ketika menamai functions. Sebagai contoh, pertimbangkan function buatan berikut:

Penamaan sebuah function yang menambahkan lima pada sebuah angka hendaklah mengikuti pola yang sama, yang ditunjukkan di sini:

Terkadang, kamu mungkin menamai sebuah function untuk menandakan nilai yang dikembalikannya. Sebagai contoh, kamu mungkin menamai sebuah function yang mengembalikan sebuah string HTML getTweetHTML().  Kamu juga mungkin memberi awalan sebuah nama function dengan do, jika function tersebut hanya menjalankan sebuah operasi dan tidak mengembalikan sebuah nilai, misalnya: doFetchTweets().

Functions konstruktor biasanya mengikuti tradisi class di dalam bahasa lainnya, dengan menjadikan huruf pertama kapital:

Sebagai aturan umum, kamu hendaklah deskriptif ketika menamai pengidentifikasi. Klasifikasikan mereka bersamaan dengan pengidentifikasi serupa lainnya dengan menjaga pola penamaan yang dapat dibaca dan memberi petunjuk pada sifat dari tujuan variable atau function.

3 - Gunakan hasOwnProperty() di dalam Loops for...in

Array pada JavaScript tidak asosiatif; mencoba untuk menggunakannya seperti ditakuti oleh komunitas. Objects, di sisi lain, bisa diperlakukan sebagai tabel hash, dan kamu bisa mengulangi melalui properti obyek dengan menggunakan loop for...in, sebagai berikut:

Namun permasalahannya, adalah bahwa loop for...in berulang melalui setiap properti angka pada rangkaian purwarupa obyek. Ini bisa menjadi masalah jika kamu hanya ingin menggunakan properti yang ada pada obyek sebenarnya.

Kamu bisa menyelesaikan permasalahan ini dengan menggunakan metode hasOwnProperty(). Berikut adalah sebuah contoh:

Versi ini hanya memperingatkan nilai properti yang berada langsung di dalam someObject.

4 - Membandingkan Nilai Boolean

Membandingkan nilai boolean di dalam sebuah kondisi merupakan pemborosan waktu komputasi. Lihat di bawah ini sebagai contoh:

Perhatikan kondisi: foo == true. Perbandingan foo dan true tidak perlu karena foo sebuah berupa nilai boolean (atau nilai benar atau salah). Alih-alih membandingkan foo, cukup gunakan itu sebagai kondisi, seperti ini:

Untuk menguji false, gunakan operator logis NOT, seperti yang ditunjukkan di bawah ini:

5 - Pengikat Event

Events merupakan subyek yang rumit dalam JavaScript. Lewatlah sudah hari -hari event handlers onclick dalam baris (kecuali dalam beberapa kasus "splash page" yang sangat langka). Sebagai gantinya, gunakan event bubbling dan delegasi.

Mari bayangkan bahwa kamu memiliki grid gambar-gambar yang perlu meluncurkan sebuah jendela lightbox modal. Berikut adalah apa yang tidak seharusnya kamu lakukan. Catatan: kami menggunakan jQuery di sini, dengan menganggap kamu menggunakan library serupa. Jika tidak, prinsip bubbling yang sama juga berlaku pada vanilla JavaScript.

HTML relevan:

JavaScript (yang buruk):

Code ini mengasumsikan bahwa pemanggilan lightbox melibatkan lewatnya sebuah elemen anchor yang mengacu gambar ukuran utuh. Alih-alih mengikat ke tiap elemen anchor, ikat ke elemen #grid-container.

Di dalam code ini, baik this dan event.target mengacu ke elemen anchor. Kamu bisa menggunakan teknik yang sama ini dengan tiap elemen induk. Cukup pastikan untuk menentukan elemen yang hendak menjadi target event.

6 - Hindari Redundansi Terner

Penggunaan pernyataan terner yang berlebihan merupakan hal yang cukup umum baik dalam JavaScript dan PHP.

Sebuah ekspresi kondisi selalu mengembalikan nilai true atau false, yang berarti kamu tidak perlu menambahkan true/false secara eksplisit sebagai nilai terner. Sebagai gantinya, kamu bisa cukup mengembalikan kondisi:


Tips PHP

7 - Gunakan Terner Jika Pantas

Pernyataan if...else merupakan bagian pusat dalam kebanyakan bahasa. Namun melakukan sesuatu yang sederhana, seperti menetapkan sebuah nilai pada sebuah variable berdasarkan sebuah kondisi - yah, mereka bisa mengotori code kamu. Pertimbangkan code berikut:

Code ini bisa dikurangi menjadi satu baris, sembari tetap mempertahankan kemudahan baca dengan menggunakan operator terner, seperti ini:

Itu jelas, ringkas, dan memberikanmu fungsionalitas yang kamu butuhkan.

Sama seperti bergunanya operator terner, pedoman paling adalah tidak menggunakannya secara berlebihan! Tujuan coding bukan untuk mengekang logikamu menjadi sesedikit mungkin baris.

8 - Menggunakan Nesting Bergaya Exceptions Alih-Alih Inception

Mari hadapi itu: kebanyakan tingkatan nesting jelek dan sulit untuk dijaga/dibaca. Code berikut relatif sederhana, namun bisa memburuk seiring waktu:

Code tersebut sangat buruk, namun kamu bisa membuatnya lebih bersih secara drastis dengan menggunakan pengecualian (exceptions), seperti berikut:

Itu mungkin memiliki jumlah baris yang sama, namun code itu lebih mudah dibaca dan dijaga. Itu juga menghindari sesi debugging yang sulit tersebut, dimana kamu telah melewatkan sebuah kemungkinan jalur melalui pernyataan if. Pastikan tetap sederhana!

Opini Kedua: berhati-hatilah ketika menggunakan exceptions untuk pengendalian alur. Lihat acuan di sini untuk informasi tambahan.

9 - Metode False-Happy

Menjadi exception-happy jauh lebih menguntungkan daripada false-happy.

Pengembang Ruby atau Python terbiasa memperhatikan exceptions yang sepele. Meskipun itu terdengar membosankan, itu sebenarnya merupakan hal yang bagus. Jika ada sesuatu yang salah, sebuah exception dilemparkan, dan kamu secara cepat mengetahui letak permasalahannya.

Di dalam PHP - dan khususnya ketika menggunakan framework yang lebih lama, seperti CodeIgniter - kamu mendapatkan apa yang saya sebut sebagai "false-happy code" (kebalikan dari exception-happy).  Alih-alih mendapatkan sebuah exception di hadapanmu, itu hanya mengembalikan nilai false dan meletakkan string error pada properti lainnya. Ini memaksa kamu untuk menariknya dari class dengan menggunakan metode get_error();.

Menjadi exception-happy jauh lebih menguntungkan daripada false-happy. Jika sebuah error terjadi di dalam code kamu (misalnya: tidak bisa menghubungkan ke S3 untuk mengunggah gambar, atau nilai kosong, dll.), maka lemparkan sebuah exception.  Kamu bisa juga melemparkan jenis exceptions khusus dengan memperluas class Exception, seperti berikut:

Melemparkan sebuah exception kustom membuat debugging lebih mudah.

Tip 10 - Gunakan Klausa Guard

Merupakan hal biasa untuk menggunakan pernyataan if untuk mengendalikan sebuah function atau jalur eksekusi method. Merupakan godaan untuk menguji sebuah kondisi dan menjalankan banyak code ketika kondisi memberikan hasil true, hanya untuk mengembalikan pernyataan else. Sebagai contoh:

Namun jenis solusi ini, menunjukkan potensi kode spaghetti. Kamu bisa membuat code ini lebih mudah dibaca dengan membalikkan kondisi. Berikut versi yang lebih baik:

Bukankah itu lebih mudah dibaca? Itu merupakan sebuah perubahan sederhana yang membuat perbedaan drastis dalam kemudahan baca code kamu.

Tip 11 - Gunakan while Untuk Pengulangan Sederhana

Loop for umumnya digunakan ketika kamu memerlukan, sebagai contoh, sebuah penghitung. Berikut loop for sederhana:

Ada beberapa alasan yang sangat bagus untuk menggunakan loop for, namun loop while mungkin lebih baik jika kamu hanya memerlukan sesuatu yang sederhana, seperti ini:

Itu tidak berfungsi dalam setiap situasi, namun itu merupakan sebuah alternatif.

Tip 12 - Pastikan Method Dapat Dijaga

Ini merupakan salah satu kesalahan yang paling sering dilakukan oleh pemula.

Sebuah method adalah sebuah obyek dari unit kerja, dan membatasi methods pada ukuran yang bisa dijaga membuat code kamu lebih mudah untuk dibaca dan dijaga. Lihatlah method monster berikut:

Pertimbangkan untuk memecah method berukuran besar menjadi potongan-potongan yang lebih kecil dan deskriptif, masing-masing bertanggungjawab dalam melakukan satu tindakan yang diabstraksikan dengan baik. Ini merupakan salah satu kesalahan yang paling sering dilakukan oleh pemula.

Inilah dia: lebih bersih, dan lebih mudah untuk melakukan debug!

Tip 13 - Hindari Nesting Terlalu Dalam

Terlalu banyak tingkatan nesting membuat code sulit dibaca dan dijaga. Pertimbangkan berikut ini:

Kamu bisa mengacu ke Tip #10 untuk membuat code ini lebih mudah dibaca dengan membalikkan beberapa kondisi.

Code ini lebih bersih dan menghasilkan hasil yang sama seperti sebelumnya.

Ketika kamu mendapatkan diri dengan pernyataan if dalam nesting, perhatikan code kamu dengan baik; metode kamu mungkin melakukan lebih dari satu tugas. Berikut contoh:

Dalam kasus ini, ekstrak nested methods ke dalam method mereka sendiri:

Tip 14 - Hindari Angka dan String Ajaib

Angka dan string ajaib itu buruk. Tentukan variable atau konstan dengan nilai-nilai yang ingin kamu gunakan dalam code kamu.

Alih-alih ini:

Jelaskan apa makna dari angka dan string tersebut, dan letakkan mereka pada sebuah variable dengan nama yang bermakna, seperti ini:

Meskipun beberapa mungkin berdebat bahwa kita tidak perlu membuat variable, target kinerja bisa diabaikan. Kemudahan baca selalu menjadi prioritas. Ingat: jangan mengoptimalkan untuk kinerja hingga kamu bisa menjelaskan kenapa itu penting.

Tip 15 - Gunakan Fungsi Array Bawaan

Gunakan fungsi array bawaan alih-alih foreach().

Tidak Ideal:

Lebih Baik:

PHP menawarkan berbagai metode array. Mereka membingungkan pada awalnya, namun luangkan sehari dan coba untuk mempelajarinya sebanyak mungkin.

Tip 16 - Jangan Gunakan Variable Secara Berlebihan

Mudah untuk menggunakan variable secara berlebihan, namun ingatlah bahwa variable disimpan di dalam memori. Untuk setiap variable yang kamu buat, sistem perlu mengalokasikan memori untuk variable tersebut. Lihat code ini:

Variable $result tidaklah penting. Code berikut meniadakan variable tersebut:

Perbedaannya tidak kentara, namun kita mampu meningkatkan contoh sederhana ini. Kita mempertahankan variable $query karena itu terkait dengan database, meskipun $result lebih terkait pada logika kita.


Rekomendasi Pemrograman Umum

Tip 17 - Bergantung Pada Mesin Database

Apapun yang lebih sedikit merupakan code smell.

Sebuah database didesain untuk berkerja dengan data; gunakan alat dan kemampuannya untuk membuat aplikasi kamu lebih efisien.

Sebagai contoh, kamu bisa menghindari kueri database yang berlebihan dalam kebanyakan situasi. Kebanyakan script manajemen penggunaan colok dan mainkan (plug-and-play) menggunakan dua kueri untuk registrasi pengguna: satu untuk memeriksa apakah e-mail/username telah ada dan yang lainnya untuk benar-benar menambahkannya ke dalam database.  Pendekatan yang jauh lebih baik adalah mengatur isian username menjadi UNIQUE. Kamu lalu bisa menggunakan fungsi asli MySQL untuk memeriksa apakah rekaman telah ditambahkan ke database.

Tip 18: Beri Nama Variable Dengan Benar

Hari-hari penamaan variable xyz telah usai (kecuali jika, tentu saja, kamu berurusan dengan sistem koordinat). Sebuah variable mewakili bagian penting logikamu. Tidak ingin mengetikkan nama yang panjang? Miliki IDE yang lebih baik. IDE modern melengkapi nama variable secara otomatis dalam sekejap mata.

Selalu lakukan coding selama enam bulan dari sekarang. Apakah kamu yakin bahwa kamu akan mengingat kemana variable $sut mengacu setahun dari sekarang/ Kemungkinan tidak: jadilah deskriptif. Apapun yang lebih sedikit adalah code smell.

Tip 19 - Methods Mewakili Tindakan

Kesalahan terjadi; kuncinya adalah belajar dari situ.

Beri nama method dengan kata kerja yang mewakili tindakan yang dilakukannya. Konsep utamanya adalah kebalikan dari skema penamaan variable. Gunakan nama yang singkat namun deskriptif dalam lingkup yang besar (yaitu: method public), dan gunakan nama yang lebih panjang dan detail dalam lingkup pendek (yaitu: method private / protected). Ini membantu membuat code kamu terbaca seperti prosa yang ditulis dengan baik.

Hindari juga bahasa selain Bahasa Inggris, ketika menamai method. Akan mengganggu untuk membaca nama function seperti 做些什麼() atau делатьчтото() di dalam project kamu. Tidak mungkin bagi pemrogram lainnya untuk memahami niatmu. Meskipun tampak terlihat arogan, untuk yang lebih baik atau lebih buruk, Bahasa Inggris merupakan bahasa yang diadopsi untuk code. Coba untuk menggunakan itu, jika kita berkerja pada sebuah tim besar.

Tip 20: Rekomendasi Struktur

Terakhir, struktur code sama pentingnya dengan kemudahan baca dan kemampuan perawatan dan lain-lainnya yang telah kita bahas hari ini. Berikut dua rekomendasi:

  • Indentasi dengan empat atau dua tab spasi. Apapun yang lebih banyak dari itu, seperti delapan spasi, terlalu banyak dan akan membuat code sulit dibaca.
  • Atur lebar garis yang pantas dan indahkan itu. Empat puluh karakter dalam sebuah baris? Kita bukan lagi di era 70-an; atur batasanmu menjadi 120 karakter, beri penanda pada layar, dan paksa dirimu atau IDE untuk mengindahkan batasan tersebut. 120 karakter memberikan lebar yang bagus tanpa membuatmu melakukan scroll.

Kesimpulan

"Saya tidak pernah membuat kesalahan bodoh dalam pemrograman." -- Tidak sekalipun.

Kesalahan pasti terjadi; kuncinya adalah belajar dari situ. Kami di Nettuts+ telah membuat, dan akan terus membuat, kesalahan. Harapan kami adalah kamu belajar dari kesalahan-kesalahan kami sehingga kamu bisa menghindarinya di masa mendatang. Namun, jujur saja, cara terbaik untuk belajar adalah membuat kesalahanmu sendiri!

Terima kasih telah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.