Перавагі і недахопы ланцужкоў у JavaScript

Нягледзячы на тое, што ланцужкі скарачаюць код, у большасці выпадкаў увядзенне зменнай усё-такі зручней. Параўнайце два прыклады - зараз я ўвёў зменную elem і магу запісваць любую колькасць атрыбутаў, пры гэтым querySelector выклікаецца толькі адзін раз:

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

А зараз я не ўводжу новую зменную і таму мне прыходзіцца выклікаць querySelector два разы:

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

На мой погляд, гэты код стаў складаней, хоць і займае на адну радок менш. Акрамя таго, калі я захачу змяніць значэнне id з 'elem' на якое-небудзь іншае, мне прыйдзецца рабіць гэта ў многіх месцах, што не вельмі зручна.

Ёсць і яшчэ праблема - нагрузка на браўзэр. Пошук элементаў па старонцы, які робіць метад querySelector, з'яўляецца даволі павольнай аперацыяй (і ўвогуле любая праца з элементамі старонкі - гэта павольная аперацыя - запомніце гэта).

У нашым выпадку, калі мы кожны раз выкарыстоўваем querySelector, то браўзэр кожны раз будзе апрацоўваць HTML старонку і шукаць элемент з зададзеным id некалькі разоў (няважна, што id аднолькавыя - браўзэр зробіць усе дзеянні некалькі разоў), здзяйсняючы бескарысныя аперацыі, якія могуць запаволіць працу браўзэра.

Калі ж мы выкарыстоўваем зменную elem - ніякага пошуку па старонцы не адбываецца (элемент ужо знойдзены і спасылка на яго ляжыць у зменнай).

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