Hindari variabel global, hindari keyword new, hindari ==, hindari eval().
Section Artikel
- 1 Hindari Variabel Global
- 2 Selalu Nyatakan Variabel Lokal
- 3 Deklarasi di Atas
- 4 Inisialisasi Variabel
- 5 Jangan Pernah Deklarasikan Angka, String, atau Objek Boolean
- 6 Jangan Gunakan new Object()
- 7 Waspadai Jenis Konversi Otomatis
- 8 Gunakan === Perbandingan
- 9 Gunakan Default Parameter
- 10 Akhiri Switch dengan Default
- 11 Hindari Menggunakan eval ()
Hindari Variabel Global
Minimalkan penggunaan variabel global.
Hal ini mencakup semua tipe data, objek, dan fungsi.
Variabel dan fungsi global dapat ditimpa oleh skrip lain.
Gunakan variabel lokal sebagai gantinya, dan pelajari cara menggunakan closure.
Selalu Nyatakan Variabel Lokal
Semua variabel yang digunakan dalam suatu fungsi harus dideklarasikan sebagai variabel lokal.
Variabel lokal harus dideklarasikan dengan kata kunci var atau kata kunci let, jika tidak maka akan menjadi variabel global.
Mode strict tidak mengizinkan variabel yang tidak dideklarasikan.
Deklarasi di Atas
Merupakan praktik pengkodean yang baik untuk meletakkan semua deklarasi di bagian atas setiap skrip atau fungsi.
Hal ini akan berdampak menjadi:
- Memberikan kode yang lebih bersih
- Menyediakan satu tempat untuk mencari variabel lokal
- Mempermudah untuk menghindari variabel global yang tidak diinginkan (tersirat)
- Kurangi kemungkinan deklarasi ulang yang tidak diinginkan
Contoh:
// Declare at the beginning var firstName, lastName, price, discount, fullPrice; // Use later firstName = "John"; lastName = "Doe"; price = 19.90; discount = 0.10; fullPrice = price - discount;
Ini juga berlaku untuk variabel loop:
// Declare at the beginning
var i;
// Use later
for (i = 0; i < 5; i++) {Inisialisasi Variabel
Ini adalah praktik pengkodean yang baik untuk menginisialisasi variabel saat mendeklarasikannya.
Hal ini akan berdampak:
- Memberikan kode yang lebih bersih
- Menyediakan satu tempat untuk menginisialisasi variabel
- Hindari nilai yang tidak ditentukan
Contoh:
// Declare and initiate at the beginning var firstName = "", lastName = "", price = 0, discount = 0, fullPrice = 0, myArray = [], myObject = {};
Menginisialisasi variabel memberikan gambaran tentang tujuan penggunaan (dan tipe data yang diinginkan).
Jangan Pernah Deklarasikan Angka, String, atau Objek Boolean
Selalu perlakukan angka, string, atau boolean sebagai nilai primitif. Bukan sebagai objek.
Menyatakan jenis ini sebagai objek, memperlambat kecepatan eksekusi, dan menghasilkan efek samping yang buruk.
Contoh:
<!DOCTYPE html> <html> <body> <p> Jangan pernah membuat string sebagai objek. </p> <p> String dan objek tidak dapat dibandingkan dengan aman. </p> <p id="demo"></p> <script> var x = "John"; // x is a string var y = new String("John"); // y is an object document.getElementById("demo").innerHTML = x===y; </script> </body> </html>
Atau lebih parah lagi:
<!DOCTYPE html>
<html>
<body>
<p> Jangan pernah membuat string sebagai objek. </p>
<p> String dan objek tidak dapat dibandingkan dengan aman. </p>
<p id="demo"></p>
<script>
var x = new String("John");
var y = new String("John");
document.getElementById("demo").innerHTML = x==y;
</script>
</body>
</html>
Jangan Gunakan new Object()
- Gunakan {} sebagai ganti new Object()
- Gunakan “” alih-alih new String()
- Gunakan 0 sebagai ganti new Number()
- Gunakan false, bukan new Boolean()
- Gunakan [] sebagai ganti new Array()
- Gunakan / () / sebagai ganti new RegExp()
- Gunakan function () {} alih-alih new Function()
Contoh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x1 = {};
var x2 = "";
var x3 = 0;
var x4 = false;
var x5 = [];
var x6 = /()/;
var x7 = function(){};
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
Waspadai Jenis Konversi Otomatis
Berhati-hatilah karena angka dapat secara tidak sengaja diubah menjadi string atau NaN (Bukan Angka).
JavaScript diketik secara longgar. Variabel dapat berisi tipe data yang berbeda, dan variabel dapat mengubah tipe datanya.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = "Hello";
var x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
Saat melakukan operasi matematika, JavaScript dapat mengonversi angka menjadi string:
<!DOCTYPE html>
<html>
<body>
<p> Hapus komentar (di awal baris) untuk menguji setiap kasus: </p>
<p id="demo"></p>
<script>
var x = 5;
//x = 5 + 7; // x.valueOf() is 12, typeof x is a number
//x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
//x = "5" + 7; // x.valueOf() is 57, typeof x is a string
//x = 5 - 7; // x.valueOf() is -2, typeof x is a number
//x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
//x = "5" - 7; // x.valueOf() is -2, typeof x is a number
//x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>
</body>
</html>
Mengurangkan string dengan string, tidak menghasilkan kesalahan tetapi mengembalikan NaN (Bukan Angka):
<!DOCTYPE html>
<html>
<body>
<p id = "demo"> Paragraf pertama saya. </p>
<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>
</body>
</html>
Gunakan === Perbandingan
Operator pembanding == selalu mengonversi (ke pencocokan tipe) sebelum membandingkan.
Operator === memaksa perbandingan nilai dan jenis.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Hapus komentar (di awal setiap baris) untuk menguji setiap kasus: </p>
<p id="demo"></p>
<script>
var x;
//x = (0 == ""); // true
//x = (1 == "1"); // true
//x = (1 == true); // true
//x = (0 === ""); // false
//x = (1 === "1"); // false
//x = (1 === true); // false
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Gunakan Default Parameter
Jika fungsi dipanggil dengan argumen yang hilang, nilai argumen yang hilang diatur ke tidak ditentukan.
Nilai yang tidak ditentukan dapat merusak kode. Kebiasaan yang baik untuk menetapkan nilai default ke argumen.
Contoh:
<!DOCTYPE html> <html> <body> <p> Menyetel nilai default ke parameter fungsi. </p> <p id="demo"></p> <script> function myFunction(x, y) { if (y === undefined) { y = 0; } return x * y; } document.getElementById("demo").innerHTML = myFunction(4); </script> </body> </html>
ECMAScript 2015 memungkinkan parameter default dalam pemanggilan fungsi:
function (a=1, b=1) { /*function code*/ }
Akhiri Switch dengan Default
Selalu akhiri pernyataan switch dengan default.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "unknown";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
Hindari Menggunakan eval ()
Fungsi eval() digunakan untuk menjalankan teks sebagai kode. Di hampir semua kasus, fungsi ini tidak perlu digunakan.
Karena memungkinkan kode arbitrer dijalankan dan juga merupakan masalah keamanan.
