Tipy na ladenie kódu na príklade cyklov v JavaScripte

Teraz vás naučím metodiku hľadania chýb v kóde. Predstavme si, že ste z nejakého nedorozumenia nenasledovali rady z predchádzajúcej lekcie a dostali ste nefunkčný kód. Pozrime sa, ako nájsť chyby a prinútiť ho fungovať.

Mnohí začiatočníci používajú nesprávnu metodiku hľadania. Zoberú a pozrú sa na kód, v nádeji, že si všimnú chybu. A tak pár hodín. Takto to nefunguje.

Správnou metodikou je vypisovanie premenných do konzoly a zisťovanie, či je v nich to, čo má byť, alebo nie. Pritom treba začať od predpokladaného miesta problému a pohybovať sa smerom nahor v kóde. Pozrime sa na tom v praxi.

Napríklad pred vami stála úloha prejsť pole s dvojcifernými číslami a nájsť čísla, ktorých prvá cifra je o jedna väčšia ako druhá. Pre jednoduchosť nech sú v poli uložené čísla ako reťazce.

Predpokladajme, že ste úlohu vyriešili a dostali ste nasledujúci kód:

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); // vypíše 0

Kód však vypíše 0. V tomto prípade treba ako prvé skontrolovať, či sa vykonanie kodu dostane do if podmienky. Vypíšme v nej niečo do konzoly:

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('!'); // nič nevypíše
    sum += elem;
  }
}

console.log(sum);

Keďže sa v konzole nič neobjavilo, znamená to, že vykonanie kodu jednoducho nezasiahlo do podmienky. Pozrime sa vlastnými očami, čo vlastne porovnávame:

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

console.log(sum);

V dôsledku toho je hneď viditeľné, že druhý člen je dvojciferný. Je ľahké pochopiť, že je to preto, lebo jednotka sa pripočítava ako reťazec. Opravme problém:

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

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

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

Po oprave už vidíme, že v premennej sum sa niečo objavilo, hoci nekorektné. Je však vidieť, že tam je to, čo potrebujeme, no zlúčilo sa to ako reťazce, a nie ako čísla. Opravme problém:

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

console.log(sum); // všetko funguje

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