24 Praktik Terbaik JavaScript untuk Pemula

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sebagai tindak lanjut dari "30 Praktik Terbaik HTML dan CSS", minggu ini, kita akan meninjau JavaScript! Setelah Anda meninjau daftarnya, pastikan untuk memberi tahu kami sedikit tips yang Anda temui!

1. Gunakan === Alih-alih ==

JavaScript menggunakan dua jenis operator persamaan: === | !== dan == | != Ini dianggap praktik terbaik untuk selalu menggunakan set sebelumnya saat membandingkan.

"Jika dua operan memiliki tipe dan nilai yang sama, maka === menghasilkan true dan !== menghasilkan false." - JavaScript: Bagian-Bagian yang Baik

Namun, ketika bekerja dengan == dan !=, Anda akan mengalami masalah saat bekerja dengan jenis-jenis yang berbeda. Dalam kasus ini, mereka akan mencoba untuk memaksa nilai, tidak berhasil.

2. Eval = Buruk

Bagi mereka yang tidak terbiasa, fungsi "eval" memberi kita akses ke compiler JavaScript. Pada dasarnya, kita dapat mengeksekusi hasil string dengan mengirimkannya sebagai parameter "eval".

Tidak hanya ini akan mengurangi kinerja skrip Anda secara substansial, tetapi juga menimbulkan risiko keamanan yang sangat besar karena memberikan terlalu banyak kekuatan pada teks yang dikirimkan. Hindari itu!

3. Jangan Gunakan Singkatan

Secara teknis, Anda bisa menghilangkan sebagian besar kurung kurawal dan titik koma. Sebagian besar browser akan menafsirkan dengan benar hal-hal berikut:

if(someVariableExists)
   x = false

Namun, pertimbangkan ini:

if(someVariableExists)
   x = false
   anotherFunctionCall();

Orang mungkin berpikir bahwa kode di atas akan setara dengan:

if(someVariableExists) {
   x = false;
   anotherFunctionCall();
}

Sayangnya, dia salah. Kenyataannya, itu berarti:

if(someVariableExists) {
   x = false;
}
anotherFunctionCall();

Seperti yang akan Anda perhatikan, indentasi meniru fungsionalitas dari kurung kurawal. Tak perlu dikatakan, ini adalah praktik yang mengerikan yang harus dihindari dengan segala cara. Satu-satunya waktu yang kurung kurawal harus dihilangkan adalah dengan satu-baris, dan bahkan ini adalah topik yang sangat diperdebatkan.

if(2 + 2 === 4) return 'nicely done';

Selalu Pikirkan Masa Depan

Bagaimana jika, di kemudian hari, Anda perlu menambahkan lebih banyak perintah ke pernyataan if ini. Untuk melakukannya, Anda perlu menulis ulang blok kode ini. Intinya - melangkah dengan hati-hati saat menghilangkan.

4. Manfaatkan JS Lint

JSLint adalah debugger yang ditulis oleh Douglas Crockford. Cukup tempelkan skrip Anda, dan itu akan dengan cepat memindai masalah dan kesalahan yang nyata dalam kode Anda.

"JSLint mengambil sumber JavaScript dan memindainya. Jika menemukan masalah, ia mengembalikan pesan yang menjelaskan masalah dan perkiraan lokasi di dalam sumber. Masalahnya belum tentu kesalahan sintaks, meskipun sering. JSLint melihat beberapa konvensi gaya serta masalah struktural. Itu tidak membuktikan bahwa program Anda benar. Itu hanya menyediakan satu set mata lagi untuk membantu menemukan masalah."
- Dokumentasi JSLint

Sebelum menandatangani skrip, jalankan melalui JSLint hanya untuk memastikan bahwa Anda tidak membuat kesalahan tanpa berpikir.

5. Letakkan Skrip di Bagian Bawah Halaman Anda

Tip ini telah direkomendasikan dalam artikel sebelumnya dalam seri ini. Karena itu sangat tepat, saya akan menempelkan informasinya.

Ingat -- tujuan utamanya adalah membuat pemuatan halaman secepat mungkin bagi pengguna. Saat memuat skrip, browser tidak dapat melanjutkan hingga seluruh file dimuat. Dengan demikian, pengguna harus menunggu lebih lama sebelum melihat kemajuan apa pun.

Jika Anda memiliki file JS yang hanya bertujuan untuk menambah fungsionalitas -- misalnya, setelah tombol diklik -- lanjutkan dan letakkan file-file tersebut di bagian bawah, tepat sebelum tag body penutup. Ini benar-benar praktik terbaik.

Lebih baik

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. Deklarasikan Variabel Di Luar Pernyataan For

Saat mengeksekusi pernyataan "for" yang panjang, jangan membuat mesin bekerja lebih keras dari yang seharusnya. Sebagai contoh:

Buruk

