Grandinėlių privalumai ir trūkumai JavaScript

Nepaisant to, kad grandinėlės sutrumpina kodą, daugeliu atvejų kintamojo įvedimas vis dėlto yra patogesnis. Palyginkite du pavyzdžius - dabar aš įvedžiau kintamąjį elem ir galiu įrašyti bet kokį kiekį atributų, o querySelector iškviečiamas tik vieną kartą:

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

O dabar aš neįvedžiau naujo kintamojo ir todėl man tenka kviesti querySelector du kartus:

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

Manau, kad šis kodas tapo sudėtingesnis, nors ir užima viena eilute mažiau. Be to, jei norėsiu pakeisti id reikšmę iš 'elem' į kitą, teks tai daryti daugelyje vietų, kas nėra labai patogu.

Yra ir kita problema - naršyklės apkrova. Elementų paieška puslapyje, kurią atlieka metodas querySelector, yra gana lėta operacija (ir apskritai bet koks darbas su puslapio elementais - tai lėta operacija - atsiminkite tai).

Mūsų atveju, jei kaskart naudojame querySelector, naršyklė kaskart apdoros HTML puslapį ir ieškos elemento su nurodytu id kelis kartus (nesvarbu, kad id vienodi - naršyklė atliks visus veiksmus kelis kartus), atlikdama naudingas operacijas, kurios gali sulėtinti naršyklės veikimą.

Jei mes naudojame kintamąjį elem - jokios paieškos puslapyje nevyksta (elementas jau rastas ir nuoroda į jį yra kintamajame).

Duotas toks kodas:

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

Nurodykite šio kodo trūkumus. Ištaisykite juos.