Voor- en nadelen van kettingen in JavaScript

Ondanks het feit dat kettingen code verkorten, is het in de meeste gevallen toch handiger om een variabele te introduceren. Vergelijk twee voorbeelden - nu heb ik een variabele elem geïntroduceerd en kan ik een willekeurig aantal attributen opschrijven, terwijl querySelector slechts één keer wordt aangeroepen:

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

Nu introduceer ik geen nieuwe variabele en daarom moet ik querySelector twee keer aanroepen:

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

Naar mijn mening is deze code complexer geworden, hoewel hij één regel minder beslaat. Bovendien, als ik de waarde van id wil wijzigen van 'elem' naar een andere, moet ik dit op veel plaatsen doen, wat niet erg handig is.

Er is nog een probleem - de belasting van de browser. Het zoeken naar elementen op de pagina, wat de methode querySelector doet, is een vrij trage operatie (en over het algemeen is elke werk met paginaelementen een trage operatie - onthoud dit).

In ons geval, als we elke keer querySelector gebruiken, dan zal de browser elke keer de HTML-pagina verwerken en opnieuw het element met het opgegeven id zoeken (het maakt niet uit dat de id hetzelfde is - de browser zal alle handelingen meerdere keren uitvoeren), waardoor nutseloze operaties worden uitgevoerd die de werking van de browser kunnen vertragen.

Als we daarentegen de variabele elem gebruiken - vindt er geen zoekactie op de pagina plaats (het element is al gevonden en een verwijzing ernaar bevindt zich in de variabele).

Gegeven de volgende code:

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

Wijs op de tekortkomingen van deze code. Verbeter ze.