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:

javascriptlet 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:

javascriptlet 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:

javascriptlet 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:

javascriptlet 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:

javascriptlet 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

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