Javascript

JavaScript Best Practices

Hindari variabel global, hindari keyword new, hindari ==, hindari 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.


Catur Kurnia Sari

Share
Tags: javascript