Výhody a nevýhody řetězení v JavaScriptu

Přestože řetězení zkracuje kód, ve většině případů je zavedení proměnné přesto pohodlnější. Porovnejte dva příklady - nyní jsem zavedl proměnnou elem a mohu zapisovat libovolný počet atributů, přičemž querySelector je volán pouze jedenkrát:

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

Nyní nezavádím novou proměnnou, a proto musím volat querySelector dvakrát:

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

Podle mého názoru se tento kód stal složitějším, ačkoli zabírá o jeden řádek méně. Kromě toho, pokud budu chtít změnit hodnotu id z 'elem' na nějakou jinou, budu muset to udělat na mnoha místech, což není příliš pohodlné.

Existuje ještě další problém - zátěž pro prohlížeč. Hledání elementů na stránce, které provádí metoda querySelector, je poměrně pomalá operace (a obecně jakákoli práce s elementy stránky je pomalá operace - zapamatujte si to).

V našem případě, pokud pokaždé používáme querySelector, prohlížeč pokaždé zpracuje HTML stránku a bude hledat element s daným id několikrát (nežádoucí je, že id jsou stejná - prohlížeč provede všechny akce několikrát), čímž provádí zbytečné operace, které mohou zpomalit práci prohlížeče.

Pokud použijeme proměnnou elem - k žádnému hledání na stránce nedochází (prvek již byl nalezen a odkaz na něj je uložen v proměnné).

Je dán následující kód:

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

Uveďte nedostatky tohoto kódu. Opravte je.