Tips Debugging Kode dengan Contoh Perulangan dalam JavaScript

Sekarang saya akan mengajarkan Anda metodologi untuk mencari kesalahan dalam kode. Bayangkan bahwa karena suatu kesalahpahaman Anda tidak mengikuti saran dari pelajaran sebelumnya dan mendapatkan kode yang tidak berfungsi. Mari kita lihat bagaimana menemukan kesalahan dan membuatnya berfungsi.

Banyak pemula menggunakan metodologi pencarian yang salah. Mereka mengambil dan melihat kode tersebut, dengan harapan akan melihat kesalahan. Dan begitu selama beberapa jam. Ini tidak bekerja seperti itu.

Metodologi yang benar adalah dengan menampilkan variabel ke konsol dan menentukan, apakah yang ada di dalamnya sudah sesuai yang dibutuhkan atau belum. Dalam hal ini, Anda harus mulai dari tempat yang diduga bermasalah dan bergerak ke atas menelusuri kode. Mari kita lihat dalam praktik.

Sebagai contoh, anggap Anda memiliki tugas untuk mengulang array berisi angka dua digit dan menemukan angka di mana digit pertama satu lebih besar dari digit kedua. Untuk mempermudah, anggap array menyimpan angka dalam bentuk string.

Anggap Anda telah menyelesaikan masalah dan mendapatkan kode berikut:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum); // menghasilkan 0

Namun, kode tersebut menghasilkan 0. Dalam kasus ini, langkah pertama adalah memeriksa apakah eksekusi kode masuk ke dalam blok if. Tampilkan sesuatu di konsol di dalamnya:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (elem[0] === elem[1] + 1) {
		console.log('!'); // tidak menampilkan apa pun
		sum += elem;
	}
}

console.log(sum);

Karena tidak ada yang muncul di konsol, itu berarti eksekusi kode sama sekali tidak masuk ke dalam kondisi. Mari kita lihat dengan mata kepala sendiri, apa yang kita bandingkan:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	console.log(elem[0], elem[1] + 1); // '2' dan '11', '3' dan '21' ...
	
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum);

Hasilnya, segera terlihat bahwa suku kedua adalah dua digit. Mudah dipahami bahwa ini karena angka satu ditambahkan sebagai string. Mari perbaiki masalahnya:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) { // memperbaiki
		sum += elem;
	}
}

console.log(sum); // '021324354'

Setelah perbaikan, kita sudah melihat bahwa di variabel sum sudah ada sesuatu, meskipun tidak benar. Namun terlihat, bahwa yang ada di dalamnya adalah yang kita butuhkan, tapi itu ditambahkan sebagai string, bukan angka. Mari perbaiki masalahnya:

let arr = ['21', '32', '34', '43', '45', '54', '55'];
let sum = 0;

for (let elem of arr) {
	if (+elem[0] === +elem[1] + 1) {
		sum += +elem; // memperbaiki
	}
}

console.log(sum); // semua berfungsi

Perbaiki kesalahan yang dilakukan dalam kode berikut:

let obj = {a: 10, b: 20, c: 30, d: 40, e: 50};
let sum = 0;

for (let elem in obj) {
	if (elem[0] === '1' && elem[0] === '2') {
		sum += +elem;
	}
}

console.log(sum);