Bab ini menunjukkan beberapa kesalahan umum penggunaan JavaScript.
Section Artikel
- 1 Secara Tidak Sengaja Menggunakan Operator Penugasan
- 2 Mengharapkan Perbandingan Bebas
- 3 Penambahan & Penggabungan yang Membingungkan
- 4 Salah Pengertian Float
- 5 Memisahkan String JavaScript
- 6 Salah Menempatkan Titik Koma
- 7 Penjelasan
- 8 Mengakses Array dengan Indeks Bernama
- 9 Definisi Akhir dengan Koma
- 10 Undefined bukan Not Null
Secara Tidak Sengaja Menggunakan Operator Penugasan
Program JavaScript dapat menghasilkan hasil yang tidak diharapkan jika programmer secara tidak sengaja menggunakan operator tugas (=), bukan operator perbandingan (==) dalam pernyataan if.
Pernyataan if dibawah ini mengembalikan nilai false (seperti yang diharapkan) karena x tidak sama dengan 10.
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var x = 0; document.getElementById("demo").innerHTML = Boolean(x == 10); </script> </body> </html>
Pernyataan if mengembalikan nikai true (tidak seperti yang diharapkan), karena 10 benar:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>
</body>
</html>
Pernyataan if mengembalikan nikai false (mungkin tidak seperti yang diharapkan), karena 0 salah:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>
</body>
</html>
Tugas selalu mengembalikan nilai tugas.
Mengharapkan Perbandingan Bebas
Dalam perbandingan biasa, tipe data tidak menjadi masalah. Pernyataan if dibawah ini mengembalikan true:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>
</body>
</html>
Dalam perbandingan yang strict, tipe data memang penting. Pernyataan if dibawah ini mengembalikan false:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>
</body>
</html>
Merupakan kesalahan umum untuk melupakan bahwa pernyataan switch menggunakan perbandingan yang strict:
switch case ini akan menampilkan peringatan:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10;
switch(x) {
case 10: alert("Hello");
}
</script>
</body>
</html>
switch case ini tidak akan menampilkan peringatan:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10;
switch(x) {
case "10": alert("Hello");
}
</script>
</body>
</html>
Penambahan & Penggabungan yang Membingungkan
Penjumlahan adalah tentang menambahkan angka.
Penggabungan adalah tentang menambahkan string.
Dalam JavaScript, kedua operasi tersebut menggunakan operator + yang sama.
Karena itu, menambahkan angka sebagai angka akan menghasilkan hasil yang berbeda dari menambahkan angka dengan string:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Saat menambahkan dua variabel, mungkin sulit untuk mengantisipasi hasilnya:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Salah Pengertian Float
Semua angka dalam JavaScript disimpan sebagai angka floating point 64-bit (Floats).
Semua bahasa pemrograman, termasuk JavaScript, mengalami kesulitan dengan nilai floating point yang tepat:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Untuk mengatasi masalah di atas, ada baiknya mengalikan dan membagi:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Memisahkan String JavaScript
JavaScript akan memungkinkan untuk memisahkan pernyataan menjadi dua baris:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>
</body>
</html>
Namun, memisahkan pernyataan di tengah string tidak akan berhasil:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
Anda harus menggunakan “backslash” jika harus memisahkan pernyataan dalam string:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>
</body>
</html>
Salah Menempatkan Titik Koma
Karena titik koma yang salah tempat, blok kode ini akan dieksekusi terlepas dari nilai x:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>
Memisahkan Statement Return
Hal ini adalah perilaku JavaScript default untuk menutup pernyataan secara otomatis di akhir baris.
Karenanya, kedua contoh ini akan memberikan hasil yang sama:
Contoh 1
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var power = 10
return a * power
}
</script>
</body>
</html>
Contoh 2
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var power = 10;
return a * power;
}
</script>
</body>
</html>
JavaScript juga memungkinkan untuk memecah pernyataan menjadi dua baris.
Karena itu, contoh 3 juga akan mengembalikan hasil yang sama:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return a * power;
}
</script>
</body>
</html>
Tapi, apa yang akan terjadi jika memisahkan pernyataan return dalam dua baris seperti ini:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return
a * power;
}
</script>
</body>
</html>
Fungsi akan kembali tidak terdefinisi!
Mengapa? Karena JavaScript mengira yang dimaksud adalah seperti ini:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return;
a * power;
}
</script>
</body>
</html>
Penjelasan
Jika pernyataan tidak lengkap seperti:
var
JavaScript akan mencoba melengkapi pernyataan tersebut dengan membaca baris berikutnya:
power = 10;
Tetapi karena pernyataan ini selesai:
return
JavaScript akan menutupnya secara otomatis seperti ini:
return;
Ini terjadi karena menutup (mengakhiri) pernyataan dengan titik koma adalah opsional di JavaScript.
JavaScript akan menutup pernyataan return di akhir baris, karena itu adalah pernyataan lengkap.
Jangan pernah melanggar pernyataan return.
Mengakses Array dengan Indeks Bernama
Banyak bahasa pemrograman mendukung array dengan indeks bernama.
Array dengan indeks bernama disebut array asosiatif (atau hashes).
JavaScript tidak mendukung array dengan indeks bernama.
Dalam JavaScript, array menggunakan indeks bernomor.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
Dalam JavaScript, objek menggunakan indeks bernama.
Jika menggunakan indeks bernama, saat mengakses array, JavaScript akan mendefinisikan ulang array tersebut ke objek standar.
Setelah redefinisi otomatis, metode dan properti array akan menghasilkan hasil yang tidak terdefinisi atau salah.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array</h2>
<p> Jika Anda menggunakan indeks bernama saat mengakses larik, JavaScript akan mendefinisikan ulang larik menjadi objek standar, dan beberapa metode dan properti larik akan menghasilkan hasil yang tidak terdefinisi atau salah. </p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
Definisi Akhir dengan Koma
Trailing koma dalam definisi objek dan array legal di ECMAScript 5.
Contoh Objek:
person = {firstName: "John", lastName: "Doe", usia: 46,}Contoh Array:
poin = [40, 100, 1, 5, 25, 10,];
PERINGATAN !!
Internet Explorer 8 akan crash.
JSON tidak mengizinkan tanda koma.
JSON:
person = {"firstName": "John", "lastName": "Doe", "age": 46}JSON:
poin = [40, 100, 1, 5, 25, 10];
Undefined bukan Not Null
Objek JavaScript, variabel, properti, dan metode tidak dapat ditentukan.
Selain itu, objek JavaScript kosong dapat memiliki nilai null.
Ini bisa membuat sedikit sulit untuk menguji apakah suatu objek kosong.
Anda dapat menguji apakah suatu objek bernilai dengan menguji apakah tipe nya tidak ditentukan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p> Untuk menguji apakah suatu objek tidak ada atau uji apakah jenisnya tidak ditentukan: </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>
</body>
</html>
Tetapi kita tidak dapat menguji apakah suatu objek bernilai null, karena ini akan memunculkan kesalahan jika objek tidak ditentukan.
Salah:
if (myObj === null)
Untuk mengatasi masalah ini, Anda harus menguji apakah sebuah objek tidak null, dan tidak terdefinisi
Tapi ini masih bisa menimbulkan kesalahan:
if (myObj !== null && typeof myObj !== "undefined")
Karenanya, Anda harus menguji not undefined sebelum Anda dapat menguji not null.
Benar:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p> Jika Anda ingin menguji apakah suatu objek bukan null, Anda harus menguji apakah itu belum ditentukan terlebih dahulu. </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>
</body>
</html>
