Kesalahan Umum JavaScript
Bab ini menunjukkan beberapa kesalahan umum JavaScript.
Tidak Sengaja Menggunakan Operator Penugasan
Program JavaScript dapat menghasilkan hasil yang tidak diharapkan jika seorang programmer secara tidak sengaja menggunakan operator penugasan ( =
), alih-alih operator perbandingan ( ==
) dalam pernyataan if.
if
Pernyataan ini kembali false
(seperti yang diharapkan) karena x tidak sama dengan 10:
let x = 0;
if (x == 10)
if
Pernyataan ini kembali true
(mungkin tidak seperti yang diharapkan), karena 10 benar:
let x = 0;
if (x = 10)
if
Pernyataan ini kembali false
(mungkin tidak seperti yang diharapkan), karena 0 salah:
let x = 0;
if (x = 0)
Tugas selalu mengembalikan nilai tugas.
Mengharapkan Perbandingan Longgar
Dalam perbandingan biasa, tipe data tidak masalah. Pernyataan ini if
mengembalikan true:
let x = 10;
let y = "10";
if (x == y)
Dalam perbandingan yang ketat, tipe data memang penting. Pernyataan ini if
mengembalikan false:
let x = 10;
let y = "10";
if (x === y)
Adalah kesalahan umum untuk melupakan bahwa switch
pernyataan menggunakan perbandingan ketat:
Ini case switch
akan menampilkan peringatan:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Ini case switch
tidak akan menampilkan peringatan:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Penambahan & Penggabungan yang Membingungkan
Penambahan adalah tentang menambahkan angka .
Penggabungan adalah tentang menambahkan string .
Dalam JavaScript kedua operasi menggunakan +
operator yang sama.
Karena itu, menambahkan angka sebagai angka akan menghasilkan hasil yang berbeda dari menambahkan angka sebagai string:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Saat menambahkan dua variabel, mungkin sulit untuk mengantisipasi hasilnya:
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Kesalahpahaman Mengambang
Semua angka dalam JavaScript disimpan sebagai 64-bit angka Floating point (Floats).
Semua bahasa pemrograman, termasuk JavaScript, memiliki kesulitan dengan nilai floating point yang tepat:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Untuk mengatasi masalah di atas, ada baiknya mengalikan dan membagi:
Contoh
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Memecahkan String JavaScript
JavaScript akan memungkinkan Anda untuk memecah pernyataan menjadi dua baris:
Contoh 1
let x =
"Hello World!";
Tetapi, melanggar pernyataan di tengah string tidak akan berfungsi:
Contoh 2
let x = "Hello
World!";
Anda harus menggunakan "garis miring terbalik" jika Anda harus mematahkan pernyataan dalam sebuah string:
Contoh 3
let x = "Hello \
World!";
Salah Tempatkan Titik Koma
Karena titik koma yang salah tempat, blok kode ini akan dieksekusi terlepas dari nilai x:
if (x == 19);
{
// code block
}
Melanggar Pernyataan Pengembalian
Ini adalah perilaku JavaScript default untuk menutup pernyataan secara otomatis di akhir baris.
Karena itu, kedua contoh ini akan mengembalikan hasil yang sama:
Contoh 1
function myFunction(a) {
let power = 10
return a * power
}
Contoh 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript juga akan memungkinkan Anda untuk memecah pernyataan menjadi dua baris.
Karena itu, contoh 3 juga akan mengembalikan hasil yang sama:
Contoh 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Tapi, apa yang akan terjadi jika Anda mematahkan pernyataan return menjadi dua baris seperti ini:
Contoh 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
Fungsi akan kembali undefined
!
Mengapa? Karena JavaScript mengira yang Anda maksud:
Contoh 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Penjelasan
Jika pernyataan tidak lengkap seperti:
let
JavaScript akan mencoba melengkapi pernyataan dengan membaca baris berikutnya:
power = 10;
Tapi karena pernyataan ini selesai:
return
JavaScript akan secara otomatis menutupnya seperti ini:
return;
Ini terjadi karena pernyataan penutup (pengakhiran) dengan titik koma adalah opsional dalam JavaScript.
JavaScript akan menutup pernyataan kembali di akhir baris, karena itu adalah pernyataan yang lengkap.
Jangan pernah melanggar pernyataan pengembalian.
Mengakses Array dengan Indeks Bernama
Banyak bahasa pemrograman mendukung array dengan indeks bernama.
Array dengan indeks bernama disebut array asosiatif (atau hash).
JavaScript tidak mendukung array dengan indeks bernama.
Dalam JavaScript, array menggunakan indeks bernomor :
Contoh
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
Dalam JavaScript, objek menggunakan indeks bernama .
Jika Anda menggunakan indeks bernama, saat mengakses array, JavaScript akan mendefinisikan ulang array menjadi objek standar.
Setelah pendefinisian ulang otomatis, metode array dan properti akan menghasilkan hasil yang tidak terdefinisi atau salah:
Contoh:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
Mengakhiri Definisi dengan Koma
Tanda koma dalam definisi objek dan array legal di ECMAScript 5.
Contoh Objek:
person = {firstName:"John", lastName:"Doe", age:46,}
Contoh Array:
points = [40, 100, 1, 5, 25, 10,];
PERINGATAN !!
Internet Explorer 8 akan macet.
JSON tidak mengizinkan tanda koma.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Tidak terdefinisi Bukan Null
Objek JavaScript, variabel, properti, dan metode dapat berupa undefined
.
Selain itu, objek JavaScript kosong dapat memiliki nilai null
.
Ini bisa membuatnya sedikit sulit untuk menguji apakah suatu objek kosong.
You can test if an object exists by testing if the type is undefined
:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null
, because this will throw an error if the
object is undefined
:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null
,
and not undefined
.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined
before you can
test for not null
:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)