Conseils pour déboguer du code avec des exemples de boucles en JavaScript

Je vais maintenant vous apprendre une méthode pour rechercher des erreurs dans le code. Imaginons que, pour une raison quelconque, vous n'ayez pas suivi les conseils de la leçon précédente et que vous ayez obtenu un code qui ne fonctionne pas. Voyons comment trouver les erreurs et le faire fonctionner.

Beaucoup de débutants utilisent une mauvaise méthode de recherche. Ils prennent le code et le regardent, en espérant repérer l'erreur. Et ceci pendant quelques heures. Cela ne fonctionne pas comme ça.

La bonne méthode consiste à afficher les variables dans la console et à déterminer si elles contiennent ce qu'elles devraient ou non. Il faut commencer par l'endroit supposé du problème et remonter le code. Voyons cela en pratique.

Supposons pour l'exemple que vous aviez pour tâche de parcourir un tableau de nombres à deux chiffres et de trouver les nombres dont le premier chiffre est supérieur de un au second. Pour simplifier, supposons que le tableau contienne les nombres sous forme de chaînes.

Supposons que vous ayez résolu le problème et obtenu le code suivant :

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

Le code, cependant, donne 0. Dans ce cas, la première chose à faire est de vérifier si l'exécution du code entre dans le if. Affichons quelque chose dans la console à l'intérieur :

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('!'); // n'affiche rien
		sum += elem;
	}
}

console.log(sum);

Puisque rien n'apparaît dans la console, cela signifie que l'exécution du code ne rentre simplement pas dans la condition. Regardons de nos propres yeux ce que nous comparons :

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

console.log(sum);

En conséquence, il devient immédiatement visible que le second terme a deux chiffres. Il est facile de comprendre que c'est parce que le un est ajouté comme une chaîne. Corrigeons le problème :

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

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

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

Après la correction, nous voyons déjà que quelque chose est apparu dans la variable sum, bien qu'incorrect. On voit, cependant, qu'elle contient ce dont nous avons besoin, mais que les éléments se sont additionnés sous forme de chaînes, et non de nombres. Corrigeons le problème :

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; // corrigé
	}
}

console.log(sum); // tout fonctionne

Corrigez les erreurs commises dans le code suivant :

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