Avantajele și dezavantajele lanțurilor în JavaScript

În ciuda faptului că lanțurile scurtează codul, în majoritatea cazurilor introducerea unei variabile este totuși mai convenabilă. Comparați două exemple - acum am introdus variabila elem și pot scrie orice număr de atribute, în timp ce querySelector este apelat doar o dată:

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

Acum nu introduc o nouă variabilă și de aceea trebuie să apelez querySelector de două ori:

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

În opinia mea, acest cod a devenit mai complex, deși ocupă cu un rând mai puțin. În plus, dacă voi dori să schimb valoarea id de la 'elem' la altceva, va trebui să fac asta în multe locuri, ceea ce nu este foarte convenabil.

Mai există o problemă - încărcarea browserului. Căutarea elementelor în pagină, pe care o face metoda querySelector, este o operație destul de înceată (și în general orice lucru cu elementele paginii - este o operație înceată - amintiți-vă asta).

În cazul nostru, dacă folosim de fiecare dată querySelector, atunci browserul de fiecare dată va procesa HTML-ul paginii și va căuta elementul cu id-ul dat de mai multe ori (nu contează că id-urile sunt identice - browserul va efectua toate acțiunile de mai multe ori), făcând operații inutile care pot încetini funcționarea browserului.

Dacă folosim variabila elem - nu are loc nicio căutare în pagină (elementul este deja găsit și o referință la el se află în variabilă).

Este dat următorul cod:

<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);

Indicați deficiențele acestui cod. Corectați-le.