JavaScript'теги чынжырлардын артыкчылыктары жана кемчиликтери

Чынжырлар кодду кыскарткандыгына карабастан, көпчүлүк учурларда өзгөрмө киргизүү дагы ыңгайлуураак. Эки мисалды салыштырып көрөлү - мен азыр elem өзгөрмөсүн киргиздим жана каалаган сандагы атрибуттарды жаза алам, бул учурда querySelector методу бир гана жолу чакырылат:

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

Азыр мен жаңы өзгөрмө киргизбей жаткамды, ошондуктан мага querySelector методун эки жолу чакырууга туура келет:

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

Менин оюмча, бул код татаалыраак болуп калды, бирок бир сап кыскараак. Мындан тышкары, эгер мен id маанисин 'elem' дегенден башка бир нерсеге өзгөрткүм келсе, мага көп жерлерде муну жасашым керек болот, бул өтө ыңгайлуу эмес.

Дагы бир маселе бар - браузерге жүк түшүрүү. querySelector методу жасаган баракча боюнча элементтерди издөө, бул өтө жай операция (жана жалпысынан баракчанын элементтери менен иштөө - бул жай операция - муну эсиңизде сактаңыз).

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

Эгер биз elem өзгөрмөсүн колдонсок - баракча боюнча эч кандай издөө болбойт (элемент табылып калган жана ага шилтеме өзгөрмөдө жатат).

Төмөнкү код берилген:

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

Бул коддун кемчиликтерин көрсөтүңүз. Аларды оңдоп бериңиз.