Tips voor het debuggen van code aan de hand van voorbeelden met loops in JavaScript

Nu ga ik je een methode leren om fouten in code op te sporen. Stel je voor dat je om de een of andere misvatting de adviezen uit de vorige les niet hebt opgevolgd en niet-werkende code hebt gekregen. Laten we kijken hoe we de fouten kunnen vinden en hem aan de praat kunnen krijgen.

Veel beginners gebruiken een verkeerde methode om fouten te zoeken. Ze nemen de code en kijken ernaar in de hoop de fout op te merken. En dat een paar uur lang. Zo werkt het niet.

De juiste methode is het uitprinten van variabelen naar de console en vaststellen of daar staat wat er zou moeten staan, of niet. Hierbij moet je beginnen vanaf de vermoedelijke plaats van het probleem en omhoog bewegen door de code. Laten we het in de praktijk bekijken.

Stel dat je als voorbeeld de taak had om een array met tweecijferige getallen te doorlopen en de getallen te vinden waarvan het eerste cijfer één groter is dan het tweede. Laten we voor de eenvoud aannemen dat in de array getallen als strings zijn opgeslagen.

Stel dat je het probleem hebt opgelost en de volgende code hebt gekregen:

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); // geeft 0

De code geeft echter 0. In dit geval moet je eerst controleren of de code uitvoering in de if-statement terechtkomt. Laten we er iets naar de console printen:

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('!'); // print niets
		sum += elem;
	}
}

console.log(sum);

Aangezien er niets in de console verscheen, betekent dit dat de code-uitvoering gewoon niet de voorwaarde binnenkomt. Laten we met eigen ogen kijken naar wat we vergelijken:

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' en '11', '3' en '21' ...
	
	if (elem[0] === elem[1] + 1) {
		sum += elem;
	}
}

console.log(sum);

Het resultaat laat meteen zien dat de tweede term tweecijferig is. Het is gemakkelijk te begrijpen dat dit komt doordat de één als string wordt opgeteld. Laten we het probleem oplossen:

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

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

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

Na de correctie zien we al dat er iets in de variabele sum is verschenen, hoewel het incorrect is. Het is echter duidelijk dat daar staat wat we nodig hebben, maar het is opgeteld als strings, en niet als getallen. Laten we het probleem oplossen:

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; // corrigeren
	}
}

console.log(sum); // alles werkt

Verbeter de fouten die zijn gemaakt in de volgende code:

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);