Fordele og ulemper ved kæder i JavaScript

På trods af at kæder forkorter koden, er indførelse af en variabel i de fleste tilfælde alligevel mere bekvem. Sammenlign to eksempler - nu har jeg indført variablen elem og kan tilskrive en hvilken som helst mængde af attributter, mens querySelector kun kaldes én gang:

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

Nu introducerer jeg ikke en ny variabel, og derfor er jeg nødt til at kalde querySelector to gange:

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

Efter min mening er denne kode blevet mere kompleks, selvom den optager én linje mindre. Derudover, hvis jeg ønsker at ændre værdien af id fra 'elem' til en anden, bliver jeg nødt til at gøre det på mange steder, hvilket ikke er særlig bekvemt.

Der er også et andet problem - belastningen på browseren. Søgningen efter elementer på siden, som metoden querySelector udfører, er en ret langsom operation (og generelt er ethvert arbejde med sideelementer - en langsom operation - husk dette).

I vores tilfælde, hvis vi hver gang bruger querySelector, vil browseren hver gang behandle HTML-siden og søge efter elementet med den givne id flere gange (uanset at id er den samme - browseren vil udføre alle handlinger flere gange), hvilket udfører unødvendige operationer, der kan bremse browserens ydeevne.

Hvis vi derimod bruger variablen elem - sker der ingen søgning på siden (elementet er allerede fundet og en reference til det ligger i variablen).

Følgende kode er givet:

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

Angiv ulemperne ved denne kode. Ret dem.