Prednosti i nedostaci lanaca u JavaScript-u

Iako lanci skraćuju kod, u većini slučajeva uvođenje promenljive je ipak praktičnije. Uporedite dva primera - sada sam uneo promenljivu elem i mogu postavljati bilo koji broj atributa, pri čemu se querySelector poziva samo jednom:

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

Sada ne uvodi novu promenljivu i zato moram pozvati querySelector dva puta:

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

Po mom mišljenju, ovaj kod je postao složeniji, iako zauzima jedan red manje. Pored toga, ako želim promeniti vrednost id s 'elem' na neku drugu, moraću to da uradim na mnogo mesta, što nije baš praktično.

Postoji još jedan problem - opterećenje pregledača. Traženje elemenata na stranici, koje radi metoda querySelector, je prilično spora operacija (i generalno bilo koji rad sa elementima stranice - je spora operacija - zapamtite ovo).

U našem slučaju, ako svaki put koristimo querySelector, onda će pregledač svaki put obrađivati HTML stranicu i tražiti element sa zadatim id nekoliko puta (nije važno što su id isti - pregledač će obaviti sve akcije nekoliko puta), vršeći beskorisne operacije, koje mogu usporiti rad pregledača.

Ako koristimo promenljivu elem - ne dešava se nikakvo traženje po stranici (element je već pronađen i referenca na njega se nalazi u promenljivoj).

Dat je sledeći kod:

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

Navedite nedostatke ovog koda. Ispravite ih.