11. diel - Najčastejšie chyby JS nováčikov - Vieš pomenovať premenné?

V predchádzajúcom kvíze, Kvíz - Podmienky, cykly a polia v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom JavaScript tutoriále si ukážeme prvé tzv. dobré praktiky pre programovanie v JavaScripte. Nielen nováčikovia ich často porušujú a zanášajú tak do svojich programov zbytočné chyby, možno ich robíš tiež?

Slovo senior programátora

Gratulujem k zdolaniu prvých lekcií Základných konštrukcií jazyka JavaScript!

Materiál pre dnešnú lekciu som zostavil na základe 20-ročných skúseností s programovaním. Ako šéfredaktorovi a lektorovi mi rukami prešli stovky, možno tisíce zdrojových kódov vytvorených komunitou. Nebolo ťažké si všimnúť, že väčšina z nich, hoci funguje, obsahuje zbytočné chyby, ktoré sa navyše stále dookola opakujú. Chyby napodiv často robili ako nováčikovia, tak skúsenejší programátori, a aj ja som ich robil, keď som začínal.

Prišiel som k tomu, že základným a mylným predpokladom je:

✗ Program je správne, ak funguje.

Programy a domy

Ak staviame dom, že sa nám páči a že do neho nefúka, neznamená, že je správne postavený. Dom totiž musí mať premyslenú architektúru a Ak nemá základy, o pár rokov sa nám začne zosúvať.

Programovanie je často prirovnávané k stavebníctvu práve s ohľadom na architektúru, tu však ide o tú softwarovú. Vysvetlime si prečo.

Ľudský mozog dokáže naraz pracovať len s určitým obmedzeným množstvom informácií. Zjednodušene môžeme povedať, že ak je program neprehľadne napísaný, od určitej chvíle by musel programátor udržať v hlave viac vecí, než človek vôbec dokáže. Pridávanie ďalších funkcií do takého programu potom vždy spôsobí, že v aplikácii vznikne chyba. V praxi to dopadá tak, že hobby projekt autora "prestane baviť" alebo komerčný projekt skrachuje, pretože je "už príliš zložitý".

Uveďme si ešte iný príklad. Keď bude naša domácnosť usporiadaná tak, že kladivo bude v lekárničke, ktorá bude umiestnená v pivnici, asi ťažko v nej budeme schopní efektívne fungovať. Hoci tento príklad znie absurdne, jeho alternatívy v podobe programov vznikajú denne.

Kedy je program správne?

To je ľahké. Program je správne, ak:

• funguje,
• dodržiava dobré praktiky a
• je otestovaný.

Všimnite si, že funkcionalita z pohľadu používateľa programu predstavuje len 1/3 kritérií kvality programu. Podobne, ako funkčnosť domu z pohľadu bývajúceho predstavuje asi len zlomok jeho reálnej kvality z hľadiska stavbariny.

Práve o porušovaní dobrých praktík a kvalite kódu sa dnes budeme baviť. Záleží nám na tom, aby ste boli naozaj dobrí, preto týchto lekcií nájdete naprieč našimi kurzami ešte niekoľko.

Ako správne pomenovávať premenné?

Hovorí sa, že 10 % času niečo programujeme a 90 % času pre to vymýšľame názov Ide samozrejme o zveličenie, ale vtip naráža na nutnosť stráviť určitý čas vymýšľaním názvov premenných. To preto, aby každý, vrátane nás vracajúcich sa po pár mesiacoch k vlastnému kódu, pochopil, na čo vlastne daná premenná slúži. Všeobecne sa dá spoľahnúť na jednoduché pravidlo:

Premenné vždy pomenovávame podľa toho, čo obsahujú, nie podľa toho, na čo v programe slúžia.

Porovnajme nasledujúce 2 kódy:

let write, text2;
let array;
let foo, bar, x, calculation;

let title, name;
let answers;
let i, j, bonus, totalBonus;

Oba kódy vytvárajú premenné pre jednoduchý kvíz. Pri prvom príklade nie je vôbec jasné, čo niektoré premenné obsahujú, napr. pomenovať premennú array má asi rovnakú výpovednú hodnotu, ako keby sme ju pomenovali variable.

