Zalety i wady łańcuchów w JavaScript

Pomimo że łańcuchy skracają kod, w większości przypadków wprowadzenie zmiennej jest jednak wygodniejsze. Porównaj dwa przykłady - teraz wprowadziłem zmienną elem i mogę zapisywać dowolną liczbę atrybutów, przy czym querySelector jest wywoływany tylko raz:

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

A teraz nie wprowadzam nowej zmiennej i dlatego muszę wywołać querySelector dwa razy:

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

Moim zdaniem, ten kod stał się trudniejszy, chociaż zajmuje o jedną linię mniej. Poza tym, jeśli chcę zmienić wartość id z 'elem' na jakąś inną, będę musiał zrobić to w wielu miejscach, co nie jest zbyt wygodne.

Jest jeszcze jeden problem - obciążenie przeglądarki. Wyszukiwanie elementów na stronie, które wykonuje metoda querySelector, jest dość wolną operacją (i ogólnie jakakolwiek praca z elementami strony - to wolna operacja - zapamiętaj to).

W naszym przypadku, jeśli za każdym razem używamy querySelector, to przeglądarka za każdym razem będzie przetwarzać HTML strony i szukać elementu z podanym id kilka razy (nie ma znaczenia, że id są takie same - przeglądarka wykona wszystkie działania kilka razy), wykonując bezużyteczne operacje, które mogą spowolnić pracę przeglądarki.

Jeśli jednak używamy zmiennej elem - żadnego wyszukiwania na stronie nie ma (element jest już znaleziony i odniesienie do niego znajduje się w zmiennej).

html<img id="image" src="avatar.png" width="300" height="500">

javascriptconsole.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);