Výhody a nevýhody reťazenia v JavaScripte

Napriek tomu, že reťazenie skracuje kód, vo väčšine prípadov je zavedenie premennej napriek tomu pohodlnejšie. Porovnajte dva príklady - teraz som zaviedol premennú elem a môžem zapisovať ľubovoľný počet atribútov, pričom querySelector sa volá iba jeden raz:

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

Teraz nezavádzam novú premennú, a preto musím volať querySelector dva krát:

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

Podľa môjho názoru sa tento kód stal zložitejším, hoci zaberá o jeden riadok menej. Okrem toho, ak budem chcieť zmeniť hodnotu id z 'elem' na inú, budem musieť urobiť to na mnohých miestach, čo nie je veľmi pohodlné.

Existuje aj ďalší problém - záťž pre prehliadač. Vyhľadávanie elementov na stránke, ktoré robí metóda querySelector, je pomerne pomalá operácia (a vo všeobecnosti akákoľvek práca s elementmi stránky - je to pomalá operácia - zapamätajte si to).

V našom prípade, ak zakaždým používame querySelector, prehliadač zakaždým bude spracovávať HTML stránku a hľadať element s daným id niekoľko krát (nech sú id akékoľvek rovnaké - prehliadač vykoná všetky akcie niekoľko krát), vykonávaním zbytočných operácií, ktoré môžu spomaliť prácu prehliadača.

Ak použijeme premennú elem - k žiadnemu vyhľadávaniu na stránke nedochádza (element je už nájdený a odkaz naň je uložený v premennej).

Daný je nasledujúci 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 tohto kódu. Opravte ich.