Častou chybou je, že chceme napr. uložiť výsledok nejakého výpočtu a premennú pomenujeme calculation. Výpočet s premennou však vôbec nesúvisí, to je nejaká akcia (dej), premenná obsahuje vždy hodnotu (výsledok deja). Tou je tu v prípade kvízu totalBonus. Podobne je v prvom kóde pomenovaná premenná write, pretože ju niekde vypisujeme. Z druhého kódu ale reálne vidíme, že obsahuje názov kvízu.

Ruku na srdce - kto z vás by pochopil, že kód vľavo je program na kvízy?

Tiež nikdy nepomenovávame premenné auxiliary alebo aux a pod.

Pozor na mixovanie jazykov a diakritiku

V zdrojovom kóde je na našej úrovni začiatočníkov jedno, akým jazykom budeme pomenovávať premenné (ak teda nepošleme Angličanovi kód v slovenčine).

Premenné v jednom projekte pomenovávame jedným jazykom a ak po slovensky, tak bez diakritiky!

Opäť si ukážme príklady:

let správa = "Hi!";
let count;

let sprava = "Hi!";
let pocet;

let message = "Hi!";
let count;

V identifikátoroch (napr. v názvoch premenných) nikdy nepoužívame mäkčene a dĺžne. V hodnotách v nich uložených je to už samozrejme v poriadku.

Napriek tomu, že moderné jazyky podporujú kódovanie UTF-8 aj v identifikátoroch, možno veľmi ľahko na mäkčeň a dĺžeň zabudnúť a používame potom inú premennú! Navyše súbor so zdrojovým kódom môže spracovávať aplikácia, ktorá ho nepodporuje, a typicky sa to aj časom stane (napr. je občas problém so zobrazením diakritiky mailovým klientom v prílohe a pod.).

Viacslovné premenné

Dnešné aplikácie sú čoraz zložitejšie. Často sa stane, že by jedno slovo nestačilo na popis toho, čo je v premennej uložené. Potom je výhodné použiť viac slov. Krátke identifikátory z 80. rokov tak v súčasných business aplikáciách striedajú aj pomerne dlhé názvy ako userObjectOutputStreamFactory a podobne.

Takto dlhý názov má však zmysel iba v zložitej aplikácii, kde je niekoľko podobných premenných, a preto musíme pridať ďalšie slovo. Nebudeme teda v Hello world aplikácii vytvárať premennú textWithGreetingHelloWorld, ale stačí nám tam len greeting, ak tam iný pozdrav nie je

Oddeľovanie slov

Kvôli čitateľnosti musíme slová v takom názve premennej nejako oddeliť:

• Viac slov oddeľujeme podľa konvencie daného programovacieho jazyka, tá je v JavaScripte tzv. camelCase (slovensky ťavia notácia, kedy každé ďalšie slovo má veľké písmeno a názov potom vyzerá ako hrby). V iných jazykoch sa môže používať napr. podčiarkovník ako snake_case a ďalšie notácie.
• Vyhneme sa pokiaľ možno číslovaniu premenných a už vôbec nepíšeme čísla slovami, nie greeting2 ani greetingTwo. "Two" totiž nič nehovorí o tom, čo pozdrav obsahuje.

Ukážme si to na príkladoch:

let message1;
let messageTwo;

let received; // text, bytes, message, order, ...?
let sent;

let receivedmessage;
let sentmessage;

let receivedMessage;
let sentMessage;

Nepoužívame skratky

Túto podkapitolu začnime citáciou:

Všetci si lámali hlavu, k čomu je ten stĺpec DATBIR. Až sa raz zistilo, že je to vraj dátum narodenia (date of birth).

Táto zlá praktika je vlastne opakom viacslovných názvov premenných. Nevymýšľame nezmyselné skratky, napríklad z názvu rm nikto nespozná, že myslíme receivedMessage. Pomôcka môže byť:

Ak sa na kód pozrie niekto iný ako my, mal by presne vedieť, čo v ktorej premennej je.

let ms;
let mc;

let message;
let messageCount;

Ako sme sľubovali, k téme dobrých praktík sa ešte niekoľkokrát vrátime v podobných, skôr odpočinkových lekciách

V budúcej lekcii, Textové reťazce v JavaScripte po druhé - Práca so znakmi, sa naučíme pristupovať k jednotlivým znakom reťazca a používať ASCII hodnoty.