19. diel - Najčastejšie chyby JS začiatočníkov - Vieš pomenovať premenné?

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

Slovo senior programátora

Gratulujem k zdolaniu prvých lekcií Základných konštrukciou 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

Ak 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, za pár rokov sa nám začne zosúva.

Programovanie je často prirovnávané k stavebníctva 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 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ž moc 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 jednoduché. 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álne kvality z hľadiska murárstvo.

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 kurzy 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;-) Jedná sa samozrejme o zveličenie, však 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, k čomu 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, k čomu v programe slúži.

Porovnajme nasledujúce 2 kódy:

✗ Špatně

let vypis, text2;
let pole;
let foo, bar, x, vypocet;

\ ---

✓ Správně

let nazev, jmeno;
let odpovedi;
let i, j, bonus, celkovyBonus;

\ --- \ ---

Oba kódy vytvárajú premenné pre jednoduchý kvíz. U prvého príkladu nie je vôbec jasné, čo niektoré premenné obsahujú, napr. Pomenovať premennú pole má asi rovnakú výpovednú hodnotu, ako by sme ju pomenovali promenna.

Častá chyba je, že chceme napr. Uložiť výsledok nejakého výpočtu a premennou pomenujeme vypocet. 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íze celkovyBonus. Podobne je v prvom kóde pomenovaná premenná vypis, 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 nepojmenováváme premenné pomocna alebo pom pod.

Pozor na "Czechglish" a diakritiku

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

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

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

✗ Špatně

let zpráva = "Čau!";
let count;

\ ---

✓ Správně

let zprava = "Čau!";
let pocet;

alebo:

let message = "Čau!";
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.

Hoci 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ú premennou! 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 apod.).

Viacslovné premenné

Dnešné aplikácie sú stále 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 biznis aplikáciách striedajú aj pomerne dlhé názvy ako userObjectOutputStreamFactory a podobne.

Takto dlhý názov má však zmysel len 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ú textSPozdravemHelloWorld, ale stačí nám tam len pozdrav, ak tam iný nie je:)

Oddelenie slov

Kvôli čitateľnosti slová 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 ťavie 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 číslovanie premenných a už vôbec nepíšeme čísla slovami, nie pozdrav2 ani pozdravDve. "Dve" totiž nič nehovorí o tom, čo pozdrav obsahuje.

Ukážme si to na príkladoch:

✗ Špatně

let zprava1;
let zpravaDve;

Tu nie je jasné čo je uložené:

let prijato; // text, bajty, sprava, objednávka, ...?
let odeslano;

A tu je názov nečitateľný:

let prijatazprava;
let odeslanazprava;

\ ---

✓ Správně

let prijataZprava;
let odeslanaZprava;

\ --- \ ---

Nepoužívame skratky

Túto podkapitolu začne citácií:

Všetci si lámali hlavu, k čomu je ten stĺpec DATNAR. Až sa raz zistilo, že je to prej dátum narodenia.

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

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

✗ Špatně

let zp;
let pz;

\ ---

✓ Správně

let zprava;
let pocetZprav;

\ --- \ ---

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, Najčastejšie chyby JS začiatočníkov, robíš je tiež? , si ukážeme najčastejšie chyby začiatočníkov v JavaScripte, napr. Ohľadom pomenovanie kolekcií, Boolean výrazov a DRY.