for(var i = 0; i < someArray.length; i++) {
   var container = document.getElementById('container');
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

Perhatikan bagaimana kita harus menentukan panjang array untuk setiap iterasi, dan bagaimana kita melintasi dom untuk menemukan elemen "container" setiap waktu -- sangat tidak efisien!

Lebih baik

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len;  i++) {
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

Poin bonus untuk orang yang meninggalkan komentar menunjukkan kepada kita bagaimana kita dapat lebih meningkatkan blok kode di atas.

7. Cara Tercepat untuk Membuat String

Jangan selalu meraih pernyataan "for" yang berguna ketika Anda perlu mengulang melalui array atau objek. Jadilah kreatif dan temukan solusi tercepat untuk pekerjaan yang sedang dikerjakan.

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

Saya tidak akan membuat Anda bosan dengan tolok ukur; Anda hanya harus mempercayai saya (atau mengujinya sendiri) - ini adalah metode tercepat!

Menggunakan metode asli (seperti join()), terlepas dari apa yang terjadi di belakang lapisan abstraksi, biasanya jauh lebih cepat daripada alternatif non-asli.
- James Padolsey, james.padolsey.com

8. Kurangi Globals

"Dengan mengurangi jejak global Anda menjadi nama tunggal, Anda secara signifikan mengurangi kemungkinan interaksi buruk dengan aplikasi, widget, atau perpustakaan lain."
- Douglas Crockford

var name = 'Jeffrey';
var lastName = 'Way';

function doSomething() {...}

console.log(name); // Jeffrey -- or window.name

Lebih baik

var DudeNameSpace = {
   name : 'Jeffrey',
   lastName : 'Way',
   doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

Perhatikan bagaimana kita telah "mengurangi jejak kita" menjadi hanya objek bernama "DudeNameSpace" yang konyol.

9. Komentari Kode Anda

Ini mungkin tampak tidak perlu pada awalnya, tetapi percayalah, Anda INGIN mengomentari kode Anda sebaik mungkin. Apa yang terjadi ketika Anda kembali ke proyek beberapa bulan kemudian, hanya untuk menemukan bahwa Anda tidak dapat dengan mudah mengingat apa yang telah Anda pikirkan. Atau, bagaimana jika salah satu rekan Anda perlu merevisi kode Anda? Selalu, selalu komentari bagian penting dari kode Anda.

// Cycle through array and echo out each name. 
for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]);
}

10. Rangkul Peningkatan Progresif

Selalu kompensasi saat JavaScript dinonaktifkan. Mungkin tergoda untuk berpikir, "Mayoritas pemirsa saya mengaktifkan JavaScript, jadi saya tidak akan mengkhawatirkannya." Namun, ini akan menjadi kesalahan besar.

Sudahkah Anda meluangkan waktu untuk melihat slider indah Anda dengan JavaScript dimatikan? (Unduh Toolbar Pengembang Web untuk cara mudah untuk melakukannya.) Ini mungkin merusak situs Anda sepenuhnya. Sebagai aturan praktis, rancang situs Anda dengan asumsi bahwa JavaScript akan dinonaktifkan. Kemudian, setelah Anda melakukannya, mulailah untuk meningkatkan tata letak Anda secara progresif!

11. Jangan Mengirimkan String ke "SetInterval" atau "SetTimeOut"

Pertimbangkan kode berikut:

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

Tidak hanya kode ini tidak efisien, tetapi juga berfungsi dengan cara yang sama seperti fungsi "eval". Jangan pernah mengirim string ke SetInterval dan SetTimeOut. Sebaliknya, berikan nama fungsi.

setInterval(someFunction, 3000);

12. Jangan Gunakan Pernyataan "With"

Pada pandangan pertama, pernyataan "With" tampak seperti ide yang cerdas. Konsep dasarnya adalah bahwa mereka dapat digunakan untuk menyediakan singkatan untuk mengakses objek bersarang yang sangat dalam. Sebagai contoh...

with (being.person.man.bodyparts) {
   arms = true;
   legs = true;
}

-- dari pada --

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

Sayangnya, setelah beberapa pengujian, ditemukan bahwa mereka "berperilaku sangat buruk ketika mengatur anggota baru." Sebagai gantinya, Anda harus menggunakan var.

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. Gunakan {} Alih-alih New Object()

Ada beberapa cara untuk membuat objek dalam JavaScript. Mungkin metode yang lebih tradisional adalah menggunakan constructor "new", seperti:

var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
   console.log(this.name);
}

Namun, metode ini menerima cap "praktik buruk" tanpa benar-benar demikian. Sebaliknya, saya menyarankan Anda menggunakan metode literal objek yang jauh lebih kuat.

Lebih baik

var o = {
   name: 'Jeffrey',
   lastName = 'Way',
   someFunction : function() {
      console.log(this.name);
   }
};

Perhatikan bahwa jika Anda hanya ingin membuat objek kosong, {} akan melakukan triknya.

var o = {};

"Objek literal memungkinkan kita untuk menulis kode yang mendukung banyak fitur namun tetap membuatnya relatif mudah bagi pelaksana kode kita. Tidak perlu memohon constructors secara langsung atau mempertahankan urutan argumen yang benar yang dikirimkan ke fungsi-fungsi, dll. " - dyn-web.com

14. Gunakan [] Alih-alih New Array()

Hal yang sama berlaku untuk membuat array baru.

