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.

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

✗ Program je správne, ak funguje.

Programy a domy

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

Programovanie je často prirovnávané k stavebníctvu práve z ohľadu na architektúru, tu však tú softvérovú. 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 pokiaľ 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ž veľmi zložitý".

Uveďme si ešte iný príklad. Keď bude naša domácnosť usporiadaná tak, že bude kladivo 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 uží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 staviariny.

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 nad vymýšľaním názvov premenných. To, aby každý vrátane nás vracajúcich sa po pár mesiacoch k vlastnému kódu, pochopil, na čo ona 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ú vypovedaciu hodnotu, ako by sme ju pomenovali variable.

Častá chyba 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 apod.

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é (pokiaľ teda nepošleme Angličanovi kód v slovenčine).

Premenné v jednom projekte pomenovávame jedným jazykom a pokiaľ 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 háčiky a čiarky. 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 háčik alebo čiarku 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 zobraziť diakritiku v prílohe mailovým klientom a pod.).

Viacslovné premenné

Dnešné aplikácie sú čoraz zložitejšie. Často sa stane, že by jedno slovo nestačilo na opis 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, pokiaľ tam iný nie je

Oddelenie slov

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

• Viac slov oddeľujeme podľa konvencie daného programovacieho jazyka, tá je v JavaScripte tzv. camelCase (slovensky ťavia notácie, 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. podtržítko 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ť:

Pokiaľ 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 druhýkrát - Práca so znakmi, sa naučíme pristupovať k jednotlivým znakom reťazca a používať ASCII hodnoty.