Consigli per il debug del codice con esempi di cicli in JavaScript

Ora ti insegnerò una metodologia per trovare errori nel codice. Immaginiamo che, per qualche incomprensione, tu non abbia seguito i consigli della lezione precedente e abbia ottenuto un codice non funzionante. Vediamo come trovare gli errori e farlo funzionare.

Molti principianti usano una metodologia di ricerca errata. Prendono e guardano il codice, sperando di notare l'errore. E così per un paio d'ore. Non funziona così.

La metodologia corretta consiste nell'output delle variabili in console e nel determinare se contengono ciò che serve o meno. In questo caso, è necessario iniziare dal punto presunto del problema e muoversi verso l'alto nel codice. Vediamo in pratica.

Supponiamo, ad esempio, che tu avessi il compito di scorrere un array con numeri a due cifre e trovare i numeri in cui la prima cifra è maggiore di uno rispetto alla seconda. Per semplicità, supponiamo che nell'array siano memorizzati numeri sotto forma di stringhe.

Supponiamo che tu abbia risolto il problema e ottenuto il seguente codice:

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

Il codice, tuttavia, restituisce 0. In questo caso, la prima cosa da fare è verificare se l'esecuzione del codice entra nell'if. Stampiamo qualcosa nella console al suo interno:

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('!'); // non stampa nulla
		sum += elem;
	}
}

console.log(sum);

Poiché nella console non appare nulla, ciò significa che l'esecuzione del codice semplicemente non entra nella condizione. Vediamo con i nostri occhi cosa stiamo confrontando:

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

console.log(sum);

Di conseguenza, diventa immediatamente visibile che il secondo termine è a due cifre. È facile capire che ciò è dovuto al fatto che l'uno viene aggiunto come stringa. Correggiamo il problema:

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

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

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

Dopo la correzione, vediamo già che nella variabile sum è apparso qualcosa, sebbene non corretto. Tuttavia, si vede che contiene ciò che ci serve, ma è stato concatenato come stringhe, e non come numeri. Correggiamo il problema:

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

console.log(sum); // tutto funziona

Correggi gli errori commessi nel seguente codice:

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