Oke

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

Lebih baik

var a = ['Joe','Plumber'];

"Kesalahan umum dalam program JavaScript adalah menggunakan objek ketika array diperlukan atau array ketika suatu objek diperlukan. Aturannya sederhana: ketika nama properti adalah bilangan bulat sekuensial kecil, Anda harus menggunakan array. Kalau tidak, gunakan objek. " - Douglas Crockford

15. Daftar Panjang Variabel? Hilangkan Kata Kunci "Var" dan Gunakan Koma Sebagai Gantinya

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

Lebih baik

var someItem = 'some string',
    anotherItem = 'another string',
    oneMoreItem = 'one more string';

...Harusnya cukup jelas. Saya ragu ada peningkatan kecepatan yang nyata di sini, tapi itu membersihkan kode Anda sedikit.

17. Selalu, Selalu Gunakan Titik-koma

Secara teknis, sebagian besar browser akan memungkinkan Anda untuk pergi dengan menghilangkan titik-koma.

var someItem = 'some string'
function doSomething() {
  return 'something'
}

Karena itu, ini adalah praktik yang sangat buruk yang berpotensi menyebabkan masalah yang jauh lebih besar, dan lebih sulit ditemukan.

Lebih baik

var someItem = 'some string';
function doSomething() {
  return 'something';
}

18. Pernyataan "For in"

Ketika mengulang melalui item dalam suatu objek, Anda mungkin menemukan bahwa Anda juga akan mengambil fungsi metode juga. Untuk mengatasi hal ini, selalu bungkus kode Anda dalam pernyataan if yang menyaring informasinya

for(key in object) {
   if(object.hasOwnProperty(key) {
      ...then do something...
   }
}

Seperti yang dirujuk dari JavaScript: Bagian-bagian yang Baik, oleh Douglas Crockford.

19. Gunakan Fitur "Timer" Firebug untuk Mengoptimalkan Kode Anda

Butuh cara cepat dan mudah untuk menentukan berapa lama operasi berlangsung? Gunakan fitur "timer" Firebug untuk mencatat hasilnya.

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

20. Baca, Baca, Baca...

Meskipun saya penggemar besar blog pengembangan web (seperti yang ini!), sebenarnya tidak ada pengganti untuk buku ketika mengambil beberapa makan siang, atau tepat sebelum Anda pergi tidur. Selalu simpan buku pengembangan web di meja samping tempat tidur Anda. Berikut beberapa favorit JavaScript saya.

Baca mereka...beberapa kali. Saya masih melakukannya!

21. Fungsi yang Berjalan Sendiri

Daripada memanggil sebuah fungsi, itu cukup sederhana untuk membuat fungsi berjalan secara otomatis ketika halaman memuat, atau fungsi induk dipanggil. Cukup bungkus fungsi Anda dalam kurung, lalu tambahkan satu set tambahan, yang pada dasarnya memanggil fungsi tersebut.

(function doSomething() {
   return {
      name: 'jeff',
      lastName: 'way'
   };
})();

22. JavaScript Mentah Selalu Dapat Lebih Cepat Daripada Menggunakan Perpustakaan

Perpustakaan JavaScript, seperti jQuery dan Mootools, dapat menghemat banyak waktu saat pengkodean - terutama dengan operasi AJAX. Karena itu, selalu diingat bahwa perpustakaan tidak pernah bisa secepat JavaScript mentah (dengan asumsi Anda mengkode dengan benar).

Metode "each" jQuery sangat bagus untuk perulangan, tetapi menggunakan pernyataan "for" asli akan selalu lebih cepat.

23. JSON.Parse Crockford

Meskipun JavaScript 2 harus memiliki pengurai JSON bawaan, pada tulisan ini, kita masih perlu menerapkannya sendiri. Douglas Crockford, pencipta JSON, telah membuat pengurai yang dapat Anda gunakan. Ini dapat diunduh DISINI.

Cukup dengan mengimpor skripnya, Anda akan mendapatkan akses ke objek global JSON yang baru, yang kemudian dapat digunakan untuk mengurai file .json Anda.

 var response = JSON.parse(xhr.responseText);

 var container = document.getElementById('container');
 for(var i = 0, len = response.length; i < len; i++) {
   container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
 }

24. Hapus "Language"

Bertahun-tahun yang lalu, tidak jarang menemukan atribut "language" di dalam tag script.

<script type="text/javascript" language="javascript">
...
</script>

Namun, atribut ini sudah lama tidak digunakan lagi; jadi biarkan saja.

Itu saja, Semuanya

Jadi begitulah; dua puluh empat tips penting untuk memulai JavaScripter. Beri tahu saya kiat cepat Anda! Terima kasih sudah membaca. Subjek apa yang harus menjadi bagian ketiga dalam seri ini?

Ikuti kami di Twitter, atau berlangganan Feed RSS NETTUTS untuk tutorial dan artikel pengembangan web harian lainnya.

Dan pastikan untuk memeriksa ribuan item JavaScript yang tersedia di Envato Market. Pasti ada sesuatu di sana untuk membantu Anda dengan pengembangan JavaScript Anda.