Porady dotyczące debugowania kodu na przykładzie pętli w JavaScript

Teraz nauczę Cię metodyki poszukiwania błędów w kodzie. Wyobraźmy sobie, że z jakiegoś nieporozumienia nie stosowałeś się do rad z poprzedniej lekcji i otrzymałeś nie działający kod. Spójrzmy, jak znaleźć błędy i zmusić go do działania.

Wielu początkujących używa nieprawidłowej metodyki poszukiwania. Biorą i patrzą na kod, w nadziei, że zauważą błąd. I tak przez parę godzin. Tak to nie działa.

Prawidłową metodyką jest wypisywanie zmiennych do konsoli i sprawdzanie, czy to, co tam leży, jest tym, co potrzeba, czy nie. Przy tym zaczynać trzeba od przypuszczalnego miejsca problemu i poruszać się w górę kodu. Spójrzmy w praktyce.

Załóżmy dla przykładu, że przed Tobą stało zadanie przeglądnąć tablicę z dwucyfrowymi liczbami i znaleźć liczby, u których pierwsza cyfra jest o jeden większa od drugiej. Załóżmy dla uproszczenia, że w tablicy przechowywane są liczby w postaci ciągów znaków.

Załóżmy, że rozwiązałeś zadanie i otrzymałeś następujący kod:

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

Kod jednak zwraca 0. W tym przypadku pierwszą rzeczą trzeba sprawdzić, czy wykonanie kodu wpada do if-a. Wypiszmy w nim coś do konsoli:

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('!'); // nic nie wypisuje
    sum += elem;
  }
}

console.log(sum);

Ponieważ w konsoli nic się nie pojawiło, to znaczy, że wykonanie kodu po prostu nie wchodzi do warunku. Spójrzmy własnymi oczami, co porównujemy:

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

console.log(sum);

W rezultacie od razu staje się widoczne, że drugi składnik jest dwucyfrowy. Łatwo zrozumieć, że to dlatego, że jedynka jest dodawana jako ciąg znaków. Poprawmy problem:

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

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

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

Po poprawce już widzimy, że w zmiennej sum coś się pojawiło, chociaż niepoprawne. Widać jednak, że leży tam to, czego potrzebujemy, ale złożyło się w postaci ciągów znaków, a nie liczb. Poprawmy problem:

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

console.log(sum); // wszystko działa

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